A central spine connects every event. Cards branch left and right in alternating rhythm. Hover syncs node, connector, and card as a single unit — no element acts alone.
Hover any row. The node dot, line segments, and card transform simultaneously — that is Node Synchronization.
StyleKit was conceived as an opinionated design system where every style ships with its own motion vocabulary, color semantics, and layout DNA. The founding principle: each style must be self-contained and immediately usable.
StyleKit was conceived as an opinionated design system where every style ships with its own motion vocabulary, color semantics, and layout DNA. The founding principle: each style must be self-contained and immediately usable.
A shared semantic layer was introduced covering color, spacing, radius, and motion tokens. Every subsequent style inherits from this foundation, ensuring cross-style consistency in padding, shadow, and transition timing.
StyleKit shipped its initial alpha to early adopters with twelve core styles. Community feedback during this period defined the interaction physics model that governs all hover and transition behavior across the library.
StyleKit shipped its initial alpha to early adopters with twelve core styles. Community feedback during this period defined the interaction physics model that governs all hover and transition behavior across the library.
A dedicated interaction layer was built, giving each style its own named motion patterns: pull-out effects, node synchronization, spring easing, and coordinated group hover orchestration that treats card, dot, and connector as one unit.
Each style was given a fully self-contained showcase demonstrating layout, color, motion, and component variants without importing anything from shared UI libraries. The zero-dependency showcase pattern was codified.
Each style was given a fully self-contained showcase demonstrating layout, color, motion, and component variants without importing anything from shared UI libraries. The zero-dependency showcase pattern was codified.
Forty-one styles graduated to stable after passing a twelve-point checklist covering accessibility, mobile responsiveness, WCAG contrast ratios, and interaction parity across pointer and keyboard input methods.
The Timeline Vertical style was introduced to handle chronological storytelling. The central spine, alternating card layout, and node synchronization pattern make it the most spatially expressive style in the collection.
The Timeline Vertical style was introduced to handle chronological storytelling. The central spine, alternating card layout, and node synchronization pattern make it the most spatially expressive style in the collection.
StyleKit opened its showcase contribution program. Each accepted submission is reviewed against the Style Addition Checklist and ships with full showcase coverage, TypeScript types, tests, and documentation.
Three structural layers compose every timeline: the central spine, circular node dots, and content cards connected via positional alignment.
position: absolute; width: 2px; left: 50%;An absolute-positioned div (or pseudo-element) runs the full height of the container. It is the structural backbone. Without it, items lose their chronological binding.
w-4 h-4 rounded-full border-2 border-whiteEach node is a 16x16 rounded circle centered on the spine. A white border creates a cut-out effect that visually separates it from the line. Color encodes the event category.
w-1/2 pr-12 sm:text-rightCards sit in a 50% column adjacent to the spine. Desktop: alternates left/right using odd/even index. Mobile: all items collapse to the right side with the spine flush left.
className="group relative flex items-stretch"The outer wrapper carries the group class. All three elements — line segment, dot, card — listen to this shared hover context. This enables Node Synchronization.
Hover each component — the Node Synchronization behavior is live in every tab.
Each interaction rule is demonstrated live. Hover or click the cards to feel the exact behavior that every timeline implementation must reproduce.
Hovering any part of the row must simultaneously highlight the node dot. The dot scales to 1.35x and emits a color-matched glow. Card and dot share one hover context.
Hover anywhere in the row above
group-hover:scale-[1.35] /* dot */
group-hover:bg-[#3b82f6] /* line */
group-hover:border-[#3b82f6] /* card */Card hover causes a light upward float (-translate-y-1) AND a slight horizontal translate-x-1. Together they simulate the node being pulled out from the spine for closer examination.
Before (rest)
After (hover)
Live: hover the card below
group-hover:-translate-y-1
group-hover:translate-x-1
transition: all 200ms ease-outUse duration-200 ease-out everywhere. This enables stable feedback even during rapid scroll-through where multiple items enter and leave hover state in quick succession.
Easing comparison — click to animate
/* Correct — every transition property */
transition-all duration-200 ease-outWhen a card is focused or hovered, its border color must match the timeline spine color (#3b82f6). This maintains narrative coherence — the card and the line it belongs to appear as one system, not two separate elements.
Wrong
Correct
/* Focused card border = spine color */
group-hover:border-[#3b82f6]
/* Never use a contrasting color */transition: all 200ms ease-outCard transform, node scale, node glow, line color, and border — all share one easing curve and one duration. One timeline, one motion vocabulary.
Each rule is itself a timeline node. Hover to activate Node Synchronization on every rule card — the pattern is self-demonstrating.
The absolute-positioned line is the structural anchor. All nodes and cards position relative to it. Without it, the layout collapses.
Use left-1/2 + -translate-x-1/2 (or left-[calc(50%-8px)]). A misaligned dot destroys the visual grammar immediately.
border-2 border-white creates a cut-out ring that separates the dot from the spine color, preserving readability at any size.
The group class enables all three elements — card, dot, line — to respond to one hover context. Never split the hover target.
Below md breakpoint, move the spine to left-5 and render all cards on the right. No exceptions for narrow viewports.
Removing time labels reduces the timeline to an arbitrary list. Every node needs temporal context to communicate chronology.
A broken spine signals a missing event or layout error. Keep the line continuous from first to last node — even across dynamic filtering.
All nodes must share the same diameter (w-4 h-4 default). Varying sizes imply semantic hierarchy that the layout does not support.
At 375px, a 50% card is ~185px wide — insufficient for most content. Always collapse to single-side below md.
Never attach hover to the dot alone. Node Synchronization requires both card and dot to be children of the same group wrapper.
Transitions above 300ms feel sluggish when users scroll quickly through many events. Linear easing feels mechanical. Use ease-out at 200ms.
Long descriptions make the line segment disproportionately tall. Truncate at ~40px and reveal on interaction to maintain vertical rhythm.
#1e293bText, headings, spine
#f8fafcPage background
#e2e8f0Default dividers, lines
#3b82f6Accent — Feature, spine highlight
#10b981Accent — Launch events
#f59e0bAccent — Design changes
#ef4444Accent — Milestone events
#94a3b8Secondary text, labels