Mareau

Mareau Cycles was founded in 2016 by a composites engineer from aerospace and a former professional rider. Two models leave the Annecy workshop: Col, a climbing bike at 6.4 kilograms, and Vire, an aero bike at 7.1. Six fitting ateliers from Girona to Zürich. The voice is terse and technical, and a little romantic about mountains.

This project stands in for the automotive brief: a vehicle whose geometry we could genuinely build in 3D from a real geometry table rather than download.

The audience is serious amateur cyclists between thirty-five and fifty-five who compare stack and reach before they compare colours. The site had to be cinematic enough to justify the price and precise enough to survive their scrutiny, and it had to end in either a purchase or a booked fitting.

Cold slate and chalk alternate by chapter like altitude bands. Granite and mist carry the secondary tones. Mareau red appears on the paint and nowhere else, so the bicycle is the only warm thing on the page. Imagery follows one direction: long lens, high altitude, mist in the valley, the product lit like a product and placed like a landscape.

Big Shoulders Display sets the headlines in condensed athletic capitals at tight leading. Manrope reads. DM Mono carries the geometry, the altitudes and the price.

The climb tells the story of the bike in six chapters and releases into the two models compared, the ateliers on a drawn map, a rider story and the configurator. Model pages carry the geometry chart and full specifications. The configurator is a real tool that encodes its state in the URL so a build can be shared with a fitter.

A pinned sequence of roughly seven viewport heights moves a camera around a parametric Three.js bicycle through named stations: rear wheel, down tube and bottom bracket, drivetrain, cockpit, then a pull-back to the hero three-quarter view as the page flips from slate to chalk at the col. An altitude readout counts with the scroll.

The configurator changes paint, decals, groupset, wheel depth, bar width and size on the same model with physical materials and clearcoat, updates price, weight and delivery, and saves the build in the URL. On model pages an SVG geometry chart morphs between sizes while the mono table counts to the new values.

The camera is scrubbed, never eased on a timer. Chapter changes are wipes of a quarter second. Captions rise twelve pixels over four hundred milliseconds. Numbers count with the climb. Text does not parallax. With reduced motion the chapters become a static sequence of six views and the configurator keeps working.

Frame tubes are generated as tube geometry along paths computed from stack, reach, head and seat angles, chainstay, wheelbase and bottom-bracket drop; the aero model flattens its tubes. Wheels carry real spoke counts, rims at three depths and torus tyres. Paint uses a physical material with clearcoat under a room environment; the drivetrain is brushed metal. Cameras are named stations interpolated by ScrollTrigger scrub. DPR is capped, rendering pauses off-screen, and low-end devices fall back to pre-rendered frames.

Screens captured from the built site at 1440 and 390 pixels wide.

The finished site earns its 3D: the model is built from the same numbers the customer reads in the geometry table, and the configurator is a tool the workshop could actually use.