Polaroid
An instant photo that develops in front of you — and develops faster if you shake it.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Ejects from the camera slot, starts murky, then contrast and color bloom over a few seconds. Drag it back and forth to shake it. Works with your own image or the built-in sunset.
Installation
$ npx shadcn@latest add https://guetix.com/r/polaroid.json
Uses the shadcn CLI. It creates components/guetix/polaroid.tsx and installs nothing else.
Usage
example.tsx
import { Polaroid } from "@/components/guetix/polaroid";
export default function Example() {
return <Polaroid />;
}
Photo galleriesTeam pagesMemories / about
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Development is one smoothstep driving sepia, saturation, contrast, brightness and blur together.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL (default: CSS scene). |
| caption | string | — | Handwritten caption. |
| develop | number | 9 | Seconds to develop. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Live progress text; image alt supported.