Dot Matrix Print

Installation

pnpm dlx shadcn@latest add @cleverui/text-dot-matrix

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

Usage

tsx

import { TextDotMatrix } from '@/components/ui/text-dot-matrix'

Exampletsx

import { TextDotMatrix } from '@/components/ui/text-dot-matrix'

export default function TextDotMatrixDemo() {
  return (
    <div className="relative mx-auto flex min-h-[420px] max-w-4xl flex-col items-center justify-center gap-6 overflow-hidden px-4 py-20 sm:px-6">
      <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · one carriage pass
      </p>
      <TextDotMatrix as="h1" text="Print the brief." accentWord="brief." className="text-center" />
      <p className="max-w-md text-center text-sm leading-relaxed text-muted-foreground">
        Ink density sets each dot&apos;s radius, a press raster, not a LED grid. After the pass,
        a fine pointer pulls nearby dots like wet paper.
      </p>
    </div>
  )
}

API reference

TextDotMatrix accepts the following props.

Prop	Type	Default	Description
`text`*	`string`	–	budget ≤ 24 chars, rasterized at display size
`accentWord`	`string`	–	word whose dots print in primary; defaults to the last word
`dotPitch`	`number`	`4`	raster grid pitch in px at DPR 1
`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

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.

String Art

The headline built as string art, pins tap in along real glyph outlines and one continuous thread chords them until the word reads. React canvas text effect themed by Tailwind tokens.

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.

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.

Line Echo

A display line trailed by two faint offset echoes of itself that converge into one crisp line on view, print misregistration settling into register. One pass, then stillness.

Frequently asked questions

How do I install the Dot Matrix Print 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-dot-matrix`. 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 Dot Matrix Print require?

Dot Matrix Print has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Dot Matrix Print 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