Pressure Type
Headline letters that swell from hairline to black as the cursor passes.
Features
- Each letter's weight follows the cursor, from 200 to 900
- A slow wave rolls through the type on touch screens
- Needs a variable font, such as Geist from next/font
- Screen readers get the plain headline
Best for: Studios, type-led brands and portfolios that want the headline itself to be the show.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The part of the headline that reacts to the cursor. |
| accent | string | - | Optional ending in serif italic, which stays still. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Pressure Type interactive section free to use?
Yes. Pressure Type is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Pressure Type work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Pressure Type in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Pressure Type need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Pressure Type accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.