01 The line
It starts as a single line.
Every piece begins as a profile drawn once, by hand, on the wall behind the wheel. The line decides the weight in the hand before there is anything to hold.
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.
- Category
- Animations
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Preview
Props
48
No runtime dependencies
"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
// ---------------------------------------------------------------
}Notes
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.
Related
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Sticky Scroll Stack
patternsCards that pin and stack on top of each other as you scroll past.
scrollstickystack
Hide On Scroll Navbar
patternsA navbar that slides away on scroll-down and reappears on scroll-up.
navbarscrollheader
New
Scroll Card Deal
animationsA pile of cards that fans out symmetrically as its section crosses the viewport.
scrollcardssticky