A light redesign showcase: a browser frame holds the old and new screen, split by a draggable divider that also works with arrow keys. It sweeps once on load to hint that it moves, with result stats underneath.
Drag the divider to compare the old screen with the new one. Same data, a fraction of the noise.
Drag the handle or use the arrow keys. Hold Shift for bigger steps.
npx shadcn@latest add https://hyperblur.dev/r/showcase-before-after.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-before-after.tsx.
import { ShowcaseBeforeAfter } from "@/components/hyperblur/showcase-before-after"
<ShowcaseBeforeAfter defaultValue={40} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Ledgerly 3.0" | Pill above the title. |
| title | string | "We rebuilt invoicing from the ground up" | Section heading. |
| subtitle | string | How to use the divider | Paragraph under the heading. |
| beforeLabel | string | "Before, v2.8" | Chip on the old screen. |
| afterLabel | string | "After, v3.0" | Chip on the new screen. |
| value | number | Controlled divider position from 0 to 100. Pair with onValueChange. | |
| defaultValue | number | 50 | Starting divider position when uncontrolled. |
| onValueChange | (value: number) => void | Called while dragging or pressing arrow keys. | |
| intro | boolean | true | Sweep the divider once after mount. Skipped when controlled or under reduced motion. |
| stats | { value: string; label: string }[] | Three results | Numbers shown under the frame. Pass an empty array to hide them. |
| url | string | "app.ledgerly.com/invoices" | Text in the browser address bar. |
| accent | string | "#10b981" | Color of the after chip, new screen highlights and focus ring. |