Pressure Test
Variable font axes shift in real-time based on mouse proximity to each character.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | UILORA | Text to display — each character responds independently to cursor proximity |
| className | string | text-white | Tailwind class for text color |
When to Use
Perfect for hero sections and interactive brand moments where you want text that feels physically responsive to the user's cursor.
Best Practices
Use a variable font (the built-in Compressa VF is loaded automatically). Works best with short, uppercase words. Set className to control text color.
Why This Component Matters
Variable font interactivity is a frontier technique that makes typography feel tactile and alive — impossible to achieve with static text.
FAQ
QDoes it require a specific font?
It loads the Compressa VF variable font automatically via the fontUrl prop. You can swap it for any variable font that supports wght, wdth, and ital axes.
QIs it mobile-friendly?
Yes, it supports touchmove events so the effect also works on touch devices.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.