Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Pixel reveal

Swaps content behind a wave of square tiles: they cover the old view corner to corner, the content changes while hidden, and the tiles clear the same way. Change the key to run it; the whole wave is about half a second.

Pro
pnpm dlx shadcn@latest add @caliper/pixel-reveal

Plot 14 survey

Four views from the site visit on 14 October 2026.

Harbour

Harbour · 1 of 4

Installs components/ui/pixel-reveal.tsxDepends on none beyond ReactMotion shared motion tokens

When to use

Use it for

  • Switching between whole views of one area: a chart's period, a gallery item, a before and after.
  • A moment of change you want noticed.

Skip it when

  • Frequent updates such as live data; use a quiet fade.
  • Text people are reading; the wave interrupts it.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

The swap happens while covered
The old content stays until every tile is down, so nothing half-old half-new is ever visible.
Short on purpose
Each tile runs 160ms and the wave spans 220ms. Reduced motion swaps at once.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/pixel-reveal

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from PixelReveal and waveDelays.

example.tsx
import { PixelReveal, waveDelays } from "@/components/ui/pixel-reveal"

The worked example comes with Pro

The 43-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

PixelReveal

component
PropTypeDefault
swapKey *string—
children *ReactNode—
cellnumber36
classNamestring—

waveDelays

component

No props of its own; it accepts the native props of its root element.

Accessibility

It is built on native elements and keeps aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.

All Loaders & text examples