proof·of·prompt

← all exhibits

EXH-01sample entry — swap with a real artifact

Orrery

A WebGL desk clock that tells time in planets — hours as orbits, minutes as moons, all in one hand-written shader.

  • webgl
  • glsl
  • generative
Concentric elliptical orbits around an amber sun, with small planets on dashed paths
Model
Claude (Fable 5)
Iterations
4
Time to ship
9h
Shipped
Jun 14, 2026

open demo ↗source ↗

The prompt · verbatim

Build a single-page WebGL "orrery clock": a solar system that encodes the current time. No libraries — raw WebGL2, one fragment shader, one vertex shader, under 300 lines of JS total.

MAPPING: the innermost orbit completes one revolution per minute (seconds), the middle per hour (minutes), the outer per day (hours). Planet positions must be derived from Date.now() so the clock is correct on load, not animated from zero.

LOOK: dark ink background, thin elliptical orbit lines, planets as soft-edged discs with a subtle glow. One warm accent color for the sun; everything else cool and quiet. It should read as an instrument, not a toy.

QUALITY BAR: 60fps on a mid-range laptop, DPR capped at 2, canvas pauses when the tab is hidden. If WebGL fails, render a plain-text digital clock instead — the page must never be blank.

ITERATION NOTE (attempt 4): previous attempts over-decorated. Remove the starfield, remove the trails. The restraint is the design.

Why it works

The fourth attempt shipped. The first three are documented here on purpose — the failures are part of the proof.

  • A precise data mapping. “Innermost orbit = one revolution per minute” is unambiguous. Vague prompts (“make it feel cosmic”) produced the decorated failures.
  • Deriving state from Date.now() was stated as a requirement, not left to inference — the difference between a clock and an animation.
  • The iteration note is part of the prompt. Telling the model what the last attempt got wrong (“over-decorated”) steered attempt four to the restraint that shipped.