KQ-350 · ELASTIC/TYPE
Elastic Type
Display text whose glyphs compress under the cursor and rebound when it leaves — each letter its own spring, so a word behaves like a row of rubber blocks. The rebound overshoot on the way back is the signature; without it the effect reads as a squash, not an elastic. Built for 404 numerals and one-word headlines.
KQ-350 · ELASTIC/TYPE
run the cursor across it
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/elastic-type
Props
- text
- string
- default —
- The word or numeral to render.
- radius
- number
- default 120
- Pixel radius of the cursor's influence.
- squash
- number
- default 0.55
- Maximum horizontal compression at the cursor.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The word or numeral to render. |
| radius | number | 120 | Pixel radius of the cursor's influence. |
| squash | number | 0.55 | Maximum horizontal compression at the cursor. |