The live hypnogram
updateNight() in main.js maps scroll to --night-progress. SVG dash offset reveals the path; getPointAtLength() keeps the bright pip on the stepped trace while the lab clock interpolates elapsed time.
Field guide · room 156
Making typesleep.
Somnia treats a webpage as one recorded night. Scrolling is elapsed time, typography is physiology, and every decorative mark belongs to the visual language of EEG paper or dim observation glass.
Wedges present
N1edges loosen
N2signal held
N3time has weight
REMaddress unstable
A laboratory at whisper volume
The visual premise combines warm recording paper with the reflective darkness of a sleep lab. It avoids a medical dashboard’s usual hardness: the data remains exact, but Newsreader gives observations a tender, human cadence. The sleeper is fictional; the architecture—N1, N2, N3, REM, spindle bursts, slow waves, sleep pressure—is grounded in real sleep science.
The night moves from indigo to cream and back, then opens into a layered dawn. The changing material prevents seven chapters from reading as stacked panels. Asymmetry increases in REM; N3 deliberately compresses into weight and stillness.
N1driftN2oscillateN3weightREMmisalign
What is moving, and why
Stage-obedient type
setTypeState() converts local section progress into weight, tracking, width, skew, and drift. N1 loosens continuously; N3 gains mass; REM follows a slow sine so its margins never quite settle.
EEG without assets
waveFor() produces synthetic traces for each stage. N2 adds a Gaussian-windowed spindle; N3 slows and enlarges delta waves; REM mixes quick irregular frequencies. draw() caps updates near 30 fps and suspends when the document is hidden.
Dream logic
placeDreams() gives each report a different pointer-depth factor. The electrode control calls setMemoryState(): a traced neural loop pushes the papers outward and consolidates their motifs into one tender sentence. It is a real button with an announced pressed state; phone and reduced-motion layouts remain legible.
Material atmosphere
Inline SVG turbulence supplies paper grain. Grid gradients mimic EEG stock; observation glass layers blur, shadow, and a coded trace. Dawn uses only CSS color. Wing VII supplies no generated assets, so every visual here is proudly code-made.
Motion responsibility
The continuous canvas loop stops on document.hidden. Reduced-motion users receive one static EEG drawing; CSS sweeps, orbits, reveals, and smooth scrolling collapse through the media query in styles.css.
Four nocturnal materials
The palette holds one dominant indigo field, then allows REM rose to behave like an electrical event. Electrode silver is never pure gray; EEG cream carries enough warmth to feel handled rather than digital.
EEG paper#E9E1CF
REM rose#E7929F
Deep indigo#11142D
Electrode#AAB1B7
Newsreader 300—780JETBRAINS MONO / 500 / +0.15EM
Prompt the behavior, not the wallpaper
Ask an AI agent to:
“Build a self-contained editorial experience where scrolling represents one physiological process. Give every section a distinct material state, then make the typography inherit that state through CSS custom properties. Add one live canvas instrument whose waveform changes with the active section. Use only self-hosted type and code-made visuals. Preserve semantic landmarks, keyboard focus, 44px mobile targets, hidden-tab suspension, reduced-motion fallbacks, and verify at phone, tablet, and desktop widths.”