Kinetic Variable Headline

A large display headline that animates variable font weight per glyph on entrance and pointer proximity. Letters inflate like a magnetic field while preserving readable text semantics.

UniqueUI CLI

npx uniqueui add kinetic-variable-headline

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/kinetic-variable-headline.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Usage

import { KineticVariableHeadline } from "@/components/ui/kinetic-variable-headline";

export default function Example() {
  return (
    <KineticVariableHeadline
      text="CRAFTED MOTION"
      mode="both"
      className="text-[clamp(3.5rem,11vw,7.2rem)] uppercase"
    />
  );
}

Props

Prop	Type	Description
`text`	`string`	Headline text. Supports line breaks via `\n`.
`mode`	`"entrance" \| "pointer" \| "both"`	Animation mode: entrance stagger, pointer magnetic field, or both.
`weightRange`	`[number, number]`	Variable font weight range mapped across animations.
`staggerMs`	`number`	Per-letter delay for entrance animation in milliseconds.
`as`	`"h1" \| "h2" \| "h3"`	Semantic heading level.
`className`	`string`	Classes for the headline wrapper.