One camera move, driven by your scroll wheel: how we built a scroll-through architecture page

A chalet sits on a snow slope at dusk. You scroll, and the camera glides toward it until a rough stone wall fills the screen. Scroll again, and it flies through the window and into the room, where a long line of fire burns in front of a picture window full of mountains. Scroll back, and the whole thing plays in reverse.

Stop scrolling and everything stops, flames included. There is no video playing. Your scroll wheel is the playhead.

Scroll through it here. It is best on a laptop with a trackpad or a mouse wheel.

Where the idea comes from

The interaction comes from a post by horyx.studio on Instagram: a 15-second screen recording of a landing page that does exactly this, with three chapters of text fading in over the footage. We did not have their code or their prompt. We worked from the recording, frame by frame: how long each move takes, where the camera rests, what the text does, how the motion follows the hand.

The house, the images, the copy and the code are ours. The house does not exist.

The rule that made it work: everything grows out of one still

Our first version used three separately generated images: a wide shot, the facade and an interior. Then we asked a video model to connect them with first-frame and last-frame animation. It looked fine for a few seconds and then fell apart. The roof was pitched in one image and flat in the next. Between the two, the snow showed a ghost of the old wall. And the room did not match the house: different windows, different light, different stone.

Two images generated separately are two different places, and no transition can make them one. So we threw them away and kept a single image.

Zoom in

Every other view comes from this facade:

1. The opening. We asked the video model to fly backward from the facade, away from the house and up the slope. Then we reversed it. Played forward, the camera now arrives at a house it has actually been looking at the whole time, with no morph.
2. The room. We asked it to push forward from the same facade, through the glass and into the room. The model invents the interior, but it invents it from what is visible through the window: the same beams continuing from the soffit, the same fire, the same dusk light.

Zoom in

The video model is MiniMax H3, running locally in ComfyUI on a single RTX 4080 SUPER. Each shot is 124 frames at 1344 by 768, and takes about four minutes.

Sharpening the room without changing it

Video frames are soft. The last frame of the push had the right room, but the timber was mush, the stair read like a ramp and the window had a fire reflection pasted onto it.

So we took that frame and redrew it with image-to-image (Z-Image Turbo, also local), at a strength of 0.6. We tried 0.3 and 0.45 as well. At 0.6 it was sharp and the layout stayed put; any higher and it would start inventing a different room. The flame reflection survived a masked redraw, so we removed it directly: find the warm pixels inside the two panes and fill them from their surroundings.

Then the important step. We regenerated the push-in as a first-and-last-frame shot: from the facade to this cleaned-up frame. This time the two ends really are the same place, because the last frame came out of the first.

Scroll is the playhead

The page is a tall scroll track with a canvas pinned to the screen. Both shots are exported as still WebP frames, 185 for desktop and 93 for phones, and the scroll position decides which frame the canvas draws.

A few details make the difference between "a video that follows the scrollbar" and something that feels smooth:

• Wheel input drives a spring, not the frame directly. Each wheel notch adds to a target, and the position follows it with a critically damped spring. It moves on the very first notch, and a second notch mid-move continues the motion instead of jerking it. It takes about six notches to get from one scene to the next.
• It settles on a chapter. If you stop between two scenes, it glides on to the next one in the direction you were going, so you never park on a half-blurred frame with the text faded out.
• Two frames at once. The canvas blends the two nearest frames, so the slow ends of each move do not step.
• Coarse frames first. The page loads every sixteenth frame, then fills in the gaps, and always draws the nearest frame it has. A fast scroll on a slow connection never shows a blank screen.
• Phones get their own set. Half the frames, cropped from the center at the original resolution rather than scaled down, with the text on a scrim. With reduced motion turned on, the page snaps between the three stills instead of scrubbing.

What went wrong

The glass. Every time the camera passes through the window, the model draws the room and the snow outside as a double exposure, for about a second.

Zoom in

We tried two other prompts with the same first and last frames: one insisting the glass is perfectly clean with no reflection, and one flying through an open sliding door instead. Both kept the double exposure. The first also produced a dining chair that appeared and vanished, and the second put flame reflections back in the far window. So we kept the original shot and passed the crossing at double speed. It is still there if you scroll slowly. It is the weakest moment of the page.

The room was crooked. Look at the beams and the floor in the redrawn frame above. The lines near the top rise to the right by 3 to 6 degrees, and the lines near the bottom fall to the right by 2 to 3. That is what a slightly rotated back wall looks like, and in a view that is almost straight-on, your eye reads it as "this room is tilted".

Our first fix only straightened the window, which left it disagreeing with the beams around it. The fix that worked measures every long line that runs across the room with a line detector, works out one slope per row of pixels, and shears each row by that slope. Only rows move, so the vertical lines stay vertical and the floorboards still run into the distance. Then the shot was regenerated once more, ending on the levelled frame. Every long line across the room now ends within 1.5 degrees of level.

That has a price. The shear leaves two corners of the frame without pixels, so the final shot is zoomed in by about 10%. You lose a little of the left wall and the near end of the fire, and the diagonal beam in the top-left corner bends very slightly.

Patching individual frames does not work. We first tried to fix things in the exported frames. But a crooked edge can only be measured in the last 20 frames or so, where the room is in focus, so fixing just those makes the window visibly rotate itself level at the end of the move. Every fix had to go into the still, followed by a fresh generation from it.

If you want to build one

The demo page has our full build prompt under the last chapter. The short version of what we learned:

1. Generate one image of the place, and grow every other view out of it with the video model. Never ask a model to join two images that were generated separately.
2. Use a pull-back played in reverse for the approach. It is the same scene by construction.
3. Fix the composition in a still, then regenerate the move to end on it. Do not patch frames.
4. Let the wheel drive a spring, settle on chapters, and keep a static poster behind the canvas for the first paint.

Everything in this demo was made outside Studio. If you have a photo or a model screenshot of your own and want to see it with different materials, light or furniture, that is what Studio does: start with a custom prompt.