Field notes
Chapter One
The light arrives
before the sound
A full-bleed frame, a slow Ken Burns drift, and text that floats on a readability scrim. The photograph leads; the interface stays out of the way.
Between two photographs, a quiet band of solid color. The eye needs somewhere to rest before the next full-bleed frame — whitespace is breath.
The Series
Mist keeps its own hours
A left-anchored scrim keeps the headline legible while the forest breathes behind it. The image still carries every color on screen.
01Gallery
Every card is a frame
Locked aspect ratios prevent layout shift; a gradient scrim guarantees the caption stays readable no matter the photo.
Field notes
Mist through the pines
Field notes
The coast at last light
02Craft
Fast frames, honest motion
The immersion can't cost the load. Dual-format images, blur-up loading, transform-only Ken Burns, and a reduced-motion fallback.
AVIF + WebP
A <picture> ships AVIF with a WebP fallback and responsive srcset. The hero is preloaded; everything else is lazy + decoding=async.
Blur-up LQIP
A 20px inline placeholder paints instantly, then the real frame cross-fades in on decode. The first paint is never blank.
Ken Burns
A slow transform scale + translate (18s) lets the still breathe. Transform only, so it stays on the compositor.
Scrim + a11y
Every text-over-image sits on a gradient scrim for 4.5:1 contrast; reduced-motion stops the drift and instant-fades the frames.
<picture>
<source srcset="dawn.avif" type="image/avif" />
<source srcset="dawn.webp" type="image/webp" />
<img src="dawn.webp" alt="Dawn over the ridge"
fetchpriority="high" decoding="async"
class="ip-kenburns" /> // transform-only drift
</picture>03Palette
Color comes from the light
Ink and paper for the solid bands; a single amber sampled from the dawn glow. The photographs supply everything else.
#0C0D10
Ink
Solid sections
#F4F1EA
Paper
Quiet text bands
#E8B04B
Amber
Sampled from light
#1A1C22
Surface
Frosted panels
#B8BCC4
Mist
Muted captions
04Components
Frosted, so they never block the view
Controls use translucency and blur to stay legible over any photograph without hiding it.
05Guidelines
Do / Don't
Do
- +One full-bleed photo per screen; the image leads
- +Scrim every text-over-image for 4.5:1 contrast
- +Ken Burns transform-only, 8-20s, reduced-motion off
- +LQIP blur-up then cross-fade the real frame
- +AVIF + WebP + srcset; hero preload, rest lazy
- +One amber accent sampled from the light
Don't
- ×Bury the photo under a pile of cards
- ×Put text on an image with no scrim
- ×Ship unoptimized full-size JPGs above the fold
- ×Make Ken Burns fast or animate layout props
- ×Place an image without an aspect-ratio (CLS)
- ×Force a brand color that fights the photo