ComponentsPhysics
Elastic text
Drag a letter and the word stretches like rubber.
Installation
$ npx shadcn@latest add @textlab/elastic-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ElasticText } from "@/components/textlab/elastic-text/elastic-text";
<ElasticText as="h2" text="Pull me" variant="sling" />Variants
bandslingProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "band" | "sling" | "band" | Stretch and ease back, or snap back hard and overshoot. |
| reach | number | 3 | How many neighbours follow a pulled 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
- Toy-like hero moments and interactive posters.
- Touch devices, where dragging feels natural.
Skip it
- Text inside scrolling lists; dragging captures the pointer.
- Anything people should select and copy.
Accessibility and motion
Accessibility
- Letters are aria-hidden; the word is read once.
- Dragging is decorative; nothing depends on it.
Motion
- Pull resistance grows with distance, like rubber.
- Neighbours follow with exponential falloff; release springs them home.
Reduced motion. Plain text; dragging does nothing.
Performance
- Springs update only while something is moving.