Scrollhouse
A scroll-scrubbed cinematic site theme: one continuous pre-rendered camera flight from a dusk exterior into the interior and back out, filmed natively for both desktop and mobile. Available to license and rebrand.
Most "cinematic" websites are one of two things: a looping video background that ignores the visitor entirely, or CSS parallax that slides flat layers past each other. Neither gives the feeling the format promises — that the visitor is moving through a real place, at their own pace, in control. The hard version is a genuine camera flight the scroll wheel drives: scroll down and the camera moves forward through the space, stop and it stops, scroll back and it reverses. Done naively it is enormous — a WebGL scene, 3D assets, a render budget, and a performance problem on every phone.
Pre-render the flight instead of computing it. The camera move is generated once as five chained eight-second clips, each starting from the previous clip's final frame so the seams are continuous and the whole thing reads as one unbroken take. At runtime the browser is only seeking a video — no 3D, no physics, no WebGL, and a dependency-free engine under 500 lines. The part most builds skip: phones. A 16:9 flight letterboxed or centre-cropped into a portrait viewport throws away the composition. So the entire flight was generated a second time in native 9:16, and the engine picks the right encode per viewport. Most traffic is mobile, so the mobile cut is not the compromise version. Encoding matters more than it looks. A short keyframe interval is what makes scrubbing feel attached to the scroll — a long GOP makes every seek visibly mushy — so the clips are encoded at low -g and cached immutably.
The surface area we built.
Scroll-scrubbed continuous flight
Five scenes, frame-locked seams, no cuts. Scroll position maps directly to camera position — forward, paused, or reversed, at the visitor's pace.
Two native films, not one crop
Desktop 16:9 and mobile 9:16 are separately composed and separately encoded. The engine serves the right one per viewport.
Copy and CTAs pinned into the film
Per-scene headline, body and tags fade in over the moving image, and the pricing cards pin into the film's held final frame rather than waiting below the fold.
Static, fast, and cheap to host
Fully static Next.js — no database, no API routes, no server runtime. Assets are immutably cached; the whole site is a CDN read.
Security baseline shipped, not optional
HSTS with preload, tight CSP, X-Frame-Options, Referrer-Policy, deny-all Permissions-Policy, no X-Powered-By.
Documented to rebrand
Brand assets regenerate from one script, colours are CSS variables, and the README documents the two engine patches, the re-encode recipe, and every step to make it yours.
Live demo deployed. The film's scenes are deliberately generic — a house, a wall device, an operations centre — so it fits home security and monitoring, smart home, solar, HVAC and home services, remodelling, and residential real estate. Licensed per project; contact for pricing.
Want something like this?
We ship premium sites fast — AI-native, end-to-end, signed where it matters.