Scroll storytelling prompts

Write chapters, not sections

A normal page is a stack of sections. A scroll story is one pinned canvas with the text passing over it. Give each chapter a number, a progress range (0 to 0.2, 0.2 to 0.45 and so on), where the camera is, what changes in the scene, and the one or two lines of copy that appear. The model then has a table to build from, and you have a table to check against.

Say how the chapters join. A camera that eases along a single path reads as one film. A camera that cuts between positions reads as a slideshow. Scroll-driven animation in prompts covers the vocabulary: pinning, progress, easing and reversibility.

What it costs

The scene renders every frame for as long as the visitor is on the page, and a long camera path tends to grow: more models, more textures, more lights. Each of those is download weight and work per frame. A story also needs scroll height, usually several screens per chapter, so the page is long and the visitor has to commit to it.

The asset question decides most of the result. If you have models, name the files. If you do not, ask for a world built from simple shapes with flat colour and fog. A stylised low-detail scene that runs is better than a detailed one that the model cannot build.

The fallback

Ask for a second version of the same story made of stills: one image per chapter with the same copy, in a plain vertical page. Serve it when the visitor has asked for reduced motion, when WebGL is unavailable, or when the frame rate stays low after the pixel ratio has been lowered. On phones, decide whether to run a lighter version of the scene or go straight to the stills, and write that decision into the prompt.

What a scroll storytelling prompt should contain

• The scene in two sentences: the place, the light, the one thing that travels through it.
• The chapters: four to six, each with a progress range, a camera position and its copy.
• The camera path: one eased curve, and that scrolling back reverses it.
• The assets: model files by name, or permission to build from primitives.
• The budget: capped pixel ratio, one render loop, paused when off screen.
• The fallback: one still per chapter for reduced motion, no WebGL and slow devices.

A prompt to start from

Build a one-page scroll story for [brand], [what it is]. One continuous 3D scene, pinned full screen, driven by scroll progress from 0 to 1 over a page 600vh tall.

The scene: [your scene, e.g. "a narrow canal at dawn; a small flat boat travels through four locks toward a town, and the light moves from grey-blue to warm evening"]. Build it from simple shapes: boxes, planes and cylinders with flat colours, no textures, soft fog from 30 to 120 units in #c9d6dc.

Chapters (camera eases between them along one curve; scrolling back reverses everything):
1. 0–0.15: wide shot from above. Headline: "[headline]".
2. 0.15–0.4: camera drops to follow the boat. Line: "[line]".
3. 0.4–0.65: the lock gates open over this range. Line: "[line]".
4. 0.65–0.9: the light warms to #f2b680; the town comes into view. Line: "[line]".
5. 0.9–1: camera rises and stops. Button: "[label]".

Stack: Vite + React + TypeScript, three.js for the scene, plain CSS for the text. Read scroll once per frame, smooth it toward the target by 10% per frame, and drive everything from that one number.

Text: [typeface], headline 72px desktop / 36px phone, lines 20px, colour #10161a, lower left with a 32px margin. Each line fades in over 0.4s inside its range.

Budget: one render loop, pixel ratio capped at 2, shadows off, under 100 draw calls. Pause rendering when the tab is hidden.

Phones: same scene, pixel ratio 1.5, fog nearer, chapters 3 and 4 merged. With prefers-reduced-motion or no WebGL, show five still frames stacked with the same copy.

Run it, scroll the full page both ways and report the frame rate.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to describe scroll-driven animation in a promptThe vocabulary for scroll moments in a prompt: pinning, progress from 0 to 1, easing and reversibility, with a moment sheet to copy.
• A performance budget for 3D websites, written into the promptWhat to write into a prompt so a 3D or WebGL site runs: pixel ratio cap, draw calls, texture sizes, one render loop, and pausing when off screen.

• 3D products
• WebGL heroes
• Particles
• 3D galleries
• Cursor interactions
• Cloth and materials