Cinematic Scroll moving through multiple visual worlds
One sentence in. A cinematic, scroll-driven website out.
Live site ·
Real 3D flagships ·
Install ·
Normal / Studio
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.
- 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.
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.
| Aether Four Movements 01 · Aether — Four Movements Object · World · Field · Figure · WebXR |
Nexus Immersive 02 · Nexus — Immersive Lab Particles · wave physics · procedural field |
| Volumetric Aether 03 · Aether — Make Weather Raymarched cloud volume · zero assets |
Obsidian 04 · Obsidian — Refract It Physical transmission · PMREM · bloom |
| Atelier Marne 05 · Atelier Marne — Walk the Gallery Architectural flythrough · image-based light |
Verdant 06 · Verdant — Enter the Bloom Instanced foliage · pollen · god-rays |
| Aureus 07 · Aureus — Enter the Vault Raymarched 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. |
The motion grammar stays consistent; the art direction does not. Browse the complete visual collection, including every original editorial and all eleven visual systems.
| Live example | Direction | Code |
|---|---|---|
| Classic Touch | Renaissance editorial | Source |
| Maya Torres | Brutalist creative studio | Source |
| Vantascope | Editorial sci-fi | Source |
| Maison Solenne | Quiet luxury | Source |
| Bloom | Playful product story | Source |
| Atelier Nocturne | Kinetic editorial | Source |
| Digital Wealth | Financial product story | Source |
| Kern | Typography calibration | Source |
| Meridian | symmetric monument | Source |
| Vanta Labs | clinical noir | Source |
| Polly & Plot | storybook geometry | Source |
| Obsidian | temporal monument | Source |
| Farsight | atmospheric sublime | Source |
| Keepsake | warm scrapbook | Source |
| Drift | naturalistic drift | Source |
| Concrete / Orange | brutalist kinetic | Source |
| Chroma | liquid chrome | Source |
| Verdant Press | botanical editorial | Source |
| Signal | data cinematic | Source |
| Wellness | A slower editorial study | Source |
| Retro | A playful digital throwback | Source |
The visual systems live in themes/. The components live in components/. They are starting points, not a fixed house style.
The normal edition is the complete, useful product—not a trial.
| Normal · free forever | Studio · for repeat practice |
|---|---|
| Build complete cinematic websites | Build on accumulated project knowledge |
| Story and motion planning | Intent-based pattern retrieval |
| 28 references + 11 visual systems | Reuse tracking across builds |
| Components and Real 3D patterns | Learned variants from your own language |
| Doctor + five-profile browser proof | Deeper iteration without starting cold |
| Optional TasteHQ matching | Proprietary Motif Engine |
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
All paths install the same normal edition.
npx skills add MustBeSimo/cinematic-scroll-skill
npx cinematic-scroll-skill npx cinematic-scroll-skill --dir .cursor/skills
openclaw skills install cinematic-scroll
The ClawHub edition is a lean, text-only normal edition with the complete story,
implementation, interaction, 3D, accessibility, and verification workflow. Its
source lives in skills/cinematic-scroll/ and is
gated by NVIDIA SkillSpector in CI without a suppression baseline.
/plugin marketplace add MustBeSimo/cinematic-scroll-skill
/plugin install cinematic-scroll@mustbesimo
git clone https://github.com/MustBeSimo/cinematic-scroll-skill ~/.claude/skills/cinematic-scrollFor Claude Desktop, Cursor, Hermes, and alternative OpenClaw paths, see COMPATIBILITY.md.
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.
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.
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.
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.
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.
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.
npm install
npm testThe 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.
- 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.
MIT © 2026 Simone Leonelli. See LICENSE.
Built something with it? Submit it to the showcase or email simone@w230.net.