Create cinematic scroll-driven websites with pinned chapter reveals, multi-depth parallax, 3D tilt, and environment-morphing backgrounds. Use single self-contained sections or full Next.js release sites with optional AI visuals and a built-in audit mode to score scroll experiences.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Built with the skill itself · adapts to your GitHub theme: dark → Petroleum Editorial, light → Swiss Museum
▶ Watch the 30-second demo ·
⚡ Two 3D / WebXR flagships, live ↓
A free, MIT-licensed craft skill that gives any coding agent — Claude, Cursor, Hermes, OpenClaw — the taste to build cinematic, scroll-driven websites. Describe the aesthetic — palette, mood, references — and get a visual system, motion storyboard, pinned chapters, multi-depth parallax, 3D tilt, and full release pages art-directed to match. The motion is the constant · the look is yours · the agent is your choice. It's a skill, not a plugin — the craft travels with you across every agent.
Free for any use, personal or commercial (MIT). Actively developed — built from production work and shipped open source. Issues, PRs, and showcase submissions welcome — I collect what people build.
Built by Simone Leonelli · [email protected]
Cinematic Scroll isn't a prompt pack — it's a craft contract: plan the motion, build the scene, compile it to web and video, then run a doctor that catches cinematic slop before it ships. cinematic-doctor scores any build 0–100 across taste, performance, a11y, mobile, tokens, and 3D — and exits non-zero below threshold, so quality is CI-blockable, not a vibe.
npm run doctor -- examples/noir/index.html
It already scores the bundled examples (noir 87, luxe 88) and the 3D/WebXR flagship (100). The same scroll-choreography.json compiles to the website and its launch film — one choreography, two media.
node tools/cinematic-doctor/cli.mjs examples/luxe/index.html # → score + per-category breakdown
npm run doctor -- examples/flagship/index.html # → 100
The doctor exits non-zero below 80, so you can wire it into CI and block builds that score under the bar. Its runtime twin, tools/page-proof/, opens the build in headless Chromium and returns console errors + scroll screenshots — contract and evidence:
npm run proof -- examples/noir/index.html
The look is the user's, but it's no longer improvised. A machine-readable design contract now drives every build:
npx claudepluginhub mustbesimo/cinematic-scroll-skill --plugin cinematic-scrollComprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Jeffallan