KQ-067 · SLICE/COMPARE
Slice Compare
A comparison divider struck as a blade — it leans into the cut as you drag and swings back plumb on release, parting two scenes with cast shadows on both sides of the edge.
KQ-067 · SLICE/COMPARE
SIGNAL SPLIT · A/B
KQ-067
BLADE · 050%
Drag the blade - it leans into the cut and swings back plumb.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/slice-compare
Props
- before / after
- ReactNode / ReactNode
- default —
- The two scenes either side of the blade.
- beforeLabel / afterLabel
- string / string
- default —
- Corner labels and the slider valuetext.
- defaultPosition / onPositionChange
- number / (position) => void
- default —
- Starting cut position (0-100) and the change callback.
- height
- number
- default 220
- Stage height in px.
| Prop | Type | Default | Description |
|---|---|---|---|
| before / after | ReactNode / ReactNode | — | The two scenes either side of the blade. |
| beforeLabel / afterLabel | string / string | — | Corner labels and the slider valuetext. |
| defaultPosition / onPositionChange | number / (position) => void | — | Starting cut position (0-100) and the change callback. |
| height | number | 220 | Stage height in px. |