cinematic-scroll
SolidDesign and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes responsive, reduced-motion and static fallbacks; not for ordinary dashboards or unrelated animation.
Install
Quality Score: 81/100
Skill Content
Details
- Author
- MustBeSimo
- Repository
- MustBeSimo/cinematic-scroll-skill
- Created
- 3 months ago
- Last Updated
- today
- Language
- JavaScript
- License
- MIT
Integrates with
Bundled in these plugins
Similar Skills
Semantically similar based on skill content — not just same category
scroll-cinema
Generate cinematic scrolltelling websites where scroll drives the narrative: Lenis smooth scroll, GSAP ScrollTrigger cinematic section reveals with fluid OKLCH color transitions, Three.js painted-texture shader backgrounds reactive to cursor, scroll, velocity, and chapter progress. Four modes — chapter-reveal (scroll-paced storytelling), painted-backdrop (reactive shader canvas), full-cinema (complete cinematic site), catalog (all shader presets side by side). This skill should be used when building storytelling websites, scroll-driven experiences, cinematic landing pages, or any page where sections reveal as chapters with color transitions and ambient 3D backgrounds. Triggers on scrollytelling, cinematic scroll, scroll-driven storytelling, Lenis smooth scroll, GSAP ScrollTrigger, scroll chapter reveal, scroll color transition, painted shader background, narrative scroll website, premium scroll experience, shader catalog.
scroll-cinema
Build scroll-driven "scroll-cinema" websites where scrolling scrubs a camera path instead of translating a document — pinned full-viewport stages, aperture/iris opens, continuous dolly moves, 3D card entries, stacked panels that dim as the next slides over, parallax copy, and masked staggered text reveals. Pure vanilla JS + CSS custom properties, no GSAP/ScrollTrigger/Lenis/Locomotive/Framer. Use this whenever someone wants a "premium agency site", a cinematic or immersive landing page, a scroll-triggered or scroll-scrubbed animation, a pinned/sticky section that animates as you scroll, a hero that transforms on scroll, an Awwwards-style or "expensive-looking" site, a scrollytelling piece, or references a site/reel whose scrolling animation they want reproduced. Also use it when someone asks whether a particular scroll animation is buildable, or wants an existing scroll effect debugged (janky scrubbing, sticky not sticking, animation stuck at its start state).
artistic_web_designer
Design and build art-directed, scroll-driven websites where a generated cinematic sequence is scrubbed by scroll — a story that reveals itself as the reader descends, with hand-authored rhythm, precise motion, and generated artwork produced through Higgsfield (Seedance / Nano Banana) via its MCP or CLI. Use this skill whenever someone wants a scroll-to-reveal, scrollytelling, cinematic, immersive, animated, "3D", parallax, or award-style landing page or hero; whenever they describe a site that should "unfold", "reveal itself", "feel like a film", or "take you somewhere" as you scroll; whenever a brand or studio site needs real art direction rather than a template; whenever generated video or imagery needs to drive a page's motion; and whenever an existing scroll experience desyncs, stutters, fails to reverse, or breaks on mobile or Safari. Also use it for the supporting craft: authoring scroll timelines, scrubbing image sequences on canvas, key-plate art direction, first/last-frame clip chaining, and drawing