Cinematic Scroll Websites . Agency OS

What it does

Builds a scroll film website. The top of the page is one unbroken shot that moves as the visitor scrolls, then hands over to the sections that sell: the offer, the booking, the contact. It is a process, not a template. It interviews you, pitches two or three named concepts with a scroll-by-scroll walkthrough of what the visitor sees, sets the art direction for your brand, then writes the page from scratch. There are two ways to make the film. Pure code is the default: motion, pinned scenes and reveals built in the page itself, with no accounts and no cost. Generated footage is opt-in: real video clips chained shot to shot through the video tool in your tool stack, on your own account and credits. The after-film sections are written from your offer and avatar, in your voice, with proof only from your verified claims.

Say this to start

This skill has no button. You start it by saying what you want. Any of these will do it:

> build me a cinematic website

> I want a scroll film site for my brand

> make a premium animated landing page

> one continuous shot website for [brand]

> a scrollytelling page for my launch

When to reach for it

a launch or a premium brand where the first impression is most of the sale
a client wants a site that looks nothing like the template sites their competitors run
you have one product, one offer or one story, and one page is enough to carry it
you want the look of footage-driven award sites without hiring a studio
you already ran the foundation builds and want a page that sells the real offer to the real avatar

When NOT to use it

If you actually want	Use this instead
the page inventory, city pages and internal linking of a multi-page service business site	`service-site-architect`
a diagnosis of a site that already exists	`seo-site-audit`
the funnel around the page: opt-in flow, sequences, CRM	`funnel-architect`
a plain landing page or component with no scroll film	`frontend-design`
a scored quiz or calculator	`interactive-lead-magnet`

Before you start

What you need	Why
The brand or product, and the feeling in one line	every concept is built around it; everything else has a "you decide" path	Required
A workspace: `_default` for your own site or `client--*` for a client build	the site is written into that workspace, and an existing build there is never overwritten without asking	Required
Brand DNA, avatar and offer from the foundation builds	the concepts speak your brand's voice and the sections below the film sell what you actually sell; without them the skill asks more questions	Optional
Your logo, colours, fonts or real photos	used if you have them; if not, the skill creates the look itself	Optional
A video generation tool named in your tool stack, with your own credits	only for the generated-footage film; without it the skill builds the pure-code film	Optional
Node, Chrome and ffmpeg on the machine	the screenshot and smoothness checks need Node and Chrome; the footage film needs ffmpeg, which the skill can download for you	Optional
`verified-claims.md` with real proof	testimonials, numbers, awards and client logos only appear on the page if they are in the registry	Optional

How it runs

InterviewAsks what you are building, the vibe, the journey from the first frame to the last, pure code or real footage, what comes after the film, and where it goes live. Anything the workspace already knows is confirmed in one line instead of asked again.
Concept pitchTwo or three named concepts, the recommended one first, each with a walkthrough of what the visitor sees as they scroll, the chapter count and, for footage, the estimated credits. You pick, blend, or say "you choose".
Art directionSets the palette, the type pairing, the logo lockup, the motion feel and the chapter names. One world per brand: two clients never get the same site.
Build the filmPure code: the page is written from scratch around the chosen concept. Footage: an opening frame, then clips chained so each one starts on the last frame of the one before, every seam measured, drafted cheap and mastered only on your approval.
Write the sections belowThe offer, proof, booking and contact sections, written from your offer and avatar in your voice.
Prove it worksScreenshots every chapter and runs a smoothness test on the scroll. A number it did not measure is never reported. Phones, touch screens and reduced-motion settings get a still poster version with all the content intact.
Ship checksSearch and social preview tags, structured data from your confirmed details, libraries stored with the site, then the claims check and the voice check on every line of copy.
Publish, if you say soUploads a lean copy to your own static host after you confirm. Without that, you get the folder.

What you get

A finished one-page site in site/cinematic/: the page, its libraries, the film frames and a social preview image
The concept pitch you chose from, kept for the record
Screenshots of every chapter and the measured smoothness result, or a plain note that the check could not run
A still poster version for phones and reduced-motion visitors, built into the same page
Search title, description, social preview tags and structured data built from your confirmed business details
An assets.md entry tagged cinematic-websites

Honest limits

Read this before you rely on it

The footage film needs your own video tool account and credits. The skill quotes the cost and waits for your yes before it spends anything.
Phones get a still hero, not the full scroll film. That is deliberate: it keeps the page fast and readable on small screens.
It builds one page. A service business that needs a page per service and per town needs service-site-architect instead.
Awards, press logos, client logos and review counts appear only if they are in your verified claims. With nothing there, the section is left out.
In Claude.ai and Cowork it runs the interview, the concepts, the art direction and the pure-code page. The screenshot checks and the footage film need a shell with Node and ffmpeg.

Where people go wrong

The mistake	Do this instead
Skipping the journey question and letting it guess from the brand name	Spend a minute on where the camera starts and where it ends. The journey is what makes the site.
Expecting the full film on a phone	Check the desktop build for the film and the phone build for the poster. Both are correct.
Mastering footage before the cheap draft chain is approved	Approve the draft chain first. Full resolution runs once, on the prompts you already liked.
Asking for a "trusted by" logo strip with no proof behind it	Add the real relationships to your verified claims first, or leave the strip out.
Uploading the whole build folder to the host	Publish the lean copy the skill prepares. Raw clips and keyframes stay local.

Worth knowing

The footage is the expensive part and the rest is not. One approved film can carry several looks: a new palette, a new product colourway or a new set of sections below the film costs no new generation.