01Problem
What was broken
Model comparisons usually test code that compiles. This one tests taste. The brief asks for a physical-looking print, not a website: no images, no fonts, no libraries, no network requests, one canvas. Nothing can be borrowed, so every visual decision (composition, linework, perspective, palette, light, pacing) has to come from the model itself, and the result has to hold up when you zoom into a single disciple's sleeve.
02Impact
What it does now
A single 237 KB HTML file that prints twenty-one dioramas onto a cream sheet while a risograph loader runs, then tours them like a documentary camera. Jesus stays one recognisable figure across the sheet, sometimes central and sometimes a small figure on a road or a reflection in a garden pool. Scenes play their entrance once when you first arrive: the donkey walks in, soldiers march through the olive trees, Jesus kneels to pray while Zz rise from the sleeping disciples, the stone rolls back from the tomb. Colour drains through the Crucifixion and the Darkness and returns as dawn ink at the end. It runs on phones and desktops, adapts its quality to the device, and ships with a build time-lapse, a cover and a live Railway deploy.
03Architecture
How it is built
Everything is procedural and deterministic. A seeded random generator drives every wobble, so a scene renders identically each time. Four spot inks are real halftone screens at different angles with dropped dots and misregistration, overprinted with multiply blending on a generated paper texture. Each plate is an isometric cutaway built from shared primitives (boxes, prisms, cylinders, walls, openings) and a single articulated figure system with poses, garments and gestures. Plates are printed once into depth layers; animated figures and particle physics are composed between the layers at a stop-motion rate, so a walking figure still passes behind the table in front of it. The camera, overview selection, locking, sound and mood grading sit on top.
seeded RNG ──► ink screens (y·t·r·n) ──► painter: knock-out · overprint · wobbling line
│
21 plate builders ──► depth-sorted items ──► printed layers ◄── live figures + physics
│ (entrances, sparks, water,
▼ leaves, rolling stone)
sheet: paper · margins · plates · mood grading
│
camera (tour · overview · lock) ──► canvas ◄── Web Audio (per scene)Modules
- Seeded RNG
- Halftone Inks
- Painter
- Isometric Primitives
- Figure System
- Plate Builders
- Layered Printing
- Particle Physics
- Camera & Tour
- Procedural Sound
04Intelligence
Where the AI sits
The whole piece is the AI's work: Claude Opus 5.5 wrote every line from the prompt, ran the page in a headless browser, looked at its own screenshots and fixed what looked wrong (a bench drawn over the disciples sitting on it, houses overhanging a hill, a crucifixion too dark to read). The human role was the brief and the notes, the same way an art director works with an illustrator.
05Decisions
Trade-offs I chose
- 01
Real Halftone, Not a Filter
Colour is built from four dot screens at different angles, each with jitter, missing dots and a small registration offset, printed with multiply blending. Up close you see dots; from far away they read as texture, like a real riso print.
- 02
Print Once, Animate Between Layers
Redrawing thousands of dots every frame would crawl. Each plate is printed once into depth layers, and only the living elements are redrawn between them, at a stop-motion rate that suits a print coming alive.
- 03
Entrances Play Once
Scenes wait in their opening pose until you first arrive, play their movement once, and stay finished. Coming back to a scene shows it as you left it instead of rewinding the story.
- 04
Adapt to the Device
The page measures its own frame times and steps resolution and animation rate down on slow devices and back up on fast ones, and stops repainting when nothing on screen can change.
06Experiment
Built by Claude Opus 5.5 from one prompt
A test of pure craft: the prompt below forbids every asset, so each figure, stone, flame, cloud and halftone dot has to be drawn by the model's own code. The first full build came from this single prompt in one Claude Code session; follow-up requests in the same session added living animation, keyboard navigation, a loading screen and the Railway deploy. The cost is the session's own usage report and covers all of it.
- Total cost
- $30.69
- Output tokens
- 473k
- Session
- ≈ 2 hours
- Per plate
- $1.46
The prompt · 2,411 words · 1024 lines
# Jesus — The Last Supper to the Empty Tomb ## Test axis: PURE CRAFT There are no image assets to lean on at all. Every person, building, tree, stone, road, candle, flame, cross, cloud, wave of fabric, shadow, halftone dot and decorative mark must be drawn by the model's own code. The entire experience must be contained in ONE HTML FILE. No external assets. No images. No SVG files. No font files. No libraries. No external scripts. No network requests. Canvas only. The subject is the final days of Jesus Christ, from the Last Supper through the Crucifixion and Resurrection. The format is locked to the reference described below. --- # REFERENCE FORMAT Create the experience as a large printed sheet containing a collection of small isometric dollhouse dioramas. Each scene is a miniature cutaway environment. The camera tours these scenes one by one. The scenes are not conventional website sections. They should look like small illustrated rooms / environments physically printed together on one large sheet of paper. The overall visual language should resemble a hand-made risograph print: - warm cream paper - four-color spot inks - visible halftone dots - slight ink misregistration - imperfect linework - subtle printing noise - limited palette - hand-drawn character silhouettes - stepped lighting - tiny environmental details The result should look like a carefully illustrated physical print that has come alive. DO NOT make this look like a modern 3D game. DO NOT make this look like photorealistic religious artwork. DO NOT use stock illustrations. DO NOT use AI-generated images. DO NOT use external textures. Everything must be generated by code. --- # THE ONE-FILE RULE The deliverable is exactly ONE HTML file. It should contain: - CSS - canvas - JavaScript inside the same file. No build system is required. No external dependencies. No CDN. No imported fonts. No image files. No network requests after loading. The page should work by opening the HTML file directly. The only text outside the canvas should be the tiny interface overlay described below. --- # CANVAS Use one full-screen HTML canvas. The canvas is the artwork. The browser should feel like a window looking at a large printed illustration. Do not create a conventional DOM-heavy website. The main experience must happen inside the canvas. Use devicePixelRatio correctly. Support desktop and mobile. --- # THE PRINTED SHEET The entire story exists on one enormous virtual sheet of warm cream paper. Think of it as a large illustrated poster. Place approximately 18–25 miniature isometric scenes on this sheet. They should form a visually coherent composition rather than a grid. Some scenes can be slightly offset. Some can overlap visually. Some can sit higher or lower. Use negative space between groups. The whole composition should feel intentionally designed. Include subtle: - registration marks - tiny ink swatches - edge imperfections - crop marks - printing artifacts around the outer margins. Do not overdo them. The artwork is the focus. --- # THE ISOMETRIC DIORAMAS Every scene is a cutaway isometric dollhouse. Use a consistent isometric projection. Each scene should have: - a floor - near walls partially removed - side walls - architectural structure - furniture - characters - props - environmental details - shadows The viewer should be able to understand the scene immediately even when zoomed out. When the camera approaches a scene, the amount of detail should increase. --- # STORY Create scenes covering the following story. ## 01 — Jerusalem Establish the city. Stone buildings. Narrow streets. Temple in the distance. Markets. People moving through the city. Palm trees. This scene establishes the world. --- ## 02 — The Entry into Jerusalem Jesus enters Jerusalem. A crowd gathers. Palm branches cover the road. People lean from windows. Jesus rides a donkey. Keep Jesus visually consistent with every later scene. --- ## 03 — The Temple Jesus teaches in the temple. Large stone architecture. Crowds around him. Columns. Courtyard. Merchants and people moving through the environment. --- ## 04 — The Upper Room The Last Supper. This is one of the most important scenes. A long table. Jesus in the center. The twelve disciples surrounding him. Bread. Wine. Candles. Ceramic dishes. Oil lamps. Curtains. Wooden furniture. Use the arrangement of the people to communicate the scene. Do not make the characters generic stick figures. --- ## 05 — Washing the Disciples' Feet A smaller room. Jesus kneeling. Peter reacting. Basin. Water. Towels. The scene should feel intimate compared with the Last Supper. --- ## 06 — Gethsemane A moonlit olive garden. Jesus praying. The disciples sleeping nearby. Olive trees. Rocks. Moonlight. Deep blue shadows. This should be one of the quietest scenes. --- ## 07 — The Betrayal Torches appear through the trees. Judas approaches. Soldiers enter. Jesus remains still. The scene should communicate tension through composition rather than violence. --- ## 08 — The Arrest A garden path. Soldiers. Disciples reacting. Torches. Jesus being taken away. Keep violence restrained. --- ## 09 — Peter's Denial A courtyard at night. A small fire. Peter surrounded by people. A rooster somewhere in the background. This should be a small environmental storytelling scene. --- ## 10 — The Trial A stone courtyard / interior. Jesus standing. Authorities and guards around him. Architectural columns. Crowd. Strong directional light. --- ## 11 — The Road to Golgotha A long isometric road climbing through Jerusalem. Jesus carries the cross. Soldiers. Crowds. People watching from windows. Dust. Stone buildings. This scene can visually connect multiple smaller scenes. --- ## 12 — Simon of Cyrene A small moment along the road. Simon helps carry the cross. Keep the scene subtle. --- ## 13 — Golgotha A hill outside Jerusalem. Three crosses. Darkening sky. The city visible in the distance. Do not use graphic violence. Focus on silhouettes and composition. --- ## 14 — The Crucifixion A dedicated scene. Jesus on the central cross. Two crosses beside him. Large sky. Very few other elements. The scene should feel visually quiet. Gradually remove color from the environment. --- ## 15 — The Darkness A transitional scene. The sky becomes dark. The city is almost completely desaturated. Buildings become silhouettes. The lighting becomes extremely restrained. This should feel like the entire printed sheet has temporarily lost its color. --- ## 16 — The Burial Joseph of Arimathea and others place Jesus in the tomb. Stone chamber. Linen cloth. Rock-cut tomb. Guards nearby. Keep everything respectful and non-graphic. --- ## 17 — The Sealed Tomb Night. Large circular stone covering the entrance. Guards outside. Almost completely still. Very little color. --- ## 18 — The Women at Dawn Early morning. Women walking toward the tomb. They carry spices. The sky is beginning to brighten. --- ## 19 — The Empty Tomb The stone has been rolled away. The entrance is open. The burial cloth remains. The tomb is empty. Morning light enters the chamber. This is the visual turning point. --- ## 20 — The Resurrection Do not depict Jesus as a giant glowing superhero. Keep the scene human and mysterious. Jesus appears to Mary Magdalene. Morning light. Quiet garden. The emotional contrast with the earlier scenes should be enormous. --- ## 21 — The Final Dawn A final wide scene. The tomb. Jerusalem in the distance. Mountains. Trees. Morning sky. The world is now filled with warm light. This is the visual resolution. --- # RECURRING MOTIF There must be a recurring visual element throughout the entire experience. Jesus is the primary recurring presence. He should appear in every major scene where appropriate. His visual design must remain consistent. Same: - silhouette - clothing - hair - proportions - palette Do not redesign him for every scene. However, the recurring motif should sometimes be obvious and sometimes subtle. At times Jesus can be the central figure. At other times he can appear as: - a silhouette - a distant figure - a reflection - a small figure on a road - a figure inside a crowd This should make the user discover him rather than having him pasted into every composition. --- # CHARACTER DESIGN Every human figure must be drawn as an actual illustrated body. Do not use stick figures. Use: - head - neck - shoulders - torso - hips - arms - legs - hands Use simple but believable proportions. Clothing should have: - folds - weight - silhouette - period-appropriate shapes Characters should have different poses. Avoid copying and pasting the same human shape everywhere. Use deterministic procedural variation. The disciples should be visually distinguishable. Jesus should remain the most recognizable character. --- # HAND-DRAWN LINEWORK The linework must not look like perfect vector art. Every line should have subtle irregularity. Lines should: - wobble slightly - taper - vary in thickness - occasionally break - contain tiny imperfections Use seeded randomness. The same scene must render identically every time. Do not use random Math.random() directly for artwork. Create a deterministic seeded random generator. --- # RISOGRAPH PRINT EFFECT The artwork must look like a real risograph print. Use approximately four spot colors over warm cream paper. Suggested palette: PAPER: warm cream INK 1: deep navy INK 2: dark red / vermillion INK 3: muted teal INK 4: warm yellow / ochre Do not use a huge full-color palette. Every color should come from the limited spot-color system. Represent colour using halftone dots rather than smooth digital fills. Use different dot patterns for different inks. Each ink should have: - slightly different screen angle - tiny positional offset - occasional missing dots - slight registration errors The final image should feel printed rather than digitally painted. --- # HALFTONE Large flat areas should be constructed from halftone dots. Dots should vary slightly in: - size - spacing - opacity Use deterministic randomness. Avoid perfectly uniform computer-generated patterns. The halftone should become visible when the user zooms into a scene. At the overview level it should simply read as texture. --- # LIGHTING Lighting must be represented through stepped ink shapes. Do NOT use smooth gradients for scene lighting. Use: - discrete shadow shapes - halftone rings - stepped light pools - ink blocks Examples: Candlelight should appear as a warm stepped pool. Moonlight should appear as cool geometric areas. The darkness at the Crucifixion should progressively remove ink. Dawn should gradually introduce the warm yellow ink. --- # CAMERA The camera is one of the most important parts of the experience. Start extremely zoomed out. Show the entire printed sheet. Then slowly tour the scenes. The camera should move between scenes like a documentary camera travelling across a giant illustration. For each scene: 1. approach 2. settle 3. allow the viewer to inspect 4. move toward the next scene Camera movement should be smooth but slightly imperfect. Do not make it feel like a generic slideshow. The camera should feel like it is physically moving across a large piece of paper. --- # INTERACTION Allow the user to take control. Mouse: - drag = pan - wheel = zoom Clicking a scene should focus the camera on it. Hovering over a scene can reveal a tiny label. Mobile: - drag = pan - pinch = zoom - tap = focus Do not break normal browser behavior unnecessarily. --- # STORY CARD Use one very small overlay card. It should show: scene number scene title one short sentence Example: 07 GETHSEMANE "Not my will, but yours, be done." Keep this minimal. The artwork should remain dominant. --- # TYPOGRAPHY No custom fonts. Use system font stacks. Typography should feel like a small museum label. Do not put paragraphs over the artwork. No giant website headings. No navbar. No hero section. No cards. No buttons except minimal controls. --- # AUDIO If you can implement it without violating the one-file/no-network constraint, create subtle procedural sound using Web Audio API. No external audio files. Possible sounds: candle ambience wind footsteps distant crowd birds quiet room tone The sound should change by scene. Silence should be used deliberately. Provide a tiny sound toggle. The experience must work perfectly without sound. --- # THE FINAL TRANSITION After the Resurrection scene, do not immediately show a final screen. Zoom slowly back out. Reveal the entire printed sheet. But now the lighting of the world has changed. The whole sheet feels like dawn. The complete story path can now be seen. Then show: HE IS RISEN very small. Then: THE END OF THE JOURNEY IS THE BEGINNING OF THE STORY. Keep it understated. --- # IMPORTANT: NO MODERN WEB DESIGN This is not a SaaS website. Do NOT create: - navbar - hero section - feature cards - gradients - glassmorphism - giant CTA buttons - dashboards - modern 3D UI - floating panels everywhere The canvas IS the interface. --- # TECHNICAL CONSTRAINTS ONE HTML FILE. No external libraries. No external images. No external fonts. No network requests. No CDN. No imported JavaScript. No assets. Canvas only. Use vanilla JavaScript. Use requestAnimationFrame. Use an orthographic/isometric projection implemented mathematically. Build reusable drawing primitives. Build a deterministic scene system. Build a deterministic camera system. Build reusable character primitives. Build reusable environment primitives. Keep the entire implementation inside the single HTML file. --- # PERFORMANCE The artwork may contain thousands of dots and many objects. Optimize carefully. Use: - precomputed scene geometry - cached static layers - offscreen canvases where useful - only redraw dynamic elements - deterministic random seeds - spatial visibility checks Do not recompute the entire world unnecessarily every frame. The camera should remain smooth. --- # THE STANDARD This website will be compared visually against other models receiving the exact same prompt. The goal is not merely to make a functional website. The goal is PURE CRAFT. Every detail matters: - composition - linework - characters - perspective - halftone - palette - lighting - camera - transitions - storytelling The result should look like something an illustrator spent weeks constructing. The fact that it was generated entirely in code should be part of the achievement. --- # FINAL INSTRUCTION Do not stop at a rough prototype. Build the complete experience. Run it. Inspect it. Iterate. Fix weak scenes. Fix inconsistent perspective. Fix repeated characters. Fix camera transitions. Fix the print texture. Fix anything that looks generic. Do not give me a plan. Do not tell me how you would build it. DO THE BUILD. The final deliverable is the working ONE-FILE HTML EXPERIENCE.