The concept
Understanding before ornament.
The Comb Works treats a beekeeping collective as a living field station, not a rustic honey shop. The central idea is translation: reveal processes that normally happen in darkness and make the bee’s intelligence understandable without turning it into a cartoon. Warm wax occupies most of the page; smoker-black sections create moments of enclosure; one queen-mark blue identifies signals and coordinates. The structure follows a keeper’s attention—from whole colony, to dancing messenger, to individual frame, to harvest account.
The page’s asymmetry comes from observation notes pinned over large working surfaces. Big, soft Fraunces titles feel biological while small, widely tracked Manrope labels resemble numbered equipment. Grain, mesh, imperfect cell fields, and thin record lines stop the interface feeling digitally sterile.
Visual techniques
The code is doing the fieldwork.
Live comb. In main.js, makeCells() lays out a pointy hex grid. Every cell owns progress, forage type, cap state, and texture phase. updateBee() gives workers real targets and construction rates; drawCell() moves each chamber from foundation to colored store to wax cap. Pointer and arrow-key hit testing opens a cell passport from that same live state, while setCalm() slows flight and building.
Dance decoder. The dancer begins with x = sin(t) and y = sin(2t). The pair is then rotated by the chosen angle, so the path—not merely the bee’s body—carries the bearing. updateDecoder() converts duration to metres, moves the blue flower, rewrites the SVG route, and keeps the spoken instruction synchronized.
Atmosphere and reveal. Crossing CSS gradients form veil mesh; radial light, grain, inner shadow, and .build-front create depth without images. Six staggered .arrival-seal panels unseal the first view, then the restrained load-rise sequence brings in its field notes. Later content stays present if scripting is delayed.
Responsive motion. Canvas resolution is capped at 2× device pixel ratio and bee counts fall on phones. One observer stops comb and decoder drawing when their instruments are off-screen; the visibility listener cancels the entire frame loop when the document is hidden. Reduced motion preserves a complete static state.
Palette + type
Wax carries the light.
Fraunces uses variable-looking contrasts available through its local weight files: 250–520 in display settings, italic for the living word, tight tracking, and compressed line height. Manrope carries every measurement, control, record, and paragraph at 400–800. The deliberate gulf between a 130-pixel title and an 8-pixel equipment label creates scale without additional decoration.
Reproduce this
Prompt for a system, not a skin.
Build a responsive editorial site for a field collective. Give it one dominant natural material, one dark operational environment, and one rare signal color. Invent a process visitors can manipulate and understand: animate actual agents with state, let a second interaction translate their behavior into a useful map, and expose live output as measurements. Use only HTML, CSS, SVG, and canvas. Make the smallest labels feel like field equipment and the largest type feel organic. Pause loops off-screen, honor reduced motion, and prove the composition at phone, tablet, and desktop sizes.
Then ask the agent to inspect rendered screenshots, name concrete compositional failures, and revise them. The crucial instruction is that the signature interaction must teach the visitor something true—not merely move when hovered.