ns-ui / text-card-flick — hover the headline
Each letter is an index card: the face flicks back off its top edge while a duplicate flicks up from underneath, staggered outward from the center on a numerically integrated spring.
ns-ui
A hover or click flourish where every letter is an index card on a spindle — the face flicks back over its top edge and out of view while a duplicate flicks up from underneath into its place, staggered across the word from a configurable origin on a numerically integrated spring.
Use when a headline or button label that flicks its letters over on hover or click, each one a physically-integrated spring rather than an eased crossfade; reach for text-decrypt instead for a one-shot scramble-to-decode reveal with no ongoing hover affordance.
Install
npx shadcn add https://design.helpmarq.comns-ui / text-card-flick — hover the headline
Each letter is an index card: the face flicks back off its top edge while a duplicate flicks up from underneath, staggered outward from the center on a numerically integrated spring.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | the text to animate, one Animation pair per character |
| className? | string | — | — |
| letterClassName? | string | — | classes applied to every individual letter span |
| trigger? | "hover" | "click" | — | what starts the flick |
| stagger? | number | — | seconds between adjacent letters starting |
| from? | "start" | "end" | "center" | — | where the stagger wave originates |
| stiffness? | number | — | spring stiffness — higher settles faster |
| damping? | number | — | spring damping — lower overshoots more |
| onSettle? | () => void | — | — |