←back to demos

Scroll transition product story

A production-shaped playground for Insta360-style masks and Apple-style video scroll. The right panel edits the same config used by the renderer.
progress 0.000frame 0scroll
Scroll Transition Engine
Mask reveal + video scrub in one reusable scene.

Replace the SVG placeholders with product renders, frame sequences, or a muted video. The same timeline drives masks, copy, layer transforms, and frame progress.

Replaceable hero product render placeholderReplaceable lens detail placeholderReplaceable sensor detail placeholderReplaceable stabilization feature assetReplaceable remote screen feature assetReplaceable feature pin marker
scrub preview0/147
DOM mask reveal

Insta360-style layered gradients reveal text and product detail while the grid collapses behind it.

Video progress

Apple-style scroll progress can scrub a video or frame sequence and pin feature copy to specific timeline ranges.