Kinetic Timeline
A highly interactive, physical timeline where the connector line bends like a tense string toward your cursor, dragging the timeline nodes with it.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
lineColorrgba(255, 255, 255, 0.2)
Color of the static timeline line.
accentColor#00f0ff
Color for the node dots and accent texts.
glowColorrgba(0, 240, 255, 0.5)
Color for the hover glow sweeps and background glowing nodes.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| items | KineticTimelineItem[] | [] | Array of timeline items with title, date, description, and icon. |
| lineColor | string | "rgba(255, 255, 255, 0.2)" | Color of the static timeline line. |
| accentColor | string | "#00f0ff" | Color for the node dots and accent texts. |
| glowColor | string | "rgba(0, 240, 255, 0.5)" | Color for the hover glow sweeps and background glowing nodes. |