ns-ui / compare-crack-seam
The divider is a fracture
Drag the seam between the photo and its ASCII treatment. Fast drags splinter micro-fissures off the crack, slow drags heal them shut, and on release a specular glint runs the fracture.
A
B
ns-ui
Before/after comparison slider whose divider is a living Voronoi crack seam — fast drags spawn branching micro-fissures, slow drags heal them shut, and release settles with a 1px specular glint traveling the fracture.
Use when before and after images compared through a draggable divider that is itself a living crack, fast drags spawning branching fissures and slow drags healing them shut; pick diff-unified-viewer instead when the comparison is text and individual lines have to be addressable, or image-crop-mat when one image is being framed rather than two compared.
Install
npx shadcn add https://design.helpmarq.comns-ui / compare-crack-seam
Drag the seam between the photo and its ASCII treatment. Fast drags splinter micro-fissures off the crack, slow drags heal them shut, and on release a specular glint runs the fracture.
| Prop | Type | Default | Description |
|---|---|---|---|
| before? | ReactNode | <div className="h-full w-full bg-surface" /> | left layer — revealed as the seam moves right |
| after? | ReactNode | <div className="h-full w-full bg-background" /> | right layer — clipped along the crack seam |
| initial? | number | 0.5 | initial split position 0..1 |
| seedCount? | number | 140 | Voronoi seed count feeding the seam's cell walls |
| jag? | number | 18 | max horizontal jag of the seam in px |
| spawnVelocity? | number | 600 | |vx| in px/s above which micro-fissures branch off the seam |
| label? | string | "Comparison position" | aria label for the hidden native range input |
| onChange? | (value: number) => void | — | fires on release and keyboard change with the split 0..1 |
| className? | string | — | — |