Build a scroll-video website without rebuilding the interaction

Separate the film from the website

In LUDGI's Orbital Bloom project, closed doors open and the camera travels into a lively garden. The film contains that movement; the website maps the visitor's scrolling to its timeline. Treat these as two deliverables: a finished shot and the interface that controls it. A different background concept can then use the same interaction.

Before generating the film, decide what the first frame shows, when the doorway clears and where the camera stops. Leave space for the hero copy in the opening frame and for the next section at the end. The composition should work on both a wide screen and a narrow crop.

Use scroll progress as the playhead

Give the hero a defined scroll range and convert the position within it to progress from zero to one. Map that progress to the usable video duration. Read the actual media duration after its metadata loads instead of assuming every replacement has the same length.

Scrolling down should advance the shot, scrolling up should reverse it, and an idle page should hold the current frame. Keep the film range and the content transition configurable so replacing an eight-second shot with a different duration does not require changing the page structure. A mouse parallax effect can remain a small, separate transform.

A video that plays well may still seek poorly

Test rapid scrolling and reversing with the web-delivery file, not only the original export. Resolution, compression, keyframe spacing, file size and the device's decoding performance affect how quickly a browser can reach another frame. Keep a first-frame poster visible while the film loads and check that the video host supports seeking.

Content must remain readable before JavaScript finishes loading. Offer a calmer presentation for visitors who prefer reduced motion and check a small phone as well as a desktop. Blend the final content panel using the same progress value; a delayed class switch can make the transition feel abrupt.

Replace the scene, then run the same checks

Swap the film, poster and scene-specific copy as one set. Preserve the direction of travel, the opening frame and the destination of the shot, then tune the playback range to the new media. Test the top, middle and bottom, scroll back to the start and wait without scrolling.

LUDGI website projects list the blueprint, prompt and files available for each item. Read the project's own materials and usage conditions before adapting it. A preview is evidence of the visual result; it is not a promise that every project uses the same framework or contains the same files.

Before you publish

• The first frame, poster and hero copy match the new concept.
• Scrolling advances, reverses and holds the actual video timeline.
• The final panel fades in continuously without a delayed jump.
• Phone cropping, loading and reduced-motion behavior are checked.

Continue making

Technical references

• HTMLMediaElement.currentTime — MDN
• prefers-reduced-motion — MDN