KQ-100 · LENTICULAR/CARD
Lenticular Card
A ridged-lens card holding two faces — sweeping across it flips one vertical ridge at a time, the wave trailing your hand, with a sheen band riding the active ridge; a house slider gives the keyboard the same sweep.
KQ-100 · LENTICULAR/CARD
BADGE OF TWO STATES · 14 RIDGES
KQ-100
READING · ACTIVE
Sweep across the card - each ridge flips on its own.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/lenticular-card
Props
- a / b
- ReactNode / ReactNode
- default —
- The two full-size faces, sliced across the ridges.
- ridges
- number
- default 14
- Strip count, clamped 4-28.
- onDominantChange
- (side: "a" | "b") => void
- default —
- Fires once when the majority face crosses over.
- height
- number
- default 210
- Card height in px.
| Prop | Type | Default | Description |
|---|---|---|---|
| a / b | ReactNode / ReactNode | — | The two full-size faces, sliced across the ridges. |
| ridges | number | 14 | Strip count, clamped 4-28. |
| onDominantChange | (side: "a" | "b") => void | — | Fires once when the majority face crosses over. |
| height | number | 210 | Card height in px. |