Hero

Magnetic Letters Hero

Dark editorial hero where every letter of the headline tracks the cursor under its own spring physics. Configurable pull radius and strength. The backdrop is three large blurred gradient orbs (teal, magenta, amber) drifting diagonally on independent slow loops with `mix-blend: screen`, layered with a static SVG-turbulence film grain. A soft white glow fades in around letters as the pointer approaches.

UniqueUI CLI

npx uniqueui add hero-magnetic-letters

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/hero-magnetic-letters.json -y

Preview

Magnetic · 0x01

Every letter is a spring. Hover the headline — each glyph leans into the cursor under its own physics. No external motion deps beyond what the rest of the library uses.

Usage

import { MagneticLettersHero } from "@/components/ui/hero-magnetic-letters";

export default function Hero() {
  return <MagneticLettersHero headline="Motion, where it matters." />;
}

Props

Prop	Type	Description
`children`	`ReactNode`	Override the entire hero composition (eyebrow + headline + sub + CTAs). When omitted, a default composition renders that uses the `headline` prop.
`headline`	`string`	Headline text. Each glyph becomes an independent motion target — set this instead of passing `children` if you only want to swap copy.
`radius`	`number`	Pixel radius around each letter within which the cursor exerts pull. Outside the radius the letter rests at its natural position.
`strength`	`number`	Maximum displacement (in px) any single letter can reach at peak proximity to the cursor.
`className`	`string`	Extra classes on the outer `<section>`.