Develop / Fix / Send

01 The Concept

An analog photographic darkroom under red safelight. The premise: an agency that says "we send beautiful things to the Internet" is, at heart, a print shop — ideas go into the chemistry, and finished work comes out, washed and dried. The three-step process every print passes through — develop, fix, send — becomes the site's entire information architecture and its navigation labels.

Everything on screen obeys the physics of the room. Red is the only strong hue because a safelight is the only light a darkroom permits; the single exception is the contact section, rendered as a developed print on print-paper ivory — the one artifact that has left the chemistry. Images arrive the way prints do: blurred, sepia-fogged and dim, sharpening as the developer works while you scroll.

Honestly stated intent: this is a demonstration piece. The copy is the agency's real copy, the projects are its real projects, and the constraint set (one hue, two typefaces, one metaphor) is deliberately tight to show that restraint can carry a whole site.

02 Cited References

• Julia Noni

  The whole UI as a contact-sheet caption bar. Adapted here as the fixed navigation: a caption strip with live "FR 02|06" frame counters and bracketed [ DEVELOP ] [ FIX ] [ SEND ] labels; each page section is tagged as a numbered frame on the sheet.

• Bureau Rouge

  Typewriter boot sequence with a live clock. Adapted as the developing timer: a red LED countdown (00:06 → 00:00) with an agitation note, resolving into the hero as the first print develops in. Skippable by any key or click; skipped entirely under reduced motion and on repeat visits within a session.

• Julien Calot

  Preloader dissolving into full-bleed imagery. Adapted as the develop-in reveal — a CSS filter choreography (blur + sepia + darkened → sharp) reused as the scroll-triggered entrance for every image and content block on the page.

03 Design System

Palette

• Blackout #0B0A09 the room itself — page ground
• Safelight red #E03616 the ONLY strong hue; labels, accents, large display
• Amber warning #D98324 timer bar, frame tags, focus outlines
• Print-paper ivory #ECE3D1 body text + the developed contact print

Contrast rule: safelight red on blackout sits just under 4.5:1, so red is reserved for large display type and non-text accents; all body text is print-paper ivory (≈14:1 on blackout).

Typefaces

Space Grotesk — display, labels, chemical numbering. Set in caps with wide tracking for caption-bar chrome.

Spectral — body and print captions. A print-era serif; italics carry the service one-liners like handwritten notes on chemical logs.

Spacing logic

Sections are "frames": each opens with a hairline rule + frame tag, then clamp(4.5rem, 9vw, 8rem) of vertical breath. Content column is capped at 82rem; captions at 46ch. Small type never drops below 0.68rem and always gains ≥0.14em tracking, like contact-sheet edge printing.

04 Tech & Motion

• Develop-in reveals. Every revealed element carries .develop: initial state filter: blur(16px) sepia(.85) brightness(.55) contrast(.75); opacity: .25. An IntersectionObserver (threshold 0.25) adds .developed, transitioning the filter to none over 1.6s on cubic-bezier(0.22, 1, 0.36, 1) — slow rush of the image surfacing, fast settle. data-delay staggers siblings by 120ms steps. Under reduced motion the class is applied immediately with no transition.
• Developing-timer boot. A fixed overlay with a tabular-nums countdown ticking every 300ms and an amber progress bar. Finishing (or any key/click) fades the overlay 600ms while the hero's develop-in runs underneath — the timer literally resolves into the first print. sessionStorage prevents replays.
• Enlarger-beam cursor. A fixed, pointer-events-none layer with a 360px radial gradient of safelight red at mix-blend-mode: screen, positioned by CSS variables updated in a rAF-throttled pointermove handler. Enabled only for pointer: fine and no-reduced-motion.
• Contact-sheet chrome. The frame counter watches [data-frame] sections with a second IntersectionObserver and rewrites "FR nn|06" as you scroll the sheet.
• Film strip. A horizontally scrollable strip (tabindex="0", keyboard scrollable) with sprocket holes drawn as a repeating-linear-gradient; project frames are typographic negatives.
• Tray video. The Kling loop is muted, playsinline, poster-backed, ≤4MB, paused by IntersectionObserver when off-screen, on visibilitychange, and permanently under reduced motion.

05 AI Assets

Generated centrally via the Higgsfield CLI; prompts below are cited verbatim from shared/assets/manifest.json.

• safelight-still.png — hero darkroom scene

  GPT Image 2 (via Higgsfield CLI)

  “Analog photographic darkroom interior lit only by a deep red safelight, developing trays with liquid reflections, an enlarger casting a cone of light, hanging film strips with clothespins, rich red-and-black chiaroscuro, cinematic still life photography, no text”

• owl-test-print.png — project section print

  GPT Image 2 (via Higgsfield CLI)

  “A black and white silver gelatin photographic print of an owl in flight, lying in a developing tray of liquid under red darkroom safelight, the image half-developed with soft edges still emerging, glossy paper reflections, analog photography atmosphere, no text”

• chemical-shelf.png — services shelf

  GPT Image 2 (via Higgsfield CLI)

  “A shelf of vintage amber glass chemical bottles in a photographic darkroom under dim red safelight, blank white labels, measuring cylinders, tongs, dramatic red-black lighting, shallow depth of field, analog craft photography, no text”

• developing-print.mp4 — print developing in tray

  Kling (kling2_6, via Higgsfield CLI)

  “A black and white photograph slowly developing in a darkroom tray under red safelight, the image gradually emerging on the paper as liquid ripples gently, deep red and black tones, analog photography process, static camera, close-up”

06 How to Reproduce

1. Scaffold Astro v5, output: 'static', no client framework.
2. npm i @fontsource/space-grotesk @fontsource/spectral; import only weights 400/500/700 and 400/400-italic/600 respectively.
3. Build the caption-bar nav and frame-tagged sections first — the contact-sheet chrome is the skeleton everything hangs on.
4. Implement .develop/.developed filter choreography + one IntersectionObserver; reuse it for every entrance.
5. Add the boot timer overlay, beam cursor and frame counter as small vanilla scripts (~90 lines total); gate each on prefers-reduced-motion.
6. Copy AI assets from shared/assets/darkroom/, convert stills to WebP, compress the Kling loop to ≤4MB with ffmpeg -an.
7. npm run build; verify zero console errors, keyboard walk and reduced-motion on / and /guide.