ComponentsPhysics
Jelly text
Letters wobble like jelly when touched.
Installation
$ npx shadcn@latest add @textlab/jelly-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { JellyText } from "@/components/textlab/jelly-text/jelly-text";
<JellyText as="h2" text="Squishy" />Variants
squashwobbleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "squash" | "wobble" | "squash" | Squish flat and spring tall, or rock side to side. |
| strength | number | 1 | How hard a touch kicks the letter. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Playful brands, games and empty states.
- Words that invite poking, on mouse or touch.
Skip it
- Interactive controls; letters are not buttons.
- Body text.
Accessibility and motion
Accessibility
- Letters are aria-hidden; the word is read once.
- Works with touch through pointer down.
Motion
- Underdamped springs ring out over about a second.
- Neighbours get a smaller kick so the wobble spreads.
Reduced motion. Touch does nothing; plain text.
Performance
- The frame loop runs only while a spring is moving.