Instant Photo Develop

About this style

Polaroid, the company founded by Edwin Land, sold the first instant camera in 1948, and its integral film, which develops in daylight inside a sealed print, arrived with the SX-70 camera in 1972. A fresh integral print comes out an opaque blue-grey; as the reagent clears over several minutes the shadows appear first, then a cool picture, then full color. The wide bottom border holds the developing chemistry and has long been the place to write a caption. Instant film is still made, and the framed square remains a familiar shorthand for snapshots and memories.

Make a 10-second instant-photo sequence: three prints slide out of a camera, develop from murky blue-grey to full color, and are pinned to a corkboard with handwritten captions.

<inputs>
If I don't give you something, use the default and don't ask.
- Set: "Lake week", on an index card reading "Lake week · July".
- Photos: 1 a wooden dock at golden hour; 2 a red bicycle leaning on a pale blue wall; 3 a slice of watermelon on a gingham blanket.
- Captions, in marker on each print's bottom border: "the dock, 7 pm", "Ada's bike", "best lunch".
- Length: 10 seconds.
</inputs>

<direction>
- Corkboard, edge to edge: base #B98A57 under a dense seeded scatter of granules (#9C6F40, #CFA470, #A47645, and dark pits #6E4A28, 1–4px) generated once at load, plus a few old pinholes, lit by a window at upper left: 10% brighter at the top-left corner, falling to 12% darker at the bottom-right.
- The prints, in true integral-film proportions: a 420×511 card (#F7F4EC with a faint paper texture), the image 377×377 inset 21px from the sides and 29px from the top, leaving a 105px bottom border for writing. The image sits a hair below the card surface: a 1px darker line around it. Each print curls slightly (a 4% shade across it) and casts a soft shadow, 0 6px 16px at 28% when pinned and 0 24px 40px at 22% while carried.
- The camera: only the bottom of a boxy instant camera shows, at top center (x 700–1220, y 0–150): charcoal textured plastic #2B2A28, a satin black slot along its lower edge with a rubber light shield, a thin teal accent strip. It slides down into frame at the start and back up once the last print is out.
- Ejection: a print feeds out of the slot downward over 0.9s, its speed shivering ±10% like a motor driving rollers, image side up and still opaque.
- Developing, the heart of it, sped up from minutes to 4.0s per print: progress p runs 0 → 1 on easeInOutSine from the moment each print starts to leave the slot. Build each image from layers: the finished scene on a canvas with CSS filter saturate(s) contrast(c); above it a reagent layer with mix-blend-mode: darken whose color rises from #56666A to #FFFFFF as p goes 0 → 0.85, so the darkest shapes come through first and the highlights last; above that a cool layer #3E6E86 with mix-blend-mode: multiply fading from 35% to 0 by p 0.75; s rises 0 → 1 over p 0.3–1.0 and c 0.55 → 1 over p 0–0.9. It reads as blue-grey murk, then faint dark shapes, then a cold low-contrast picture, then warm full color. Never a plain crossfade.
- The scenes, painted in code once at load so they read as photographs rather than vector art: soft gradients and shapes, lens softness (1.5–3px blur), a warm vignette, a gentle bloom on highlights and seeded film grain at 4%.
  - Dock: a low sun over a lake (#F7C77A → #E58A5A → #6B5A7A), dock planks converging toward the center, posts, a rowboat silhouette and glints on the water.
  - Bike: a pale blue plaster wall #A9C8D6 with texture, a red bicycle leaning on it (two spoked wheels, a diamond frame, saddle and handlebars) and its sharp afternoon shadow, a terracotta pot with a leafy plant, a strip of pavement.
  - Watermelon: red-and-white gingham at a slight angle, a wedge of watermelon (#E8424E flesh, black seeds, pale rind #D9EFA8, green skin #3E7D3A), a glass of lemonade with ice and condensation.
- Final layout: print 1 at x 280, y 230, turned −4°; print 2 at x 750, y 190, turned 2°; print 3 at x 1220, y 240, turned −2.5°. Borders may touch; no print covers another's image. The index card (360×220, white with blue rules #9CC3E0 and a red margin line #E58A8A) at x 1430, y 780, turned 3°.
- Pins: a push pin in each print's top border and one in the card: glossy plastic heads 30px across (tomato #E2483C, mustard #E9B53C, teal #2E9C94, tomato again for the card) with a specular dot, a short needle shadow and a soft cast shadow. Each pin drops in from 30px above, its shadow converging, over 0.25s.
- Type: captions in "Caveat" 600, 36px, ink #2B2F4A, written on in each bottom border left to right through a clip moving at about 600px/s; the card's "Lake week · July" in "Caveat" 700, 48px.
- Motion: prints glide from the slot to the board on gentle arcs (0.5s, cubic-bezier(0.3, 0, 0.2, 1)), turning to their rest angles, and land with their shadows tightening. Nothing bounces.
- Premium: you can see the chemistry: murk, then shadows, then a cold picture, then warm color, on prints with real proportions, curl and soft shadows. Cheap: a grey rectangle crossfading to a photo inside a white frame with equal borders.
- Banned: real camera brands or rainbow-stripe logos, equal borders on all four sides, image files, people or faces, a plain crossfade from grey to color, hard drop shadows, glow, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.4s: the corkboard; the camera's base slides down into frame at top center.
- 0.4–1.3s: print 1 feeds out of the slot, opaque blue-grey.
- 1.3–1.8s: it glides to its place on the board, already developing.
- 1.5–2.4s: print 2 feeds out; 2.4–2.9s: it glides into place.
- 2.6–3.5s: print 3 feeds out; 3.5–4.0s: it glides into place; 4.0–4.4s: the camera withdraws upward.
- 4.4–5.4s: the three pins press in, 0.3s apart.
- 5.4–7.0s: the captions write on, one print at a time.
- 7.0–7.8s: the index card slides in from the lower right and its pin presses in.
- 7.8–8.6s: the card's shadow tightens and everything comes to rest; all three prints are fully developed (the third finished at 6.6s).
- 8.6–10.0s: hold.
For other lengths, keep each print's 4.0s development and stretch the gaps; keep at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: HTML/CSS. Absolutely positioned elements, with transforms, filters, blend-layer colors and opacity set from seek; the cork, the paper and the three finished scenes are rendered into canvases once at load.
- Each print's development is a pure function of t minus its start time.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check each print goes from murk to dark shapes to a cold picture to warm color and never simply crossfades, the borders keep their wide bottom, no print covers another's image, pins sit in the top borders, captions read at 1280×720, and every photo is in full color in the final frame. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Slide Projector

Made by us

A taupe and brushed-aluminium slide projector on a teak table throws a dusty warm beam across a dark 1970s living room.…

Photo Print App Launch Film

by @twoclipping

<inputs> Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-fre…

Fast-Cut Claude Brand Ad

by @LexnLin

Make a fast-paced ad for Claude, about 10–15 s (closer to 15). Reference video attached. research: Study Claude's earli…

Frosted Glass Launch Sting

by @notdwd

A 12-second square product sting in an Apple-keynote look: app window, cursor click, orbiting icon squares, a frosted g…