Polaroid Stack
NewPro
A loose pile of instant photos that fans out on hover. Click or drag any photo to bring it to the front.
Customize
9°
88px
5°
7
Keep fanned out
When to use it
- Studio or team pages that show behind-the-scenes photos
- Trip, event or wedding recaps on a personal site
- A playful hero visual for a photography or scrapbook app
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 396
Installation
Polaroid Stack is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy polaroid-stack.tsx into components/ui and run npm install motion.
Usage
import { PolaroidStack } from "@/components/ui/polaroid-stack";
<PolaroidStack
label="Studio trip"
items={photos.map((p) => ({ id: p.id, src: p.url, alt: p.alt, caption: p.place }))}
onFrontChange={(i) => setCurrent(photos[i])}
/>Props
16 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id?, src?, alt?, content?, caption? }[] | — | Photos. Pass content for any markup, or src and alt for an image. caption goes on the white strip. |
| seed | number | 7 | Picks the pile's layout. The same seed gives the same pile, on the server too. |
| spread | number | 9 | Largest tilt of a piled photo, in degrees. |
| fan | number | 96 | Distance between fanned photos, in pixels. Shrinks to fit narrow containers. |
| fanAngle | number | 5 | Degrees between neighbors when fanned. |
| cardWidth | number | 190 | Photo width in pixels, paper included. |
| cardHeight | number | cardWidth × 1.2 | Photo height in pixels, paper included. |
| expanded | boolean | — | true keeps the fan open, false keeps the pile closed. Leave it out to open on hover, focus or tap. |
| defaultFront | number | last item | Photo that starts on top. |
| onFrontChange | (index: number) => void | — | Called when a different photo reaches the top. |
| draggable | boolean | true | Lets people drag a photo out of the pile. Letting go puts it on top. |
| paperColor | string | "#f4ede3" | Paper color. |
| captionColor | string | "#2d2824" | Caption color. |
| color | string | "#ff784f" | Color of the keyboard focus ring. |
| label | string | "Photos" | Accessible name of the pile. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion