Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Counting Number
Next: Decrypted Text

Curved Loop

Text following curved SVG paths with smooth looping marquee animation for React applications.

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.

Curved Loop preview

Scroll to load preview

Installation

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

Counting Number

Animated counting number with spring transitions and in-view detection for React dashboards.

Decrypted Text

Matrix-style decryption text effect with character cycling for React applications.