Grid Reveal

Scattered motion.

Customize

Color

Pattern

Rows8

Cols8

Block duration0.28

Stagger0.018

Loop

Installs are paused for now. You can still preview and customize every component on its page.

import { GridReveal } from "@/components/grid-reveal";

<GridReveal rows={8} cols={8} color="blue" pattern="random">
  <YourContent />
</GridReveal>

PropType

Content revealed under the grid.

Default6

Default10

Default"random"

Fade time for each block in seconds.

Default0.45

Default0.03

Total reveal time in seconds. Overrides stagger.

Space between blocks in pixels.

Default0

Covers and reveals again on repeat. Plays once when reduced motion is on.

Defaulttrue

Default0.6

Defaulttrue

Waits until it scrolls into view.

Defaultfalse

Defaulttrue