Pressure Text, animated React component

A headline that bulges where you hover: letters near the pointer swell taller and heavier on a variable font's weight axis and take the accent colour. Each letter has its own spring, so the swell falls away smoothly on either side.

Pro
Motion Effects
Hover
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Move along the word.

Props

Prop	Type	Default	What it does
text	string	"Feel every word"	The headline. Each character gets its own spring.
accent	string	"#0071e3"	Colour the letters take near the pointer.
hint	string	"Move along the word."	Caption under the headline. An empty string hides it.
spread	number	0.18	Share of the word's width a letter can be from the pointer and still swell.
autoplay	boolean	false	Sweeps a bulge back and forth along the word until someone hovers it.
className	string	—	Extra classes for the root element.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/pressure-text
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
pressure-text/
index.ts
pressure-text.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { PressureText } from "@/components/pressure-text";

export default function Page() {
  return (
    <main>
      <PressureText />
    </main>
  );
}

Pressure Text, animated React component

Play with it

Props

More motion effects