Uilora Polaroid
Polaroid development lightbox with white-to-transparent reveal animation, warm tint, and tilted card aesthetic.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=2006&auto=format&fit=crop | Main image source URL. |
| backgroundColor | string | #f0ede6 | Warm off-white background evoking analog photography labs. |
| caption | string | Uilora — Summer Archive, 2024 | Caption text below the polaroid image. |
When to Use
Ideal for analog photography brands and nostalgic Uilora campaigns. The development animation makes the reveal itself the experience.
Best Practices
Use warm-toned photography for the most authentic polaroid feel. Keep captions short (under 40 characters). The tape strip and -2deg rotation are intentional.
Why This Component Matters
Analog aesthetics trigger nostalgia, warmth, and emotional connection. The development animation alone makes users pause and engage — it's a memorable moment.
FAQ
QHow does the development work?
A white overlay fades from opacity 1 → 0 over 1.2s with 0.4s delay, followed by a warm amber tint that also fades — simulating polaroid development in two stages.
QDoes it replay each time?
Yes — AnimatePresence remounts the overlays fresh on every open, so the development effect replays every time.
QIs it mobile responsive?
The polaroid card uses w-80 max and scales down gracefully on narrow screens.