PulseLog
Layout 15 — Timeline / Activity Feed Monitoring
A production-grade monitoring dashboard with dark fuchsia theme, real-time activity feed, severity-coded timeline events, and comprehensive monitoring sub-pages. Inspired by Datadog and Grafana.
Features
Monitoring Layout Architecture
Sidebar navigation (220px) + main content (fluid) + system status panel (260px). Classic monitoring dashboard with real-time feed and severity-coded events.
Dark Fuchsia Theme
Background #0b0b10, surface #111118, raised #16161f with fuchsia-500 (#d946ef) accent. Severity colors: Critical (red), Warning (amber), Info (blue), Success (green). CSS custom properties for full theme control.
JetBrains Mono + Geist Sans
JetBrains Mono for timestamps, data values, badges, and monospace content. Geist Sans for UI text, labels, and navigation. Technical monitoring aesthetic.
Activity Timeline Feed
Chronological event feed with severity-colored left borders, inline metadata on hover, and staggered entrance animations. 12+ realistic monitoring events.
Feed Sidebar with Source Filters
Navigation with spring-animated active indicator. Collapsible source filter toggles (API, Database, Auth, System, Network) with active count badges. PulseLog brand with pulse animation.
Severity System
Four severity levels with distinct visual treatment: Critical (red glow + pulsing dot), Warning (amber), Info (blue), Success (green). Each affects borders, badges, and timeline dots.
Animations
Timeline Dot Pulse
SignatureSignature animation: CSS pulsing dots at timeline connection points. Critical dots use animate-ping for urgent visibility. All dots have a subtle animate-pulse glow ring.
Severity Card Glow
SignatureCritical events have a red box-shadow glow (0 0 20px rgba(239,68,68,0.15)) that draws attention to high-severity items in the feed.
Live Indicator
SignatureFuchsia ping animation in header showing real-time streaming status. Also appears at the top of the activity feed with 'Streaming' label.
Staggered Feed Entrance
EntranceActivity items enter with x:-12 offset and opacity:0, staggered by 0.05s per item. Creates a cascading reveal effect as events load.
Nav Indicator Spring
SpringActive route indicator slides with spring physics (stiffness: 500, damping: 30) using motion layoutId for smooth transitions.
Source Filter Collapse
LayoutSources section collapses with height animation (0.2s). Chevron rotates 90 degrees on toggle. AnimatePresence handles enter/exit.
Hover Metadata Reveal
InteractionActivity items reveal additional metadata (key-value pairs) on hover with opacity and height animation.
Pages (7)
Dashboard
/15-timelineActivity timeline feed with stat cards, area chart (event volume 24h), bar chart (severity distribution), 12 monitoring events
Events
/15-timeline/eventsFull event list with severity/source/text filters, sortable table, bulk acknowledge actions, 22+ inline events
Alerts
/15-timeline/alertsActive alerts with acknowledge/resolve/silence buttons, severity cards with glow, alert rules summary
Audit Log
/15-timeline/audit-logCompliance audit trail with actor, action, type, resource, timestamp, IP. Filterable by actor and type
Integrations
/15-timeline/integrationsConnected services (Slack, PagerDuty, Datadog, Webhook) with status, event counts, config details
Settings
/15-timeline/settingsAlert rules, retention policy, notification preferences, API keys, source configuration
About
/15-timeline/aboutThis page - documents all features, animations, pages, and technical decisions
Tech Stack
| Package | Purpose |
|---|---|
| motion/react | Staggered feed entrance, nav spring indicator, settings toggle, source collapse |
| recharts | Area chart (event volume with pulselog-volume-grad), Bar chart (severity distribution) |
| lucide-react | All iconography - Activity, AlertTriangle, Shield, Radio, Bell, etc. |
| JetBrains Mono | Timestamps, data values, badges, monospace elements |
| Geist Sans | UI text, navigation labels, descriptions |