Make your AI a shadcn expert
Previous: Text Trail
Next: Timecode Text

Tilt Text

Per-letter 3D parallax tilt that follows the cursor with rotateX, rotateY, and depth translation for React applications.

Tilt Text preview

Scroll to load preview

Move the cursor over the word and the letters tilt to face you. Each character measures the cursor's offset from its own center and rotates on its X and Y axes accordingly — letters near the pointer tilt more steeply, letters at the edge stay almost flat. A small Z translation pushes hovered letters forward to sell the depth. The motion is spring-damped so the type follows the cursor with a fluid lag rather than snapping rigidly. Pointer leaves and the whole word relaxes back to flat. Drop it into a hero, a portfolio name, or any oversized headline that should feel three-dimensional under the mouse.

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 tilt-text text effect into my project

Text Pressure

Variable font weight responding to cursor proximity

Variable Proximity

Variable font weight responding to cursor position

Text Cursor

Character trails following cursor movement

Scrambled Text

Proximity-based character scrambling with GSAP

Text Hover Effect

SVG text with radial gradient mask reveal

Wave Text

Continuous traveling sine wave through text

FAQ

Was this page helpful?

Sign in to leave feedback.

Text Trail

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

Timecode Text

SMPTE-style HH:MM:SS:FF running timecode display with frame-accurate advancement at 24, 30, or 60 fps for React video, broadcast, and audio applications using motion.