Site 25 of 25 · Build Notes

STRAY,
Frame by Frame

How a twelve-minute film that doesn't exist got a festival page that does — four SVG stills, one long night, and a sunrise timed to your scroll.

Concept

Stray is a fictional animated short: a dog crosses a city between midnight and dawn, and the film says nothing out loud. The page is its festival site, and its single job is to make you feel like you watched the film. So the page is the film: scroll position is the playhead, a corner timecode runs from 00:00 to the film's exact 12:04 runtime, four letterboxed "stills" carry the story, and the credits roll when — and only when — you've earned the sunrise.

Palette

Everything is borrowed light. The base is a cold city-night teal; every warm note comes from a named source — sodium lamps, one neon sign, and finally the sun.

The page background follows this ramp as you scroll — cold teal, a rose-tinted small-hours plum, pre-dawn mauve, then full dawn for the credits.

Type

• Bebas Neue
  The title card and everything that behaves like signage: sluglines, act numerals, timecode, the neon. Condensed, tall, unbothered — festival-poster type. The act numerals are set at up to 16rem as hollow outlines, the page's one moment of typographic showing-off.
• Source Serif 4
  The screenplay voice. Action lines are set like a shooting script — present tense, 62ch measure, generous leading — because the copy is written as direction, not marketing.

The Signature: SVG Film Stills

Each of the four stills — alley, overpass, laundromat, rooftop — is a stack of four inline SVGs (sky, far, mid, near), each slightly overscanned and slid at a different rate by a scrubbed GSAP ScrollTrigger, so every frame has real depth as it passes the viewport. The scenes are lit, not drawn: almost every shape is near-black, and the image is made by a handful of gradients — a sodium cone, a window's spill on wet pavement, a dawn halo. The dog himself is one set of shared <defs> silhouettes (walking, sitting, standing) reused across scenes with a two-copy trick: the same shape stamped first in light, offset toward the light source, then in near-black on top — a 3px rim light for free. His arc is told in poses: tail low in the alley, sitting at the laundromat glass, tail up at dawn.

Around the stills: a canvas grain overlay redraws a noise tile at ~9fps at half resolution (chunkier, more filmic, cheaper); the corner timecode maps total scroll to 17,376 frames at 24fps; and the credits are a real crawl — the section pins for 3,400px while the roll drives past a rising sun.

Techniques

• Layered inline SVG illustration; slice-cropped viewBoxes so stills reframe from 2.35:1 to 16:10 on phones without breaking composition.
• GSAP ScrollTrigger: per-layer parallax scrub, body background-colour keyframes per section (the temperature arc), pinned credit crawl, one-shot text reveals.
• Canvas 2D grain via a repeated 160px noise pattern; paused when the tab hides, throttled to ~9fps, static single frame under reduced motion.
• CSS keyframe ambience kept diegetic: dryer steam, moths at the neon, laundry swaying at dawn, the hero dog's 46-second walk across the skyline.
• Fixed chrome (wordmark, index, timecode) in mix-blend-mode:difference so it survives the night-to-dawn flip without a second theme.

Iteration Log

• Pass 1 — Craft Rebuilt the hero's lower third: laurels were colliding with the skyline strip and wrapping to ragged three-line stacks — reserved 215px of ground, widened the text measure, and fixed laurel branches rendering black (unset SVG fill). Caught a selector leak where .hero-street svg was inflating the walking dog to 816px wide. Facts grid had an orphan cell on the last row — switched to an explicit 3-column grid with translucent cells so the warming background reads through. Deepened the laundromat interior a full value step so the window glow feels like heat, not paper.
• Pass 2 — Depth The stills got their second-read details: cat eyes under the alley dumpster, light seeping under the alley's far door, a moon crater, an attendant folding a towel behind Tumble's glass, two pigeons who also came up for the sunrise. Moved the overpass traffic streaks above the deck so the long-exposure reading is physically honest. Re-rigged the laundry-line sway to transform-box:fill-box so sheets pivot on their own pegs instead of the viewBox origin, and gave them sunlit top edges. The timecode ends at 00:12:03:23 — one frame shy of the runtime — exactly when the footer arrives. One micro-interaction: hover a still and its slate (scene label and timecode) lights up sodium, like picking a frame off the bench.
• Pass 3 — Hardening Fixed the credit crawl leaving ~1,500px of blank dawn after the pin (section now locks to viewport height while pinned; static list without JS or with reduced motion). Verified 375px: stills recrop to 16:10, the sitting dog was clipped by the narrower crop so he moved 46px into frame; timecode keeps tabular digits. Reduced motion kills the grain loop, parallax, crawl pin, and all CSS ambience, leaving instant background states. Chanel rule: removed the overpass radio-mast blinker — the deck hid it anyway, and the moon didn't need the company. Grain canvas renders at half resolution with a debounced resize; rAF work stops when document.hidden.

Honest Notes

The dog is drawn as flat mid-century-style silhouettes — primitives fused in one fill — which keeps him art-directable but means his poses live or die by outline. The sitting pose reads "looking up at the sign," which turned out better than the brief I gave myself. If the film existed, I'd watch it.