Scroll Assemble: a One-Screen Product Website That Comes Apart as You Scroll
A one-screen product website where the product separates into an exploded view as visitors scroll: SandBase generates a studio picture and an exploded-view clip, mapped to the measured change. The clip fills the window on a canvas; the wheel, a swipe or the arrow keys open it through pages that change in place (chapters, a repairer's quote, a spare-parts list, order), with leader-line callouts on the parts.
Bring a product with visible parts (or your own picture), the captions for each stage, brand, links and language. The Skill returns a static one-screen product site (index.html) with its runtime, fonts and the analysed clip, and colours taken from the picture.
How it works
With your go-ahead (about $0.80), SandBase generates a studio picture and a locked-off clip of the product separating into aligned layers.
The analysis trims the still start and end and maps scroll to the measured change, so every part of the scroll moves something.
The page does not scroll: each scroll moves one page on and settles. Chapters and callouts switch at the points set in site.json, and the picture is painted on a canvas so it follows at the screen's frame rate.
Frequently asked questions
Does the page call a model?
No. The finished page is static: HTML, one script, fonts and one clip. Models are only used when the Skill generates a new clip.
What does a new clip cost?
About $0.80 per attempt through SandBase. The Skill refuses clips with cuts or too little change, so budget for a retry.
Can I use my own picture or clip?
Yes. Pass your own picture to skip the image step, or analyse your own locked-off clip with analyze.mjs.
Why do the links do nothing here?
The example runs in a sandboxed frame with its links disabled. In your page they go wherever you set them in site.json.
Why is there no online generation?
Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.