Demoed live as this page's hero — the video's playhead is tied directly to your scrollbar. Scroll up to the top and drag slowly to feel it.
It runs live as the home page hero — cross-listed as #26 in the Hero wing.
↑ Replay the heroApple AirPods style: a frame sequence rendered to <canvas> and scrubbed by scroll — here the "product" assembles and orbits as you move. The section pins while you drive the animation.
Frame 001 / 120
The page pins and moves sideways as you keep scrolling down — great for process steps, chapters or portfolio walls.
Vertical scroll is translated into horizontal motion while the section stays pinned.
Each panel is a full viewport — perfect for storytelling one beat at a time.
Inner elements can parallax against the track for extra depth.
Release the pin and the page continues vertically like nothing happened.
The headline sits at 12% opacity and fills with a gradient exactly in step with your scroll position.
Five layers moving at different speeds — sun, title, two mountain ridges and fog — creating fake 3D depth as the section passes.
Each card sticks to the top and the next one slides over it while the previous scales down and dims — a deck of cards being dealt.
Numbers spin up from zero the moment they enter the viewport. Scroll past and back to replay.
The image scales up until you fly through it — and the next section is revealed behind it.
Chapter two begins
Your Beachside hotel animation, live: scroll flies the camera in from the shoreline, through the doors, into the lobby. The opening copy glides up and off exactly as the doors open; the welcome line appears only when the flight is done. Seeking is velocity-smoothed so it never stutters.
Scroll to fly in from the shoreline, through our doors, and into a stay designed by SB Designs.
Video not found — this demo expects Social Media/images/sb-designs-hotel-flythrough-scrub.mp4 one folder up from effects-lab.
A route draws itself in step with your scroll while a dot travels the path — perfect for service-area maps, process roads, or an animated signature.
The entire background melts to a new color as each section takes over — no hard cuts, the page just changes mood under you.
Keep scrolling
Violet hour
Forest floor
Ember room
The image locks in place on the left and crossfades per chapter while the story scrolls past on the right — the premium case-study layout.
While you read, the visual on the left holds its position — sticky, calm, always in frame.
Each chapter that crosses the middle of the screen swaps the image with a slow crossfade and zoom-settle.
When the last chapter ends, the section releases and the page scrolls on like normal.
The page pins and your scroll becomes a camera — flying forward through photos and headlines floating in real 3D space, with depth fog, mouse-look, and a chapter HUD. The signature "expensive site" scroll piece.
These are the effects you hearted — from every wing.