A light section with a draggable divider over two release timelines. Drag or use the arrow keys to reveal how the same stages shrink from weeks to days.
Release timeline
The same six release stages for a mobile banking app, before and after Pipeline took over the waiting.
npx shadcn@latest add https://hyperblur.dev/r/comparison-slider.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/comparison-slider.tsx.
import { ComparisonSlider } from "@/components/hyperblur/comparison-slider"
<ComparisonSlider defaultValue={40} onChange={(p) => console.log(p)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Release timeline" | Small label above the title. Empty hides it. |
| title | string | "Drag to see three weeks become two days" | Section heading. |
| subtitle | string | Paragraph next to the heading. | |
| windowTitle | string | "Release plan, Ledger iOS 4.2" | Text in the window bar above the timelines. |
| span | number | 20 | Number of days the timeline axis covers. |
| stages | { label: string; before: { start: number; wait?: number; length: number }; after: { start: number; length: number } }[] | 6 stages | Timeline rows in days. wait draws a hatched waiting segment before the work bar on the before side. |
| before | { label: string; caption: string; total: string } | Before side | Label, caption and total for the left state. |
| after | { label: string; caption: string; total: string } | After side | Label, caption and total for the right state. |
| highlight | string | "17 days back" | Large callout drawn in the empty part of the after timeline. Empty hides it. |
| value | number | Controlled divider position from 0 to 100. Pair with onChange. | |
| defaultValue | number | 52 | Initial divider position when uncontrolled. |
| onChange | (position: number) => void | Called while the divider moves. | |
| accent | string | "#6d5dfc" | Divider, after bars and label color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |