Prompt:
Build a standalone HTML page titled "Safelight: A Darkroom Grid": a dark full-screen grid where a radial cursor spotlight reveals hidden text, framed as a photographic darkroom lit only by a red safelight. Palette: near-black (#050303), safelight red (#ff3b2f), ember orange (#ff6a3d) for keywords, warm paper cream (#f4e6d6) for text, and a deep oxblood (#140504) inside the lit area. Typography: an old-style serif (Iowan Old Style, Palatino, Georgia) for the hidden prose and the italic title, ui-monospace in letter-spaced uppercase for the HUD. Layout: a fixed stage with two stacked layers. The base layer shows only a faint 48px red grid (7.5% opacity lines). The lit layer above it contains the same grid at much higher intensity, an oxblood fill, and a two-paragraph prose passage about developing a print in a darkroom, with nine italic glowing keywords (red, tray, harbour, shadows, window, light, patience, line, silver); this layer is hidden by a CSS mask-image built from radial gradients, so it only shows inside the spotlight. A cloned, transparent copy of the prose sits in the base layer so that discovered keywords can stay faintly visible in exactly the same position. HUD: top-left "Plate 07 ยท Darkroom" with the italic title Safelight; top-right a "Developed 0 / 9" counter with nine tick marks that light red as words are found; bottom-left gesture hint, bottom-right a "Douse lanterns" button. A custom crosshair cursor ring follows the pointer on hover-capable devices. Motion: the spotlight position and radius are lerped every animation frame, with a subtle two-sine flicker in the radius like an old bulb; before the visitor touches anything the light wanders on a slow Lissajous path to hint at what is hidden. Interaction: moving the pointer searches; a keyword counts as developed when the spotlight centre passes within about 40% of the radius; clicking hangs a small glowing lantern that keeps a smaller permanent pool of light (up to three, oldest removed) and also develops words directly under it; mouse wheel or the [ and ] keys resize the spotlight between 70 and 360px; the Douse button removes lanterns. When all nine are found, the mask is removed and the whole lit layer floods in, followed by a closing italic line. Reduced motion: no wandering, no flicker, no easing; the spotlight snaps directly to the pointer.
Title: Safelight Darkroom Grid
Description: A small discovery piece in which the screen is a pitch-dark sheet of graph paper and your cursor is a red safelight. Under the light, a brighter grid and a short prose poem about developing photographs come into view, but only within the glowing circle. Nine key words are hidden in the text; finding each one marks it on a counter and leaves a faint ember trace behind. Hang lanterns to keep areas lit, and when every word is found the whole print develops at once.
Visual techniques:
- Layered CSS mask-image with multiple radial gradients (cursor plus lantern pools)
- Duplicated text layer in the base for persistent ghosted discoveries in identical layout
- Lerped spotlight position and radius with a sine-based flicker
- Idle Lissajous wander as an attract mode
- CSS grid-paper backgrounds via crossed linear-gradients at two intensities
- Custom crosshair cursor built from pseudo-elements, glowing tick progress indicator
- Final flood reveal by removing the mask with an opacity keyframe
Interaction model:
Move the pointer to sweep the safelight over the dark grid and read whatever it uncovers. Passing the centre of the light over a keyword develops it and advances the counter. Click to hang up to three lanterns that keep small areas lit, use the wheel or bracket keys to widen or narrow the beam, and press Douse lanterns to clear them. Finding all nine words develops the entire print.