Overprint Register

A heading rendered as several overprinted colour plates that slide in from misalignment into exact register when they enter the viewport, then drift slightly out of register again on hover.

Loading preview…

npx shadcn@latest add https://webberui.com/r/overprint-register.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Title texttext

Entrance offset (px)offset

Alignment duration (s)duration

1.2

Channel interval (s)stagger

0.15

Dodge the cursormisalignOnHover

<OverprintRegister />

Installation

npx shadcn@latest add https://webberui.com/r/overprint-register.json

Or, once registries are configured in components.json, install it as @webberui/overprint-register.

Usage

import { OverprintRegister } from "@/components/ui/overprint-register";

<OverprintRegister text="OVERPRINT" className="text-5xl font-black" />

Props

Prop	Type	Default	Description
`text`	`string`	—	The heading text to overprint
`colors`	`string[]`	CMY / RGB default plates	Custom colour for each plate (any CSS colour value); the array length is the number of plates
`offset`	`number`	`8`	Initial misalignment amplitude on reveal (px)
`duration`	`number`	`1.2`	Duration of one plate's registration animation (seconds)
`stagger`	`number`	`0.15`	Interval between plates registering in sequence (seconds)
`misalignOnHover`	`boolean`	`true`	On hover, each plate drifts slightly out of register at random, returning when the pointer leaves
`once`	`boolean`	`true`	Plays only the first time the element enters the viewport

How it works

The printing metaphor: traditional multi-colour printing splits one image into several plates printed one after another, and if the plates are not aligned you get coloured "ghosting" (misregistration). This component renders the same run of text as 3–4 absolutely positioned coloured copies, each initially offset in a different direction, which slide back to (0, 0) in sequence when they enter the viewport — recreating the moment a press comes into register. On hover they drift slightly out again, as if the press had been nudged.
Light/dark blending strategy: the light theme uses mix-blend-multiply — like ink subtractively mixing on white paper, so where the three CMY plates overlap it approaches black; the dark theme switches to mix-blend-screen — like light additively mixing, so where the three RGB plates overlap it approaches white. Both modes are switched by the dark: class, and the default plate colours switch to the matching family too (light: cyan / magenta / yellow; dark: fluorescent red / green / blue).
Custom plates: when you pass colors, both themes share the same set of colours, but the multiply/screen switch still applies; pick colours that stay saturated enough in both blending modes, or use it with a fixed theme.
Size and typesetting: an opacity-0 placeholder copy of the text stays in the document flow at the bottom to establish the size, and the plates stack on top of it with absolute inset-0, so line breaking and alignment are exactly the same as ordinary text. The container carries isolate to establish its own stacking context, so blending happens only between the plates and never reaches whatever is behind the page background.
Hover misregistration: hover is only enabled after registration completes; each hover triggers a dynamic variant that picks a fresh random 2–3px direction of displacement, so no two misregistrations look the same, and it snaps back quickly when the pointer leaves (without replaying the reveal's stagger delay).

Accessibility

When the user has "reduce motion" enabled at the system level, the registered static overprint is shown directly with no reveal or hover animation
The real text lives in sr-only, and every coloured plate and the placeholder layer are aria-hidden decorative copies, so a screen reader reads it only once; the visual layer carries select-none so copying the text does not duplicate it