Making water
answer.

The page is water,
not a picture of it.

Noctiluca imagines Bahía Noctiluca as a field station after midnight: a living threshold visitors approach gently, not a spectacle waiting to perform. The design withholds brightness, then rewards pressure with cyan light. That behavior echoes dinoflagellates, where mechanical shear starts an intracellular acid pulse and the luciferin–luciferase reaction releases blue photons. The story moves from sensation to mechanism, through a kayak transect and a 250 ml census, then ends with the civic work of reducing skyglow. Wonder acquires responsibility.

The page uses no photography, video, or generated imagery. Its eclipsed moon, cell anatomy, route, sample chamber, waterlines, grain, wakes, and luminous handwriting come from CSS, inline SVG, and Canvas 2D. The absence of assets is not a compromise. It is the central material choice of the Nocturne Wing: light is generated at the instant of encounter, so the visitor does not merely look at the bay—they cause it to answer.

One law.
Every input.

In main.js, disturbance(x, y, strength, kind) translates pointer movement, presses, waypoint replays, and heading arrivals into decelerating sparks and shallow elliptical rings. releaseSwell() converts accumulated scroll velocity into a wide luminous pressure band. Instead of allocating a radial gradient for every particle, the renderer draws a cached 32 px glow sprite with the Canvas lighter composite mode. The abyss background is cached on resize; only the moving layers redraw.

An IntersectionObserver adds .lit to each major heading and releases a quiet bloom at its baseline. In the conservation register, setDarkness() turns eight coded streetlamps from amber to shielded blue-gray while raising the water’s contrast variable; the final lamp releases a full-width swell. The sample lens is drawn by drawSample(): 600 deterministic points represent one organism per 1,000 counted. Inside #name-basin, spell() writes the visitor’s word to an offscreen canvas, samples its alpha channel, and converts the letterforms into flickering organisms. The resulting statuses are announced through aria-live regions.

Both render loops stop when the document is hidden; the name basin also pauses outside its observed viewport. Device pixel ratio and particle arrays are capped, pointer sampling is distance-throttled, and reduced-motion mode renders a still field without continuous animation.

Abyss, plankton,
moon silver.

The dominant field is abyssal navy, with teal reserved for depth and cyan reserved for living response. This hierarchy prevents the glow from becoming cheap neon decoration. Moon silver carries readable foreground text. Cormorant at weight 300, with tight negative tracking and occasional italic outlines, gives headlines tidal sweep; Sora sets measurements, navigation, status, and scientific prose. Large display lines use optical overlap, while body copy remains restrained and high contrast.

Prompt for a system,
not a style.

Ask an AI coding agent to build a responsive, image-free nocturnal field atlas in semantic HTML, CSS, SVG, and Canvas 2D. Give it one behavioral law: every pointer, tap, scroll, and content reveal must disturb a persistent environmental canvas. Require cached particle sprites, bounded arrays, viewport and page-visibility pausing, reduced-motion stills, locally hosted type, visible keyboard focus, and screenshot checks at phone, tablet, and desktop widths.

“Make darkness the habitat, cyan the biological response, and every interaction an act of pressure. Explain the real chemistry tenderly. Include measured field notes, one conservation consequence, and a personal gesture that can exist only in this environment. Use no generated assets; make the mechanism carry the meaning.”