Grid Reveal

Scattered motion.

Customize

Color

Pattern

Rows8

Cols8

Block duration0.28

Stagger0.018

Loop

Installation

pnpm dlx shadcn@latest add @clover-ui/grid-reveal

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

Defaultfalse

Default0.6

Defaulttrue

Waits until it scrolls into view.

Defaultfalse

Defaulttrue