Shadcn.io is not affiliated with official shadcn/ui
Curved Loop
Text following curved SVG paths with smooth looping marquee animation for React applications.
Curved Loop preview
Text that flows along curved paths, creating mesmerizing marquee effects with customizable curvature. This component renders text on SVG textPath elements, animating seamlessly with configurable speed and direction. Interactive by default—drag to control the scroll direction and speed. Perfect for hero sections, artistic headers, or any design that needs text breaking free from straight lines. Built with vanilla React and SVG for maximum performance.
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 curved-loop text effect into my projectRelated Components
Circular Text
Text arranged in perfect circles with rotation controls
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
Rotating Text
Smooth vertical text cycling between strings
Shimmering Text
Wave-like shimmer effects across text
FAQ
Was this page helpful?
Sign in to leave feedback.