What you’ll make
A three-view scroll plan with a still image that shows the same useful detail.
What do you see when the journal opens?
A field journal that opens as you scroll
Say you’re selling a field journal. I’d like to see the pages inside before I download it. A little movement could do that. Start with the cover, open it to the index, then give me a good look at the page where I’ll write my observations.
I’d try the movement with two rectangles first. The cover can be plain gray while you figure out where the fold goes and what happens when you scroll back up.
Scroll sketch
Closed cover, index, observation spread
- At 0, the cover faces you. “See what’s inside” sits above the scene.
- At 0.45, the cover opens onto the index. Scroll back to that spot and you get the same view.
- At 1, the camera rests above the observation spread near the “Download the sample” link.
Still version
An open journal with the sample link
- Image shows the observation spread, with a place for the date, location, and notes.
- Page text says “Use the index to find a trip, then log what you saw on the observation page.”
- The “Download the sample” link stays in the page text and works if the 3D scene never loads.
Before you start
- Bring one product image or model and a detail you want to reveal. You can sketch the three views on paper, or open the editor you already use.
Pick the detail you want to reveal
Choose one thing someone should see about your product. Gather the artwork and write down the action you want people to take after they see it.
Draw three views on paper or in an editor
Sketch the start, a useful middle view, and the end. Beside each drawing, write what the product shows and which words or link should be visible. Think of the scroll as going from 0 to 1.
Save the scroll plan and its still
Choose one still that shows the useful detail by itself. Keep the explanation and the main action outside the scene so the page can still use them if the animation is off.
I sketch the field journal closed at 0, open to the index at 0.45, and open to the observation spread at 1.
My still shows the observation spread with ‘Download the sample’ alongside it. That gives me a version I can use before I build the motion.
Follow the plan in both directions
Read the three views going down and back up. Then look at the still on its own. Fix any missing label or action before you save the plan.
- Point to the detail each view reveals.
- Find the same useful detail in the still.
- Follow the sample link or record its exact destination.
Optional: Prototype the transition with two shapes
Build a test with two plain shapes before using the real artwork. Scroll forward, back, and with motion reduced. Make sure the still image and caption explain the same feature.
Break down the scroll and sketch my version
Share a recording or timestamped stills and your product details to get a three-view plan for your own scene.
Here’s the effect I’m studying [recording or timestamped stills]. Point to the frames where movement starts, pauses, and reverses. Tell me what visibly changes, where it settles, and what the visitor can see at each moment. If the scroll input or timing isn’t visible, label it as a guess. Now sketch a scroll section for [my product and artwork]. I want someone to notice [detail] and take [action]. Give me a table with the start, a useful middle view, and the exit at progress 0, a number between 0 and 1, and 1. For each, give the camera or object pose, the detail it reveals, and the nearby text or link. Describe a still that carries the same idea and tell me which view I should check first by scrolling back to it.
Get the motion working with two shapes
Paste your scroll plan and project setup to get a small prototype you can test before loading the artwork.
Use [scroll plan] and [project files or plain HTML setup] to make a rough browser prototype with simple shapes. Keep the heading, explanation, and sample link in HTML. Show how the current position between the section start and end controls each pose. Handle backward scrolling, fast scrolling, resizing, and a reload halfway down. If you can’t inspect the project, give me a self-contained prototype or the exact files you need. Include a still for reduced motion and load failure. Give me expected poses at three scroll positions and show how to repeat the check in both directions.
Try the page with the scene missing
Use this once the demo loads to check whether the still, text, and sample link can carry the page on their own.
Here are my preview, still, and phone notes [URL or files, still image, device, and measurements]. Make a manual test sheet for reduced motion, simulated scene failure, and a slow fresh load. Include the setup, what I should see, and how to check that the text and sample link still work on a phone and with a keyboard. Use my observations to flag any loading or scrolling regression. If you can’t open the preview or reproduce a setting, give me the exact check to run myself and keep the result pending.
Optional worksheet: 3D scroll prototype worksheet
Fill this in as you go. Keep this page open while you work. Reloading it clears your answers.
Troubleshooting
What if it jumps when I resize or reload?
Measure where the section starts and ends again. Use the current scroll position to calculate progress before drawing the next pose. Check the same spot at both window sizes.
Why does it get choppy right when the scene shows up?
Try an empty scene first to see how the renderer runs on that phone. Try smaller textures, a lower render resolution, or a simpler model one at a time and check the same scroll after each change.