Scroll Reveal Grid
スクロールリビールグリッド
Cards that rise into place as they come into view, staggered across each row so a line arrives as a sweep rather than all at once. The reveal fires once and is never replayed, so scrolling back up does not re-animate a grid the reader has already passed — the usual complaint about scroll animations. Built with Framer Motion whileInView↗↗ and Tailwind CSS.
01
02
03
04
05
06
07
08
09
10
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion } from "framer-motion"
import { useRef, type ReactNode } from "react"
export type GridCard = {
id: string | number,
content: ReactNode
}
How to use it3
"use client"
import { ScrollRevealGrid } from "@/components/ui/scroll-reveal-grid"
const cards = [
{ id: 1, content: <img src="/one.jpg" alt="" /> },
{ id: 2, content: <img src="/two.jpg" alt="" /> },
]
export default function Page() {
Props
ScrollRevealGrid
| Name | Default | Description |
|---|---|---|
| cards | — | GridCard[] Cards laid out in the grid |
| columns | 2 | number Cards per row |
| stagger | 0.06 | number Seconds between neighbours in a row |
| height | 420 | number Height of the scrollable viewport in pixels |
| dark | false | boolean Render the dark palette |
GridCard (type)
| Name | Default | Description |
|---|---|---|
| id | — | string | number Stable key for the card |
| content | — | ReactNode What the card renders |