How this
file was built

01 The concept

The brief: an official site for a neo-noir detective film that behaves like the case file itself. So the site withholds. The hero and the evidence locker are genuinely dark; your cursor is a torch, and content only exists where you point it. Documents arrive redacted and give up their secrets on hover. Red appears exactly twice on the whole site — once on the CONFIDENTIAL stamp, once on the premiere line — so each drop lands like blood on grey paper.

02 The actual techniques

• Cursor spotlight — hidden layers carry a CSS mask-image: radial-gradient(circle at var(--sx) var(--sy), …). A single requestAnimationFrame loop lerps the pointer position and writes per-element coordinates. After 3.5 s of stillness (or on touch devices) the torch drifts on a slow Lissajous path, searching the room by itself.
• Hover unredaction — bars are the text's own background with box-decoration-break: clone, so wrapped lines stay covered; hovering animates background-size to zero as a wipe while the transparent type fades to white. Section reveals use animated clip-path: inset().
• Venetian blinds — repeating-linear-gradient stripes at 96–102°, drifted and skewed by one long keyframe animation over the hero and the director's statement.
• Film grain — a fixed <canvas> at half resolution, re-baking a 160 px noise tile at ~18 fps and blending it with mix-blend-mode: overlay.
• Everything else — vanilla HTML/CSS/JS. Zero libraries. Type is Anton, Oswald and Courier Prime from fonts.bunny.net. All imagery is inline SVG: exhibits, mugshot silhouettes, the favicon. prefers-reduced-motion kills the grain loop, the blinds and the torch, and shows all hidden content statically.

03 Three passes, on the record

The page was served locally, screenshotted at desktop and 390 px mobile widths, and the screenshots were read back and critiqued before each revision — three full passes.

Pass 1 fixed hierarchy and confirmed the fonts actually rendered. Pass 2 added the ticker, the torch glow, the mugshot scanlines, and rebalanced the report's typewriter leading. Pass 3 tuned the mobile file, keyboard access for redactions, and contrast throughout.

04 Prompting an agent to build this