How to make
a website hibernate.

The concept

Hibernaculum is a fictional wildlife field station built around accurate torpor physiology. Its narrative spine is a descent: the visitor begins with a foraging hedgehog at 190 beats per minute, follows her below the frost line, and reaches deep torpor at eight. The interface is not merely about slowing down. It becomes slow. By the middle of the page, every pulse, drifting snow mote and interactive transition has thickened to the pace of cold honey.

The visual world is a den seen in cross-section. Atmospheric sky gives way to clipped strata, roots, leaf nests, thermal pockets and ruled station diagrams. Spring is deliberately withheld until the final room, where green appears for the first time and the pulse snaps awake. All scenery is code. There are no generated or photographic assets in this Wing VII room: CSS shapes, inline SVG and canvas are the entire exhibit.

Visual & interaction techniques

Torpor pace

readings(depth) in main.js maps normalized scroll depth to heart rate, core temperature and a shared pace multiplier. renderState() eases toward that value and writes --depth, --pace, --torpor, --heat and --wake. Animation durations throughout styles.css multiply by that pace, while an IntersectionObserver makes deep-section reveals resolve with cold-honey viscosity. Three narrow triangular windows add costly arousal spikes before the spring branch restores 148 bpm.

Stillness crystallization

In deep winter, updateStillness() measures time since the latest scroll, pointer or keyboard movement. The value rises only below the frost line and drives --stillness: two code-drawn SVG ice systems trace themselves around the viewport while a tiny membrane clock counts the seal. Any movement fractures the frost quickly. Spring clears it completely. The same canvas loop performs the update, so hidden documents and reduced-motion mode never leave a second animation running.

Living instruments

The ECG and arousal records are SVG paths with animated dash offsets. The fixed metabolism rail turns scroll into a physical depth marker. The den atlas swaps live labels and morphs the SVG cavity path for hedgehog, bear and dormouse architectures. The fat ledger’s calculateMass() subtracts arousal costs before converting reserve grams to covered nights, while calculateDepth() moves a nest through the frost gauge and reports exposure risk.

Code-made weather

snowFrame() draws a capped set of canvas particles and divides their velocity by metabolic depth, then reverses and accelerates them at emergence. The loop stops when the document is hidden. Reduced-motion visitors receive static strata with all information intact. Grain is a tiny inline SVG turbulence texture; the moon, animal, roots, leaves and spring growth are layered CSS geometry.

Palette & type tokens

Cormorant Garamond carries the biological, literary voice in lightly weighted, tightly tracked display sizes. IBM Plex Mono supplies every coordinate, specimen number and vital sign. Both are self-hosted from the shared font library. Body copy stays warm bone on umber; the cooler blue is reserved for measurement and torpor.

Reproduce this

Ask an AI frontend agent to build a code-only nocturnal field station whose page metabolism responds continuously to scroll. Specify a serif/monospace editorial system, a cross-section landscape made from SVG and CSS, physiological readings derived from one shared state function, and a single withheld accent color that appears only at the narrative release. Require interactive scientific instruments rather than decorative cards, strong mobile adaptations, hidden-document loop pausing, reduced-motion fallbacks, and screenshot review at phone, tablet and desktop widths.