SpinningText
v1.0.1NewUpdated 21 Jul 2026Text laid out around a rotating circular path (MagicUI). Each character is positioned on a ring of a given radius and the whole ring spins continuously. Use for badge seals, vinyl-record labels, or playful hero accents;
Preview
Live · 9 storiesDefaultOpen ↗
▸Why this is recommendedtextcircularrotateseal+4
The default, out-of-the-box SpinningText.
Recommended for+14
- ✓Circular badge / seal text
- ✓Vinyl / sticker accents
- ✓Decorative hero flourishes
Tags+6
textcircularrotatesealbadgemotionmagicuidefault
Features+4
- Characters arranged on a circular path
- Continuous rotation (configurable duration)
- reverse (counter-clockwise) spin
- radius in em (scales with font size)
- fontSize override (number = rem, string = as-is)
- Respects prefers-reduced-motion (renders static)
Not recommended for−2
- ✕Body copy / readable paragraphs
- ✕Anything requiring text selection or wrapping
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
childrenText to lay out around the circle (must be a string)
yesradiusRing radius in em (default 5)
—durationSeconds per revolution (default 10)
—reverseSpin counter-clockwise
—fontSizeFont size (number = rem, string = as-is)
—