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 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.
Text Pressure preview
Installation
Related 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