Shadcn.io is not affiliated with official shadcn/ui
Spiral Text
Letters arranged along an inward Archimedean spiral with arc-length distribution and optional continuous rotation for React applications.
Spiral Text preview
Each character sits along an inward Archimedean spiral, rotated to point along the path's tangent so the text reads as one continuous curve coiling inward. Spacing is computed by arc length — the spiral is integrated numerically and letters are dropped at equal distances along it — so glyphs never bunch up at the center the way naive angular distribution does. The whole spiral can rotate slowly via Motion's useTime, turning the layout into a quietly hypnotic mark. Configure the number of turns, outer/inner radius, rotation speed, and toggle the spin off entirely. Built for editorial heroes, brand decorative type, podcast covers, vinyl-style labels, and anywhere flat horizontal text would feel too ordinary.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the spiral-text text effect into my projectRelated Components
Circular Text
Text rotating around a circular path
Curved Loop
Text following a curved SVG path
Wave Text
Letters undulating along a continuous sine wave
Scroll Velocity
Marquee speed responds to scroll velocity
Drift Text
Letters drifting on subtle perlin-like motion
Splitting Text
Character, word, or line splitting with timing
FAQ
Was this page helpful?
Sign in to leave feedback.
Smallcaps Text
Animated cross-fade between lowercase and proper small-caps using font-variant-caps with per-letter stagger for typographic interactions in React, Next.js, Tailwind CSS, and motion.
Splitting Text
Character, word, or line splitting with staggered reveal animations for React applications.