A draggable comparison of a messy spreadsheet week against a clean content calendar. Callout pills flip from the pain to the fix as the divider crosses them, and the stats below update with the handle.
Quillmark content calendar
Drag the handle across a real Monday. Every pain on the left has a fix on the right.
Re: Re: Fwd: teaser copy FINAL
Approval needed: Founder Q&A
Where is the Ridgeway draft?
npx shadcn@latest add https://hyperblur.dev/r/features-before-after.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-before-after.tsx.
import { FeaturesBeforeAfter } from "@/components/hyperblur/features-before-after"
<FeaturesBeforeAfter defaultValue={52} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Quillmark content calendar" | Label above the heading. |
| title | string | "Same week. Same team. One less spreadsheet." | Section heading. |
| subtitle | string | "Drag the handle across a real Monday..." | Paragraph under the heading. |
| callouts | { x: number; y: number; before: string; after: string }[] | 3 callouts | Pills positioned in percent of the stage. They show the before text while left of the divider. |
| value | number | Controlled divider position, 0 to 100. | |
| defaultValue | number | 52 | Starting divider position when uncontrolled. |
| onChange | (value: number) => void | Called while the divider moves. | |
| beforeLabel | string | "Before" | Label of the before side. |
| afterLabel | string | "With Quillmark" | Label of the after side. |
| accent | string | "#f59e0b" | Accent for the after side. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |