Cinematic Scroll

Make the page people remember.

Cinematic Scroll is a free, MIT-licensed craft skill for coding agents. It helps turn a product, portfolio, launch, or story into a distinctive website with deliberate art direction, scroll choreography, resilient motion, and evidence that the result actually works.

It is not a prompt pack and it is not a runtime dependency. The skill guides the agent; the finished website stays yours.

npx skills add MustBeSimo/cinematic-scroll-skill

Then ask:

Use cinematic-scroll to turn this product into a one-page story. Match the brand and assets in this project, create one memorable scroll reveal, and prove the mobile and reduced-motion versions.

No account, Studio purchase, TasteHQ key, or image-generation key is required.

What you get

• A content-led story and visual direction before effects are chosen.
• Standalone HTML for a fast first page, or integration into an existing app.
• Pinned chapters, parallax, scrubbed video, kinetic type, and real 3D patterns.
• Eleven swappable visual systems and nine reusable components.
• Progressive fallbacks for touch, reduced motion, missing JavaScript, and WebGL failure.
• A deterministic doctor plus browser proof across desktop, mobile, reduced-motion, and no-JS profiles.
• Optional TasteHQ brand matching when a target URL or embedded grammar is available.

The agent chooses the lightest stack that can carry the story. Most pages do not need WebGL; when real depth matters, the same performance and fallback standards still apply.

See the proof

Seven Real 3D flagships

Seven live websites, seven different reasons to use depth. Every flagship is scrollable, source-visible, bounded by a performance budget, and backed by a designed fallback.

01 · Aether — Four MovementsObject · World · Field · Figure · WebXR	02 · Nexus — Immersive LabParticles · wave physics · procedural field
03 · Aether — Make WeatherRaymarched cloud volume · zero assets	04 · Obsidian — Refract ItPhysical transmission · PMREM · bloom
05 · Atelier Marne — Walk the GalleryArchitectural flythrough · image-based light	06 · Verdant — Enter the BloomInstanced foliage · pollen · god-rays
07 · Aureus — Enter the VaultRaymarched liquid chrome · scroll flight	Explore the full Real 3D collection →Each demo now links to the collection and the next spatial experiment, so the seven sites work as one portfolio.

More than one aesthetic

The motion grammar stays consistent; the art direction does not. Browse 27 live references, including Renaissance editorial, clinical noir, quiet luxury, brutalist studio, botanical publishing, data cinematic, warm scrapbook, and liquid chrome.

The visual systems live in themes/. The components live in components/. They are starting points, not a fixed house style.

Normal and Studio

The normal edition is the complete, useful product—not a trial.

Use Normal for as many personal or commercial projects as you like. Use Studio when repeated work should compound into a visual memory.

Explore Studio → · Compare editions · See how the stack fits

Install

All paths install the same normal edition.

Skills registry

npx skills add MustBeSimo/cinematic-scroll-skill

npm installer

npx cinematic-scroll-skill
npx cinematic-scroll-skill --dir .cursor/skills

Claude Code marketplace

/plugin marketplace add MustBeSimo/cinematic-scroll-skill
/plugin install cinematic-scroll@mustbesimo

Git clone

git clone https://github.com/MustBeSimo/cinematic-scroll-skill ~/.claude/skills/cinematic-scroll

For Claude Desktop, Cursor, Hermes, and OpenClaw paths, see COMPATIBILITY.md.

Two build modes

Mode A — a section or standalone page

Use this for a hero, a campaign page, or a fast concept. The output can be one runnable HTML file with no build step.

Build a self-contained pinned hero for this brand. Keep the page readable without JavaScript and give touch devices a natural-flow version.

Mode B — a full release site

Use this for multi-chapter stories and existing React/Next.js products. The skill preserves the installed framework and scroll provider, then integrates the sequence at a real route.

Build a complete release story for this product inside the existing app. Reuse its design system, create one signature moment, and verify the built route.

The included templates/nextjs/ project is available when a new Next.js scaffold is actually needed. Generated media through fal.ai is optional; demo mode and local assets work without a key.

Quality is a gate

cinematic-doctor scores static craft and exits non-zero below the chosen threshold:

npm run doctor -- examples/flagship/index.html

The end-to-end verifier combines contract checks with browser evidence:

node tools/verify/verify-build.mjs ./index.html --phase polish

For a full interaction matrix:

node tools/page-proof/matrix.mjs ./index.html --out .verify/page-proof

That matrix covers desktop, mobile/touch, reduced motion on both layouts, and JavaScript disabled. A requested check that cannot run reports INCOMPLETE; a failed check reports FAIL. Neither is dressed up as success.

Install browser-tool dependencies once with npm install in the skill directory. Chrome or Chromium is needed only for screenshot proof, not to generate a standalone page.

Design system and architecture

SKILL.md                    compact agent contract and workflow router
design.md + tokens/        DTCG color, type, spacing, and motion contract
themes/                    eleven one-file visual systems
components/                nine named patterns in HTML and React
references/                story, build, motion, performance, 3D, and XR guidance
examples/                  live references, prompts, and Real 3D flagships
templates/nextjs/          optional full-site starter
tools/cinematic-doctor/    deterministic static quality gate
tools/page-proof/          browser screenshots and interaction matrix
tools/verify/              one-command verification orchestration
tools/tastehq/             optional brand query and score adapter
evals/                     triggering and workflow behavior checks

The main contract is SKILL.md. It routes to detailed references only when the build needs them, keeping agent context smaller and decisions clearer.

One choreography, two media

scroll-choreography.json is a declarative timing source that can compile to a webpage timeline and launch-film markers. See compile-choreography.mjs and the compilation contract.

Real 3D assets

The flagship can run procedurally before any model arrives. When assets are available, ASSETS-3D.md defines GLB/USDZ formats, scale, pivots, triangle caps, materials, camera nodes, and manifest paths so the upgrade is data—not a rewrite.

Develop and verify this repo

npm install
npm test

The test suite checks tokens, themes, links, skill mirrors, components, the doctor, evals, benchmark behavior, verification semantics, browser-matrix orchestration, package contents, and the TasteHQ adapter.

Useful commands:

npm run tokens:check
npm run themes:check
npm run components:doctor
npm run proof -- examples/noir/index.html
npm run bench -- https://example.com

CinematicBench is the companion passive benchmark for pacing, performance, accessibility, and motion craft.

Principles

• Content and brand lead; effects follow.
• Use real 3D only when spatial depth carries meaning.
• One scroll clock, reversible setup, and no global teardown.
• Mobile is a composition, not a shrunken desktop.
• Reduced motion restores readable flow; it does not merely set duration to zero.
• A static poster or readable page is a designed state, not an apology.
• References inform direction without copying assets, logos, text, or exact compositions.

License

MIT © 2026 Simone Leonelli. See LICENSE.

Built something with it? Submit it to the showcase or email [email protected].