pleate.uiEffects
Animations

Pixel Transition

A card that swaps between two faces behind a curtain of solid pixels. Hover, focus or tap.
import { PixelTransition } from "pleate/effects/pixel-transition";

Card

Hover the photo, or tap it on a touch screen.

A quiet harbor

Props

first

Face at rest.

ReactNode

second

Face after the swap.

ReactNode

grid

Pixels across.

numberdefault 9

pixelColor

Curtain color.

stringdefault var(--pl-fg)

duration

Time of one swap (ms).

numberdefault 500

Accessibility

  • The hidden face is inert.
  • Reduced motion swaps without the curtain.