A field guide to borrowed light.

One bulb, two ways to read the sky.

Mothlight is a fictional naturalist’s porch ledger built around real phototaxis. Its emotional hinge is not the arrival of moths but their release. In amber mode, the page is warm, busy and circular. Headings behave like small lamps; the insects gather around them as a reader moves through the census. Turning the porch light off changes the colour, motion and pace together. Moonlight mode is quieter, cooler and directional.

The field notes belong to Mara Venn of invented North Fallow Parish. Species names, dates and counts are fabricated, while the dorsal-light-compass account is grounded in observed insect navigation: a distant bright sky is useful; a nearby bulb can turn that rule into a loop.

Phototaxis, drawn live.

main.js creates a capped population of Moth objects on #moth-field. Each carries position, velocity, scale, wing phase and one of 12 genuinely different marking recipes: eyespots, brocade bands, crosshatch, pearl dots, veins or crescents. In amber mode, Moth.update() combines a small inward force with a perpendicular force, producing unstable orbits around cached .light-source centres. Hovering or focusing a link makes that element the shared target; a brief typographic flicker marks the new source as the swarm reforms.

setMode() is the switch’s hinge. It toggles body.moon, changes the title and field note, updates accessible labels and the theme colour, then replaces orbital acceleration with near-parallel vectors. moon-wipe briefly eclipses the page while the simulation changes underneath it. The URL records ?mode=moon, so the state can be captured or revisited directly. Moths crossing an edge re-enter as a transect.

visibilitychange cancels every animation frame while the tab is hidden. Reduced-motion goes further: it never starts the continuous loop, draws 12 static specimens once, removes the eclipse animation and disables the specimen-settling motion.

Wings like tapestry.

The hero emperor and ledger specimen are inline SVG. Bilateral Bézier silhouettes carry repeated lines, eyespots and a central body. Selecting a ledger row changes the specimen metadata and palette, then uses the Web Animations API for one restrained settling movement. No continuous layout work is involved.

The macro scale study is deliberately tactile: five rounded slivers use stacked repeating gradients for ridges and crossribs, with inset shadows turning flat colour into overlapping tiles. Pass 3 adds the gentle-touch study. setupDustStudy() toggles one class, updates its live description and seeds a finite set of CSS dust flecks. The scales flex, a whorled fingerprint emerges and the later apology becomes a consequence of the reader’s own gesture. Reduced motion shows the print without falling particles.

Palette & type.

Young Serif gives the field voice a tender, eccentric weight; Space Mono turns times, binomials and measurements into evidence. Display sizes carry tighter, size-specific tracking; labels open out and all measurements use tabular numerals. The amber reading field switches to a cool lunar system without losing body-text contrast.

Reproduce this.

A useful agent prompt