← All components
Interaction / component
Pixel Transition
Reveal a second layer through a playful two-stage pixel dissolve, with hover, touch and keyboard controls.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Adapted from React Bits with explicit project permission. The original random two-stage pixel cover/reveal, border and card proportions are retained; the gallery artwork is self-contained CSS.
- Pass firstContent and secondContent, or import Demo.tsx for the complete artwork. The reusable pixelColor defaults to currentColor, gridSize to 7 and step duration to 0.3s. The gallery uses green pixels.
- Hover with a mouse or pen to reveal; the labelled native Reveal button also works by touch, Enter or Space. Focus remains on the toggle. Only the visible content layer is available to interaction and assistive technology.
- Pause or reduced motion settles immediately on the requested content. Replay restores the first layer. Once mode retains the second layer until replay. Pixel grids are bounded to 1–30 cells per side.
- The owned animation clock cancels stale transitions and releases all work on unmount. Hidden/offscreen time is excluded. No GSAP runtime is needed in the extracted source.
React 19.2Modern browsers
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
firstContent (required) | ReactNode | — | Content before the reveal. |
secondContent (required) | ReactNode | — | Content after the reveal. |
aspectRatio | string | '100%' | Padding-top percentage defining the card height. |
paused | boolean | false | Freeze decorative motion; content remains usable. |
replayToken | number | 0 | Change to restart the effect. |