TITLE Instant Film PROMPT A CSS-only (no JavaScript whatsoever) instant camera that takes pictures. Pressing the shutter makes the camera flash, whirr and eject a square white-bordered print, which then slowly develops from milky blank to a finished photograph, each photograph being a little landscape or still life illustrated entirely in CSS. Eight frames in the pack. Concept: the patience of instant film, built from checkboxes. Mood: sweet, nostalgic, sunlit, pastel. Palette: blush pink page #F7D6D0, camera body cream #FDF6EC, charcoal-plum #2D2A32 for lens, type and details, soft teal #7FC8C2, apricot #F4A259; photographs may also use a faded-film set derived from these (washed sky #BFE3E0, sun-bleached yellow #F9E2A6, dusty rose #E9A6A1, deep shadow #4A4350). Light, pastel; flat shapes with soft long shadows. The camera (pure CSS: divs, gradients, border-radius, box-shadow, clip-path, transforms): a boxy, friendly, original instant camera seen from the front: cream body with a pastel rainbow-less stripe motif replaced by a simple teal-and-apricot double band (avoid imitating any real brand's markings), a large lens with nested rings and a glass reflection, a viewfinder window, a flash unit with ribbed diffuser, a red-apricot shutter button on the right shoulder, an exposure dial (lighten/darken), a film counter window showing remaining shots, and the wide ejection slot at the bottom front. A woven neck strap loops off to the side. Mechanics (signature moment), built with a stack of eight invisible checkboxes, one per frame, whose labels are stacked over the shutter button so that each press advances to the next state (z-index order plus :has(:checked) selectors hide the spent label and arm the next one about two seconds later, once the motor has finished; the checkboxes belong to an empty form through the form attribute): on press: the shutter button depresses, the flash fires (a full-page white flash that decays in 500ms and a brief bright bloom on the flash unit), the lens iris blinks, the camera gives a small recoil, a handwritten "whirrr…" trembles beside the slot, then after a beat the print slides out of the slot with stepped motor-like motion (steps() easing), drops free, and glides to its place in a growing scatter of prints on the tabletop beside or below the camera, each landing at a different slight rotation on a numbered dashed outline that marks its place. Then it develops: over about 12 seconds the image area goes from pale grey-green to the finished picture using animated opacity, filter (contrast/saturate/sepia) and a milky overlay fading, with colours emerging in order (first shadows, then warm tones); the handwritten caption is written in near the end. The film counter decrements (8 → 0) using CSS counters or per-state content. After the eighth frame a tag over the greyed shutter button reads "empty" and a round "load new film" sticker (a styled reset input) pops onto the little film box that sits on the table, clearing the pack, the picked-up prints and the dial. The eight photographs (each a small CSS illustration in the faded palette, 1:1): a seaside horizon with a striped parasol; a cat on a windowsill; a breakfast table with a boiled egg and a coffee cup, steam animated; a caravan under pines; a bicycle against a wall; a lighthouse; a birthday cake with three candles whose flames flicker; a pair of feet at the end of a towel facing the sea. Each print has a handwritten-style caption on its white border in an italic script-like stack ("Brush Script MT", "Segoe Script", "Bradley Hand", cursive fallback): "Aug. — the last good day", "she ignored us for an hour", "7:40, nobody else up", "plot 14, under the pines", "borrowed. returned, mostly.", "we never did go up it", "three! already", "do not disturb". Interaction without JS: hovering/focusing a print lifts it, straightens it and enlarges it (so the developed picture can be admired; tapping or clicking its label toggles the same zoom via a checkbox, and on phones the print grows to nearly the full width); the exposure dial is a pair of radio inputs (dark / light) that turn the knob and cool or warm all pictures with a filter; hovering the lens shows a tiny reflection sweep. All inputs keyboard-reachable, labelled, with visible focus rings in charcoal. Typography: the title "Instant Film" in a rounded, heavy, friendly display stack ("Arial Rounded MT Bold", "Trebuchet MS", system-ui, bold) in charcoal-plum, large, tucked at an angle, with a small script line "a pack of eight, in no hurry" and a handwritten "press here" arrow by the shutter until the first picture is taken; the invented brand is "dawdle"; a tiny instruction engraved near the shutter: "press. wait. don't shake it." Small-caps details on the body ("FOCUS 0.6 m – ∞"). Layout: camera left / prints right on desktop; camera top / prints below on phones, everything scaling with clamp() so it fits 360px with no overflow. Reduced motion: no flash or recoil; prints appear already developed in place. Entrance: the camera drops onto the table with a soft bounce and the strap settles. Window light lies across the blush tabletop in two soft diagonal bars, and a short note beside the film box explains the film in the brand's voice. DESCRIPTION A sunlit blush tabletop with a cream toy-like instant camera called the dawdle, its teal neck strap looped off to the side, a small box of film, and eight dashed outlines waiting for pictures. Pressing the red shutter fires a white flash, the iris blinks, the camera kicks, and a square print is pushed out of the slot in motor steps, drops free and glides to its numbered place at a slight tilt. There it stays milky grey-green and then, over twelve seconds, shadows surface first, warm tones follow, and finally a handwritten caption appears on the border. Each of the eight frames is a tiny flat illustration in a faded-film palette: a striped parasol, a cat's back at a window, a boiled egg with steaming coffee, a caravan under pines, a bicycle, a lighthouse with a breathing beam, a cake with flickering candles, two feet at the end of a towel. The counter runs from 8 to 0, the shutter goes grey under an "empty" tag, and a sticker on the film box loads a fresh pack. There is not a line of script on the page. VISUAL TECHNIQUES - Whole state machine in CSS: eight checkboxes tied to an empty form, stacked labels over the shutter, :has(:checked) selectors, and a delayed visibility animation that re-arms the button only after the motor stops - Re-triggering one-shot effects (flash, bloom, iris, recoil, counter roll, "whirrr") by alternating twin keyframe names through custom properties on each state - Print ejection as one keyframe animation with per-segment timing: steps() for the motor, clip-path inset synchronised with the translate so the print is revealed at the slot line, then eased drop and glide to variable-driven coordinates and rotation - Twelve-second development using animated opacity plus a grayscale/sepia/saturate/contrast/brightness filter chain and a fading milky radial overlay; caption revealed with an animated clip-path - Eight 1:1 illustrations built only from positioned boxes, border-radius, conic/repeating/radial gradients, clip-path polygons and multi box-shadows, on a 100-unit em grid so they scale with the print - Camera drawn from divs: nested lens rings, conic iris blades with a radial mask, ribbed flash diffuser, knurled dial, counter window fed by a CSS counter decremented by each checked input - Woven strap from a thick bordered ellipse with dashed stitching and a masked repeating-conic weave - Flat stacked box-shadows for soft long shadows, diagonal window-light gradients and a turbulence grain over the blush table - Fixed-proportion stage sized from one viewport-derived unit, with a second coordinate set for phones and portrait screens - Reduced-motion variant with no flash, recoil or flight: prints simply appear in place, developed and captioned INTERACTION MODEL Click, tap, or focus and press Space on the red shutter button to take a picture; the button stays down for about two seconds while the print is ejected, then is ready again, up to eight times, and the film counter counts down. Hovering a print (or tabbing to it) lifts, straightens and enlarges it; clicking or tapping a print pins that enlargement and tapping again puts it back, which is how it works on touch screens. The two halves of the exposure dial are radio buttons: the dark side cools and deepens every photograph, the light side warms and brightens them, and the knob swings to match. Moving the pointer over the lens sends a reflection across the glass. When the pack is empty a "load new film" sticker appears on the film box; pressing it clears the table and resets the counter and dial. Every control is a native input with a label and a charcoal focus ring.