Lathe Story Scroll
A five-chapter scroll story that turns a single drawn line into a three-dimensional object: revolved, glazed, exploded into named parts and reassembled, with no three.js.
Canvas 2D0 deps1 file · 33 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
/**
* LatheStoryScroll — a three-dimensional object, turned from a line as you
* scroll, told in five chapters.
*
* You describe the object as a PROFILE: a handful of [radius, height] pairs,
* the way a potter or a lathe operator would. The component revolves that
* profile into a mesh and renders it on a 2D canvas with its own tiny
* rasteriser: perspective projection, painter's sort, flat shading quantised
* to five print-like tones. No three.js, no WebGL, no dependency.
*
* THE STORY IS THE SCROLL. A sticky stage holds the object while five
* chapters of real text scroll past it. Chapter one draws the profile as a
* technical line. Two revolves it into a wireframe, sweeping out from the
* front meridian in both directions like a lathe. Three fills the faces with
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this animation
Scroll storytelling in three dimensions usually arrives with a WebGL runtime and a model the client cannot supply. This entry takes the one class of object that can be described in a handful of numbers, anything turned on a wheel or a lathe, and renders it itself: the profile is revolved into a mesh, projected with perspective, sorted back to front and shaded flat in five print tones, so it reads as a screen-printed illustration rather than a render. The five chapters are real text in the page, and the sticky stage tells the same story beside them. The line draws itself, the wheel sweeps it into a wireframe out of the front meridian, the material fills in as the light walks across, the object comes apart into four named parts with hairline callouts, and it settles on the hero angle where the call to action sits. Scroll sets a target and the drawing eases toward it, so a flick reads as a movement; the loop sleeps when it settles and when the section is off screen. Drag the stage to walk the light around the form, which is the one thing an orbit would visibly change on a turned object. Four profiles ship, and a client's own is a short array.
Curator’s note
Every scroll-driven 3D piece I studied either needs three.js and a model the client does not have, or is a laptop tilting back. A turned object is eight numbers, and revolving a profile is the one kind of 3D a two-dimensional canvas can do properly.
