Shadcn.io is not affiliated with official shadcn/ui
Text Trail
WebGL text trail effect with noise-driven persistence and color cycling using Three.js for React applications.
Text Trail preview
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.
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 text-trail text effect into my projectRelated Components
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
Was this page helpful?
Sign in to leave feedback.