A grid of tiles that fly in one after another from alternating directions as it scrolls into view, and fly back out in reverse.
Spring collection
Eight colorways, one weekend
npx shadcn@latest add https://hyperblur.dev/r/scroll-stagger-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-stagger-grid.tsx.
import { ScrollStaggerGrid } from "@/components/hyperblur/scroll-stagger-grid"
<ScrollStaggerGrid columns={3} tiles={[{ title: "Dune", from: "#f6c177", to: "#d9573b" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| tiles | { title: string; caption?: string; from?: string; to?: string }[] | 8 sample tiles | Tiles to show. `from` and `to` are the two gradient colors of the tile. |
| columns | number | 4 | Number of grid columns. |
| gap | number | 10 | Gap between tiles in pixels. |
| distance | number | 56 | How far tiles travel in pixels before they land. |
| inset | number | 0 | Horizontal margin around the grid in pixels. |
| aspect | string | "1 / 1" | CSS aspect-ratio of each tile. |
| scroller | RefObject<HTMLElement | null> | HTMLElement | null | A nested scroll container to follow instead of the window. Ignored when `height` is set. | |
| height | number | string | Renders the component inside its own scroll viewport of this height, useful for cards and embeds. Leave unset to follow the window or `scroller`. | |
| autoplay | boolean | false | Only with `height`. Scrolls the viewport up and down on its own until the visitor scrolls it. Static under reduced motion. |
| before | ReactNode | Content rendered above the grid inside the scroll flow. | |
| after | ReactNode | Content rendered below the grid inside the scroll flow. |