Kinetic Type Wall

Installation

pnpm dlx shadcn@latest add @cleverui/text-kinetic-wall

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

Usage

tsx

import { TextKineticWall } from '@/components/ui/text-kinetic-wall'

Exampletsx

import { TextKineticWall } from '@/components/ui/text-kinetic-wall'

export default function TextKineticWallDemo() {
  return (
    <div className="relative mx-auto flex min-h-[600px] w-full max-w-6xl flex-col items-center justify-center gap-8 overflow-hidden px-0 py-16 sm:px-4">
      <p className="px-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · hover to halt the wall
      </p>
      <TextKineticWall
        as="h1"
        text="Ship the draft"
        accentWord="draft"
        rows={5}
        speed={1}
      />
      <p className="max-w-md px-4 text-center text-sm leading-relaxed text-muted-foreground">
        Hollow outline echoes drift in alternating lanes. One inked row carries the accent,
        ease to a stop on hover, resume on leave.
      </p>
    </div>
  )
}

API reference

TextKineticWall accepts the following props.

Prop	Type	Default	Description
`text`*	`string`	–	the headline, repeated per row, budget ≤ 32 chars
`accentWord`	`string`	–	word in the live row set in text-primary; defaults to the last word
`rows`	`number`	`5`	row count, clamped 3–7; the middle row is the live inked row
`speed`	`number`	`1`	drift speed multiplier
`as`	`'h1' \| 'h2' \| 'h3'`	`'h2'`	heading level of the sr-only text

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

Related components

Redline Proof

A live redline pass over the sentence, strikethroughs draw, corrections drop in, a REV stamp lands, and the final React headline settles clean. Tailwind-token primary ink.

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.

Variable Pulse

A weight wave travels the headline via variable-font axes, glyphs swell and relax as it passes, and the pointer presses local weight into the line like pressure on wet type.

Annotate Callouts

Inline annotation system, marked phrases carry numbered mono superscripts wired to margin notes that reveal as each mark scrolls into view. Editorial footnotes, live on the page.

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.

Frequently asked questions

How do I install the Kinetic Type Wall 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-kinetic-wall`. 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 Kinetic Type Wall require?

Kinetic Type Wall 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 Kinetic Type Wall 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