Ohtaka

Ohtaka D-900 is a single-page product story driven by the scroll. A cassette recorder turns, opens and comes apart piece by piece, from the front shell to the motor, and then the page picks up the voice of a hi-fi catalogue: the details, the specifications, the order coupon.

• 01

  Two scrubbed sequences, one canvas

  238 rotation views at 1600 x 900 and 180 teardown views at 896 x 1200, all cut out, called by the scroll position and painted onto a single canvas. At rest the mouse turns the machine by plus or minus 24 frames, about a third of a turn, on a sequence that wraps.

• 02

  Loading in two passes

  One frame in six first, with its counter, and the page becomes usable; the rest follows in batches of eight. The teardown sequence is only requested at 45 % of the first track, never before.

• 03

  No waiting on an exact frame

  If the exact frame has not loaded yet, the nearest available one is painted instead. Scrubbing never blocks, it sharpens as it goes.

• 04

  The layout is measured on the object

  The plates are nearly empty frames: only the alpha channel says where the machine starts and ends. Its real bounding box is measured once, in fractions, and it drives the framing at every screen size.

• 05

  The wordmark reaches the bar without touching the layout

  Start position computed on the frame, end position measured in the bar, interpolation between the two using transforms only. The bar's height does not move by a pixel during the trip.

• 06

  A single document

  HTML, CSS and script live in the same file. No library, no build step, and the composition settings are tuned live with `?reglage=1` before being frozen into the code.