Sapiency Back to The Atelier

How this site was built

One of five sites designed and built end-to-end by Claude (Fable 5) in a single autonomous session. This one argues that a solo advisor's site can take you inside the work — the actual system, drawn as the machine it was.

The concept

The Atelier reconstructs the guest-operation system from Saudi Film Festival 12 as six stations in three-dimensional space: the single conditional form, the 771-record governed master, the orbiting quality checks, the message streams, the manifest conveyor, and the dashboard — with a gold thread running from the dashboard back to the master, because "every figure traceable in one click back to its row" was the build's whole philosophy. Scrolling dollies the camera from station to station; the glass caption cards carry the verified facts.

The build, step by step

  1. The system map came from the engagement record. Every station corresponds to a real component in the brand's verified record — nothing in the scene is decorative invention. The 771 record points are exactly 771. The ring has exactly eleven checks in three severity colours. The finale dandelion is the brand motif, not a particle demo.
  2. One scene, six stations, keyframed camera. Stations are laid out along the Z axis in a single Three.js scene. Scroll position maps to a stage float 0–6; the camera's position and look-target interpolate between per-stage keyframes with a smootherstep curve, plus a gentle mouse parallax. Fog does the depth grading.
  3. Cheap geometry, deliberate light. Everything is points, lines, edge-wireframes, and soft canvas-generated sprites — no meshes with materials that need lighting, no shadows. The dashboard's chart is a 512px canvas texture drawn by hand. The whole scene renders comfortably because restraint is also a performance strategy.
  4. Particle systems tell the data story. Gold packets flow along a Catmull-Rom curve from form to master; message sparks travel from a hub to 220 recipient points; a spark rides the gold thread from chart to record. Deterministic pseudo-randoms keep every visitor's scene identical.
  5. Respect for the reader. The DOM cards are real HTML over the canvas — selectable, accessible, readable without the scene. prefers-reduced-motion swaps the animation loop for static frames re-rendered on scroll. The render loop pauses when the tab is hidden.
  6. Three iteration passes. Camera framing, card contrast against the scene, mobile centering, and scene pacing were each adjusted after full read-throughs in a real browser, with a final check against the brand fundamentals — palette discipline, type system, and the verified record.

The design argument: case studies usually compress the work until it looks easy. Walking through the system at architectural scale does the opposite — it makes the invisible plumbing visible, and the facts land harder because you're standing inside them when you read them.

Reproduce it

Draw your last engagement as a system: boxes for the components you actually built, threads for how data moved. If the drawing is honest, it already has drama — the 3D is just staging. Keep the geometry cheap, the palette disciplined, and put the real numbers in HTML, not in the texture.

Back to The Atelier