Pixel Swap

Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers.

Default

Hover or click the card to swap its content. Pattern, trigger and every timing prop are wired to the controls underneath.

Hover the card

Pattern

Trigger

Pixel Size64px

Gap0px

Pixel Radius0%

Pixel Scale0.35

Pixel Spin0°

Duration1400ms

Pixel Duration450ms

Randomness0

Fade

Prop	Type	Default	Description
`pixelSize`	`number`	`64`	Square pixel edge length in pixels. Grown automatically when the grid would exceed 220 pixels.
`gap`	`number`	`0`	Space between pixels in pixels.
`pixelRadius`	`number`	`0`	Corner rounding of each pixel as a percentage (0 = square, 50 = circle).
`pixelScale`	`number`	`0.35`	Size each pixel starts at, relative to its final size.
`fade`	`boolean`	`true`	Fade each pixel in as it opens. Disable for a hard pixel pop.
`duration`	`number`	`1400`	Total transition duration in milliseconds.
`pixelDuration`	`number`	`450`	Time a single pixel takes to open, in milliseconds.
`pattern`	`"random" \| "center" \| "edges" \| "left-to-right" \| "right-to-left" \| "top-to-bottom" \| "bottom-to-top" \| "diagonal" \| "spiral"`	`random`	Order in which pixels animate.
`randomness`	`number`	`0`	Noise mixed into the pattern order, from 0 (strict) to 1 (fully scattered).
`pixelSpin`	`number`	`0`	Degrees each pixel rotates as it opens.
`easing`	`string`	`cubic-bezier(0.22, 1, 0.36, 1)`	Easing applied to each pixel as it opens.
`trigger`	`"hover" \| "click" \| "manual"`	`hover`	Interaction that requests a content swap.
`initialActive`	`boolean`	`false`	Whether the second content is initially visible.
`active`	`boolean`	`undefined`	Controlled active state. Use with trigger="manual" for external control.
`aspectRatio`	`string`	`16 / 10`	CSS aspect-ratio value for the wrapper.

Event	Description
`active-change`	Emitted with a boolean whenever an interaction requests a state change.
`complete`	Emitted with a boolean once the incoming content is fully revealed.

Slot	Description
`first`	Content shown in the initial state.
`second`	Content revealed after the pixel cover.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Focuses the card. With the hover trigger, focus also swaps the content.
`Enter`	Swaps the content when the trigger is click.
`Space`	Swaps the content when the trigger is click.

The hidden layer is aria-hidden, so screen readers only read the content currently shown.
With prefers-reduced-motion the content swaps with no pixel animation.