The Ébauche
Inspired by Ébauche on Wikipedia
Built with Three.js r160 · pmndrs postprocessing · ChromaticAberrationEffect · BloomEffect
Techniques PBR metallic materials · Cursor-driven chromatic aberration · Radial modulation · Camera orbit parallax · Film grain overlay
Direction An unfinished watch movement seen through an imperfect lens — your gaze fractures every edge into spectral color
Result A rotating mandala of gold, silver, blued steel, and ruby that bleeds prismatic light wherever you look
The Story
An ébauche is the skeleton of a watch — the raw, unfinished movement before it becomes a timepiece. Machined brass with visible tool marks, functional but naked. The word comes from Old French esbosquier: “to rough-hew,” literally revealing the beam within a felled tree.
The finished watch hides this honesty. Geneva stripes — parallel engraved grooves that catch light in undulating waves — were invented specifically to camouflage machining marks. Perlage, anglage, blued screws: every finishing technique in horology exists to transform the crude into the precious. The beautiful movement you admire through a display caseback is a decorated surface concealing a functional truth.
The question the ébauche asks: which version is more beautiful — the honest mechanism or the decorated surface?
The Take
The Ébauche presents a mandala of metallic forms — concentric torus wheels, radiating bridges, jewel bearings, blued-steel screws — slowly rotating against deep charcoal. The geometry of clockwork, abstracted into its essential shapes.
Your movement introduces chromatic aberration: the image fractures into its spectral components. Colors split at every edge. The faster you move, the more dramatic the splitting. It’s not a flaw — it’s revelation. Each color channel shows a slightly different version of the mechanism, and in the gaps between channels, you glimpse the seams in the finish.
At rest, the mechanism looks perfect. In motion, you carry an imperfect lens that can’t help but unfinish everything it sees.
The Tech
pmndrs Postprocessing via CDN: This is the first experience to use the pmndrs postprocessing library (v6.35.3) loaded via CDN importmap alongside Three.js r160. The library merges all effects into a single fragment shader pass — dramatically more performant than Three.js’s built-in EffectComposer which chains separate passes.
ChromaticAberrationEffect: The core visual. The offset vector has two components: a constant base (0.004) providing permanent radial fringing at edges, and a directional boost (smSpeed * 0.06) that follows cursor movement direction. With radialModulation: true and modulationOffset: 0.2, the effect is weaker at screen center and stronger at edges — matching how real lens aberration behaves.
PBR Metallic Materials: Five distinct materials define the mechanism’s palette — gold brass (metalness 0.85, roughness 0.25), rhodium silver (0.92, 0.15), blued steel (0.88, 0.18), ruby jewel (0.1 metalness, 0.4 roughness with red emissive), and dark gold (0.8, 0.35). The high metalness values create strong specular reflections that the chromatic aberration loves — every highlight becomes a source of spectral color.
Three-Point Lighting: A warm gold directional key light (jeweler’s lamp), cool blue directional fill (workshop daylight), and red point light from below (blued-steel heat glow). This creates high-contrast edges across the metallic surfaces — exactly what chromatic aberration needs to produce visible color fringing.
Stacked Effects: BloomEffect (intensity 0.7–1.1, luminance threshold 0.7) adds glow to metallic highlights, VignetteEffect (darkness 0.55) frames the mechanism, and NoiseEffect at 8% opacity in overlay mode adds subtle film grain texture. All four effects compile into a single shader pass.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.