EXPERIMENT / 004 AI-assisted · iteratively repaired
Meridian. A study in precision.
Can local coding agents turn a demanding brief into a finished interactive piece?
THE COMMUNITY’S PICK
Would you pick the crowd’s favorite?
Loading votes…
Astra cloud reference · not in the vote
BEHIND THE BUILDS
What did it take to get here?
The final builds passed the listed basic checks. The recorded difference is the path each took to get there.
Animation, hands & mobile layout
Layout, motion & geometry after continuation
Includes model loading and tool waits. Excludes initial generation, continuation and reviewer checks.
A separate reference made with Codex. No comparable timing was recorded; it is excluded from these charts.
Checks & sourcesBasic checks · run archive +
These checks describe the repaired builds. They are not model scores.
| Check | Qwen 3.8 · 27B | Ornith 1.5 · 35B | Astra reference |
|---|---|---|---|
| JavaScript syntax | ✓Passed | ✓Passed | ✓Passed |
| Explode / reassemble | ✓Passed | ✓Passed | ✓Passed |
| Keyboard rotation | ✓Passed | ✓Passed | ✓Passed |
| Component selection | ✓Passed | ✓Passed | ✓Passed |
| Pause / reset controls | ✓Passed | ✓Passed | ✓Passed |
| 390px layout: no horizontal scroll | ✓Passed | ✓Passed | ✓Passed |
| No runtime errors observed | ✓Passed | ✓Passed | ✓Passed |
OpenCode 1.18.25 + oMLX 0.7.0rc1. Feedback and repair records remain in the archive; the final builds are above, and the initial task is below.
Qwen 3.8 · 27B43.9 KB
Qwen repaired animation, clock hands, layering and responsive presentation with reviewer feedback. Current code is model-edited; the earlier reviewer CSS fork is retained only as history. The final round was stopped after requested changes were saved and checked. Time totals changed repair rounds including load/tool waits; excludes initial generation and reviewer checks.
Download source ↓Ornith 1.5 · 35B52.8 KB
Ornith repaired layout, centering, movement state and geometry through concrete browser feedback. Later rounds include exact reviewer-supplied replacement instructions. Backend connection failures are recorded separately. This is assisted iterative work, not autonomous one-shot output. Time totals changed repair rounds including load/tool waits; excludes initial generation and reviewer checks.
Download source ↓THE ORIGINAL BRIEF
One brief. A shared starting point.
Both local builds started with this brief. Follow-up repairs differed; the builds shown are the repaired results.
Build a premium interactive single-page website for Meridian, a fictional mechanical watch. Deliver one complete index.html with inline CSS and vanilla JavaScript. No remote requests, external assets, fonts, CDNs, frameworks or 3D libraries. Build the three-dimensional assembly with CSS 3D transforms and inline SVG/HTML geometry.
Design direction: FUTURE PRECISION INSTRUMENT. Graphite or cool gray environment, cold silver metal, translucent glass, restrained ice-blue functional accents. A substantial, believable watch case, consistent light, clear depth and occlusion. The first screen should feel like a refined product presentation, not a control-panel demo. Exploration should reveal the precision mechanism. Use disciplined typography, whitespace and subtle motion, not neon glow or decorative gradient overload. You choose the composition and visual details. Explicitly label the mechanism as a simplified interactive illustration, not a real certified movement.
Required behavior:
1. Assembled watch with case, bezel, dial, generated hour markers and hour/minute/second hands showing real current time.
2. Direct drag rotation of the entire assembly. Touch and keyboard users must also be able to rotate it.
3. Smooth, reversible Explode / Reassemble controls. Separate case, dial, hands and individual movement parts so the structure becomes readable. Rotation must still work while exploded.
4. A visible or deliberately accessible mechanical movement: coiled mainspring barrel, balance wheel that oscillates back and forth, at least three distinct rotating gears. Gear speeds must be calculated from their teeth/size relationships, not identical arbitrary rotation.
5. Select individual components to read an accurate short name/function label. Selection must work on touch, not only hover. Selected components should be distinguishable.
6. Reset view and pause motion controls. Respect reduced motion or offer an immediately accessible pause; core controls must remain usable.
7. Usable at 1440x900 and 390x844: no page-level horizontal overflow, readable labels, keyboard-operable controls and visible focus.
Evaluation: real interactions, repeatable state/reset, no runtime errors, offline operation, keyboard/touch access, responsive layout, and source review. Visual taste will be judged separately by people. Do not invent benchmark scores or claim that tests were run.
Create index.html in the CURRENT EXPERIMENT DIRECTORY. Do not inspect parent directories or other projects. All requirements are in this prompt; there are no reference solutions to read. Use the available file tools to create the file. No commentary is necessary after the file is written.
Versions & experiment notes
The local models share an initial brief, followed by separately recorded completion and review work. Initial outputs, completion prompts and reviewer edits are retained. Settings and repair histories differ. Astra uses Codex and is shown only as a cloud reference, outside the local-model vote.
The viewer blocks network access. One run describes this run, not general model capability.