Threshold before index
The fish portrait fills the opening viewport by itself. Only after that encounter does the room expand into fragments, motif lanes, and observations.
Build guide
Afterimage
The Night Archive translated into responsive code: one decisive threshold image followed by irregular fragments, pigment notes, and archive-handling motion.
How it was made
One visual idea, held from the first sketch to the last media query.
Archive typography
Besley makes titles feel printed and handled. Afacad keeps metadata, navigation, captions, and archive controls exact at the approved compact scale.
Pigment-led archive
Green-black, graphite, chalk, oxidized green, and one lantern-amber spark come directly from The Night Archive source.
Progressive detail
Observations use an accessible accordion, the print room is explicitly disabled, and reduced motion stops the marquee without removing content.
Three release passes
Every pass ran on real desktop and phone renders, and only counted when it fixed something you could see.
Source fidelity
Replaced the opening collage with a single portrait threshold and restored The Night Archive palette before allowing the archive field to become kinetic below it.
Image rhythm
Made PRESSURE and TRACE recede, verified every archive image under accelerated scrolling, and kept the kinetic field subordinate to the work.
Mobile and access
Reordered the phone hero so artwork arrives before typography, then verified the native menu, accordion path, disabled store, About, and Guide routes.
A reusable recipe
Write the scene before the palette. Choose what visitors should physically feel, then set color, type, motion, and material around it.
The artwork stays in charge. Code and procedure can set the atmosphere, but they never stand in for the work.
Reduced motion, focus states, and a stable fallback ship first. Spectacle comes last.