Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Text Reveal
Next: True Focus

Text Trail

WebGL text trail effect with noise-driven persistence and color cycling using Three.js for React applications.

Ethereal text trails that smear and flow with your cursor movement—a mesmerizing WebGL effect powered by Three.js. Text is rendered to canvas texture, then a shader applies simplex noise-driven distortion that persists across frames, creating ghostly trails. The cursor position influences the noise field, making trails flow toward or away from your mouse. Supports color cycling, customizable persistence, and crisp text rendering with supersampling. Built with Three.js shaders. Perfect for artistic hero sections, interactive backgrounds, or immersive cursor experiences.

Text Trail preview

Scroll to load preview

Installation

Text Cursor

Character trails following cursor movement

Variable Proximity

Variable font weight responding to cursor position

Scrambled Text

Proximity-based character scrambling with GSAP

Falling Text

Physics-based falling with Matter.js

Glitch Text

Digital glitch effects with RGB channel separation

Fuzzy Text

Soft blur transitions with particle-like text effects

FAQ

Text Reveal

Cinematic text reveal with clip-path animation following cursor position for React applications.

True Focus

Depth-of-field text effect with animated focus bracket highlighting for React applications.