Polaroid Scatter Grid

A wall of Polaroid photos scattered at random angles that straighten and lift on hover.

A wall of Polaroid photos scattered pseudo-randomly from an index seed: each photo carries a white frame, translucent tape, a gradient stand-in photo, and a handwritten-style title, and on hover its rotation drops to zero as it scales up, lifts, and rises above the rest. A good fit for memory albums, portfolios, or event-highlight sections.

Loading preview…

npx shadcn@latest add https://webberui.com/r/polaroid-scatter-grid.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Scatter strengthscatter

Grid columnscolumns

<PolaroidScatterGrid />

Installation

npx shadcn@latest add https://webberui.com/r/polaroid-scatter-grid.json

Or, once registries are configured in components.json, install it as @webberui/polaroid-scatter-grid.

Usage

import { PolaroidScatterGrid } from "@/components/ui/polaroid-scatter-grid";

<PolaroidScatterGrid
  columns={3}
  items={[
    { title: "Waves at Kenting", note: "2025.07.12", hue: 205 },
    { title: "Sunrise from the summit", note: "Hehuanshan main peak", hue: 25 },
    { title: "Night market lights", hue: 285 },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`PolaroidItem[]`	—	List of Polaroid photo data
`scatter`	`number`	`1`	Scatter strength (0–1); larger values make the rotation and offset more pronounced
`columns`	`2 \| 3 \| 4`	`3`	Number of grid columns at the sm breakpoint and above; small screens are fixed at 2 columns
`className`	`string`	—	Forwarded to the outermost grid container

PolaroidItem fields:

Field	Type	Default	Description
`title`	`string`	—	Handwritten-style title along the bottom of the photo
`hue`	`number`	—	Main hue of the stand-in photo gradient (0–360)
`note`	`string`	—	Optional short note (date, place), shown beneath the title

Accessibility

When the user has "reduce motion" enabled at the system level, the drop-in reveal and the hover straightening are disabled and a static scattered layout renders
Each photo is marked up semantically with figure / figcaption, and the title and note are real text, so assistive technology can read them in full
Decorative layers (tape, light specks, mountain ridges, sheen) are all marked aria-hidden, so they do not interfere with reading order
The scatter angles and offsets are computed pseudo-randomly from an index seed, so server and client render identically with no layout shift