← All components
Text / effect
Circular Text
Rotating typography with playful hover acceleration and a spring scale response.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx recreates the preview. The implementation owns one animation loop and excludes paused, hidden and offscreen time.
- Reduced motion keeps the content readable. Original attribution and notice are included.
- The original letter transforms, speed multipliers and 300/20 spring are preserved. Hover pause freezes at the current angle. Reduced motion keeps a still ring.
- Hover only changes decorative motion; it performs no action. All text remains available to assistive technology.
React 19framer-motion@12.42.2
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text (required) | string | required | Text |
spinDuration | number | 20 | Seconds per rotation |
onHover | slowDown|speedUp|pause|goBonkers | "speedUp" | Hover response |
size | number | 200 | Diameter |
color | string | "#ffffff" | Color |
paused | boolean | false | Freeze animation without advancing hidden time. |
replayToken | number | 0 | Change to restart. |
className | string | '' | Additional container classes. |