Shadcn.io is not affiliated with official shadcn/ui
Circular Text
Text arranged in a rotating circle with hover interactions for React applications.
Circular Text preview
Text arranged in perfect circles with continuous rotation and interactive hover effects. This component distributes characters evenly around a circular path with smooth CSS transforms, creating eye-catching circular typography for logos, badges, or decorative elements. Built with Motion for React, featuring multiple hover behaviors including speed up, slow down, pause, and playful 'goBonkers' mode.
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 circular-text text effect into my projectRelated Components
Curved Loop
Text following curved paths with smooth looping animations
Rotating Text
Smooth vertical text cycling between multiple strings
Scroll Velocity
Text effects that respond to scroll speed and direction
Text Trail
Character trails that follow cursor movement
Rolling Text
3D character rolling with realistic physics
Shimmering Text
Wave-like shimmer effects across text
FAQ
Was this page helpful?
Sign in to leave feedback.
Chrome Text
Polished metallic chrome finish on text with a vertical reflectance gradient and a slow-traversing shimmer band, with polished, brushed, and blackened variants for React, Next.js, motion, and Tailwind CSS.
Clock Text
Live digital clock with per-digit slide animation, pulsing colon, 12h/24h formats, and IANA timezone support for React and Next.js dashboards using motion.