On a standard website, scrolling reveals more page. Content sits below the fold, you move down, you see it.
On a cinematic site, scrolling advances a story. The section holds in place while something inside it changes. A camera moves. A sequence plays. Type assembles. The visitor is not moving down a document, they are moving through a narrative at a pace they control.
That distinction sounds like a design preference. It is actually a different construction.
The Mechanics
Pinning. A section locks to the viewport while scroll progress drives the animation inside it. The scrollbar keeps moving, the section does not, and the content transforms. This is the core move of the format.
Progress-driven animation. Instead of an animation firing once when an element enters view, its playhead is bound to scroll position. Scroll halfway and the animation is halfway. Scroll back up and it reverses. The visitor is scrubbing, not triggering.
Image sequence scrubbing. A shot is exported as an ordered frame sequence and drawn to a canvas at the frame matching scroll progress. This is how a product rotates or a camera flies through a space with complete user control. It is also the single heaviest technique in the format, which is why frame counts and dimensions get budgeted carefully.
Layered parallax and depth. Foreground, midground, and background moving at different rates to build dimensionality without any 3D rendering.
Choreographed transitions. Sections that hand off to each other deliberately rather than simply stacking, so the page reads as one continuous piece.
The Constraint That Governs Everything
The content has to exist in the HTML before any of this runs.
This is where scroll-led sites fail badly and invisibly. If a headline only enters the DOM after a scroll event fires, a crawler never sees it, and neither does a language model reading the page for an answer. The site looks extraordinary to humans and reads as empty to machines.
The correct build is server-rendered HTML with motion applied as a presentation layer on top. Everything the page says exists in the source. The animation controls how it arrives, never whether it exists. That principle is the same one behind the AI citability checklist.
Mobile Is a Separate Design, Not a Scale
A scroll experience tuned for a desktop trackpad feels wrong on a thumb. Scroll velocity differs, viewport height differs, and the device budget differs by an order of magnitude.
Practically that means shorter pin distances, fewer pinned sections, image sequences at reduced frame counts and dimensions, no hover dependencies, and honest fallbacks on constrained devices. A cinematic site that only works on a 16-inch laptop is not finished.
When It Earns Its Cost
It earns it when the visitor arrives to be convinced rather than to look something up. Resorts and luxury stays, event venues and festivals, architecture and premium real estate, product launches, and creator-led brands where the experience is the pitch.
It does not earn it when someone needs a phone number, a price, or a service area in four seconds. Motion in that context is a toll booth.
UM Media builds Cinematic Websites from $5,000, typically $6,000 to $10,000, with a 30-day post-launch refinement window included. See Advanced Web Experiences, or start at the web decision hub to confirm the right lane.