Design Pages 10  entries 03  elements

A gallery of self-contained web experiments.

Each entry is one page, whole in itself — motion, type and material worked out in a single file. An entry is not a component demo; it is a place to stand inside for a minute. What the entries prove out, the shelf below carries away.


Screenshot of Noctuary
01 2026-08-17

NoctuaryField Survey 020

A nocturnal botanical field survey. A wireframe scan resolves into a procedural butterfly, and specimen cards load like readings coming back from the dark.

  • Three.js
  • WebGL
  • Canvas
Screenshot of Dye Bench
02 2026-08-21

Dye BenchBench Test 001

An incompressible fluid test cell. Drag to inject momentum and ink into a GPU Navier–Stokes solver, and read the field through five live views: dye, velocity, pressure, divergence, vorticity.

  • WebGL2
  • WebGL1
  • GLSL
Screenshot of Dusk Census
03 2026-08-23

Dusk CensusRoost Count 007

A roost count at last light. Four thousand starlings murmurate over a marsh on a topological flocking solver — k nearest neighbours, not a radius — while a falcon works the edge and the pointer is the falcon.

  • WebGL2
  • GLSL
  • Canvas
Screenshot of Transit Table 2000
04 2026-08-23

Transit Table 2000J2000 Almanac

Nine bodies seeded from the J2000 osculating elements on a float64 Yoshida-4 solver — five instrument views from orrery to energy ledger, a sounding probe you fly through the system, and conservation drift readable to the fifteenth digit.

  • WebGL2
  • GLSL
  • float64 symplectic solver
Screenshot of Staircase
05 2026-08-23

StaircaseHero Grammar 001

A working specimen of the awwwards hero grammar: a staircase-indent headline over canvas-generated half-bleed motion, a chamfered call to action inside the first viewport, and nine annotated devices doing exactly what their names say.

  • Canvas2D
  • CSS
  • IntersectionObserver
Screenshot of Stigmergy
06 2026-08-23

StigmergyForaging Trial 014

A colony finds food through pheromone alone. Two diffusing, evaporating signal fields and eight thousand three-sensor agents raise highways nobody drew — while the food ledger proves every unit accounted for and trail efficiency falls toward 1.

  • WebGL
  • Stigmergy
  • Multi-agent
Screenshot of Readable
07 2026-08-24

Readable

A paste-a-palette contrast bench. The full WCAG 2.2 matrix, computed locally — every pair judged at normal and large size on raw ratios, every failure given its smallest sRGB fix, and the page auditing its own chrome with the same code.

  • Vanilla JS
  • WCAG 2.2
Screenshot of Abyssal
08 2026-08-25

AbyssalVent Sounding 011

A midnight ROV sounding of a hydrothermal vent field on the Endeavour Segment. The water column resolves top-down as the vehicle descends — wireframe first, matter behind it — a black smoker breathes magenta at 341 °C, tube worms sway in the plume current, and a vent octopus leaves her den to investigate the floodlights.

  • WebGL2
  • GLSL
  • Canvas
Screenshot of Awaseya
09 2026-08-26

AwaseyaAtelier Product 001

A fictional blade atelier where scroll performs the knife. Steel, profile and handle are chosen along one continuous page, the blade drawn with exact proportions against a centimetre rule. Manufacturer grade data is quoted verbatim from Takefu datasheets and Janka values from The Wood Database; everything priced or promised here is labelled fiction.

  • Canvas2D
  • CSS
  • Scroll choreography
Screenshot of One More Place
10 2026-08-29

One More Place

An overhead courtyard supper built around one hospitable gesture. Pull the empty chair toward the linen—or tap it once—and the table makes room: settings slide, cloth gathers, hands pause, and a serving bowl crosses to the new place.

  • Canvas2D
  • Pointer Events
  • CSS

Elements

Modules extracted from shipped exhibits — each one a live demo plus the exact drop-in snippet the demo executes. Extracted, never invented.

E·01
Capability Card

Probe the GPU capabilities a page actually needs, list passes beside failures, name what is missing — then survive losing the context mid-run.

  • WebGL2
  • WebGL1
  • DOM
E·02
One-Clock Reveal

One declared T table drives every intro stage: the skeleton sweeps first, matter resolves behind it, and reduced motion collapses the table itself.

  • Canvas2D
  • Seeded
E·03
Soft Shoulder

Unbounded additive ink rolls off through an exponential knee instead of clipping to flat white — byte-identical below 0.72, asymptote 0.985.

  • WebGL2
  • GLSL