Compositor's Case

Installation

pnpm dlx shadcn@latest add @cleverui/text-compositor

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

Usage

tsx

import { TextCompositor } from '@/components/ui/text-compositor'

Exampletsx

import { TextCompositor } from '@/components/ui/text-compositor'

export default function TextCompositorDemo() {
  return (
    <div className="relative mx-auto flex min-h-[480px] max-w-3xl flex-col items-center justify-center gap-6 overflow-hidden px-4 py-16 sm:px-6">
      <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · one setting, one proof
      </p>
      <TextCompositor as="h1" text="SET THE TYPE" caption="CASE 02 · 12 PT · GALLEY A" className="w-full" />
      <p className="max-w-md text-center text-sm leading-relaxed text-muted-foreground">
        Sorts leave a real inventory, seat mirrored in the stick, then a single
        proof pull flips the line readable. Metal-true, once.
      </p>
    </div>
  )
}

API reference

TextCompositor accepts the following props.

Prop	Type	Default	Description
`text`*	`string`	–	the line to set, uppercased, budget ≤ 18 chars; its unique glyphs stock the case
`caption`	`string`	`'CASE 02 · 12 PT'`	mono micro-label on the case rail
`delay`	`number`	`0.2`	seconds before the setting sequence starts
`as`	`'h1' \| 'h2' \| 'h3' \| 'p'`	`'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

Punch Tape

A punched paper tape feeds through a reader head and your React headline prints glyph by glyph, the encoding visible in the holes. Tailwind tokens; one pass, then stillness.

Split Flap

A split-flap departure board for React, mono cells flip through seeded glyphs with mechanical fold physics and land on your message left to right. Tailwind tokens only, designed reduced-motion still.

Dot Matrix Print

The headline prints as a dot-matrix raster, a carriage sweeps once and canvas dots sized by ink density pop in column by column. React and Tailwind tokens via probes; one accent word in primary.

Frottage Rubbing

A graphite rubbing over hidden relief, crayon passes sweep the sheet and the React headline surfaces where pigment catches. Canvas text effect themed by Tailwind token probes.

Ink Bleed

Letters develop like ink on wet paper, each glyph starts as a soft bleed and contracts to crisp edges, neighbouring bleeds wicking together mid-pass. One development, then stillness.

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.

Frequently asked questions

How do I install the Compositor's Case 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-compositor`. 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 Compositor's Case require?

Compositor's Case 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 Compositor's Case 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