Shadcn.io is not affiliated with official shadcn/ui
Text Pressure
Variable font weight, width, and italic responding to cursor proximity for React applications.
Text Pressure preview
Text that morphs and stretches in response to your cursor—a mesmerizing showcase of variable font capabilities. Each character independently adjusts its font-variation-settings based on distance from the cursor: weight thickens, width expands, italics slant, and opacity fades. The effect follows mouse movement with smooth interpolation, creating an organic, reactive typography experience. Supports any variable font with configurable variation axes. Built with vanilla React and requestAnimationFrame. Perfect for artistic hero sections, interactive typography experiments, or demonstrating variable font features.
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-pressure text effect into my projectRelated Components
Variable Proximity
Variable font weight responding to cursor position
Scrambled Text
Proximity-based character scrambling with GSAP
Text Cursor
Character trails following cursor movement
Text Hover Effect
SVG text with radial gradient mask reveal
Blur Text
Text animation from blur to focus
Glitch Text
Digital glitch effects with RGB channel separation
FAQ
Was this page helpful?
Sign in to leave feedback.