Pixel Reveal React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import PixelReveal from "./PixelReveal";

export default function Example() {
  return (
    <PixelReveal
      src={"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20700%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23a35574%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22350%22%20r%3D%22205%22%20fill%3D%22%23c77488%22%2F%3E%3Cellipse%20cx%3D%22300%22%20cy%3D%22350%22%20rx%3D%2270%22%20ry%3D%22230%22%20fill%3D%22%23f4c4bd%22%20transform%3D%22rotate(-40%20300%20350)%22%2F%3E%3Cellipse%20cx%3D%22300%22%20cy%3D%22350%22%20rx%3D%2270%22%20ry%3D%22230%22%20fill%3D%22%23e99b9f%22%20transform%3D%22rotate(40%20300%20350)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22350%22%20r%3D%2262%22%20fill%3D%22%2363344e%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.085%22%2F%3E%3C%2Fsvg%3E"}
      alt={"Abstract coral petals on a rose background"}
      columns={12}
      rows={9}
      duration={650}
      stagger={25}
      coverColor={"#211a2b"}
      trigger={"hover"}
      aspectRatio={1.3}
      borderRadius={12}
    />
  );
}

Using Pixel Reveal

Use columns and rows to set the size of the reveal tiles. duration controls each tile's transition and stagger separates their start times.

Provide alt for the source image and choose trigger for when the reveal should begin. aspectRatio reserves the image space.

Props

Name	Type	Required	Default	Description
src	string	No	""	Image source URL. No image assets are bundled.
alt	string	No	""	Accessible image description.
columns	number	No	12	Grid columns, clamped from 1 to 30.
rows	number	No	9	Grid rows, clamped from 1 to 30.
duration	number	No	650	Tile transition duration in milliseconds.
stagger	number	No	25	Diagonal delay per tile in milliseconds.
coverColor	string	No	"#211a2b"	Colour of the tiles covering the image.
trigger	string	No	"view"	"view" reveals once on entering the viewport; "hover" reveals on pointer hover or keyboard focus.
aspectRatio	number	No	1.3	Container width divided by height.
borderRadius	number	No	12	Container corner radius in pixels.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.