Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Splitting Text
Next: Text Generate Effect

Text Cursor

Character trails that follow cursor movement with floating animations for React applications.

Text or emoji that trails behind your cursor like breadcrumbs, creating playful interactive effects. Characters spawn at regular spacing intervals as you move, orient themselves toward the mouse direction, and gently float with random micro-movements before fading away. Configurable trail length, spawn spacing, exit animations, and optional direction-following behavior. Built with Motion for React using AnimatePresence for smooth enter/exit transitions. Perfect for cursor effects, interactive backgrounds, or whimsical UI touches.

Text Cursor preview

Scroll to load preview

Installation

Text Trail

Character trails that follow cursor movement

Scrambled Text

Proximity-based character scrambling with GSAP

Variable Proximity

Variable font weight responding to cursor position

Text Pressure

Variable font weight responding to cursor proximity

Falling Text

Physics-based falling with Matter.js

Glitch Text

Digital glitch effects with RGB channel separation

FAQ

Splitting Text

Character, word, or line splitting with staggered reveal animations for React applications.

Text Generate Effect

Progressive word-by-word text generation with blur-to-focus reveal for React applications.