Variable Pulse

Installation

pnpm dlx shadcn@latest add @cleverui/text-variable-pulse

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { TextVariablePulse } from '@/components/ui/text-variable-pulse'

Exampletsx

import { TextVariablePulse } from '@/components/ui/text-variable-pulse'

export default function TextVariablePulseDemo() {
  return (
    <div className="relative mx-auto flex min-h-[420px] max-w-3xl flex-col items-center justify-center gap-6 overflow-hidden px-6 py-24 text-center">
      <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · weight as instrument
      </p>
      <TextVariablePulse as="h1" text="Press into type." />
      <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
        A single weight crest travels the line, then the pointer densifies glyphs like wet ink.
      </p>
    </div>
  )
}

API reference

TextVariablePulse accepts the following props.

Prop	Type	Default	Description
`text`*	`string`	–	budget ≤ 40 chars, every glyph animates its axes
`as`	`'h1' \| 'h2' \| 'h3' \| 'p' \| 'span'`	`'h2'`	–
`minWeight`	`number`	`350`	–
`maxWeight`	`number`	`750`	–
`delay`	`number`	`0.1`	seconds before the sequence starts

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Kinetic Type Wall

Editorial kinetic type wall for React, outline echoes of the headline drift in alternating directions while one inked row carries the accent word. Tailwind-token themed; hover eases it to a halt.

Proof Loupe

A proofreader's loupe sweeps the React headline once, glyphs bulge under the hairline lens with a mono kerning readout, then parks on the accent word. Fine pointers steer it; Tailwind token styled.

Scatter Assemble Text

The headline arrives as debris, glyphs scattered with spin and scale fly home on individual springs, then shy away from the pointer once assembled. Pure DOM transforms.

Shatter Settle

The set headline fractures into glyph shards, rotation, drift, depth, then every shard flies home and the line re-sets to perfect type. It departs and returns, exactly once.

Baseline Wave

A wave travels the baseline once, characters lift and settle as it passes, like a breeze crossing the line. One pass, then stillness.

Compositor's Case

Type set from a visible case, sorts fly from their compartments, land mirrored in the composing stick, and one proof pull flips the React headline readable. Tailwind-token letterpress craft.

Frequently asked questions

How do I install the Variable Pulse component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/text-variable-pulse`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Variable Pulse require?

Variable Pulse uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Variable Pulse to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code