Cinematic Scroll Storytelling
Build premium, scroll-driven landing pages with smooth scrolling and layered reveals
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
When installed, the agent gets a detailed playbook for building websites where content animates as the visitor scrolls, such as text that reveals word by word, cards that stack on top of each other, and background images that move at different speeds. It supplies code patterns using the GSAP and Lenis JavaScript libraries, timing values, a suggested page structure, and guidance to keep motion subtle and respect reduced-motion settings. The skill is only partly visible from the files provided: the SKILL.md is shown in full, but the REFERENCES.md, demo files and remaining sections were not fully reviewed.
Great for
- Front-end developers building a portfolio, studio or product landing page with editorial-style scroll animation
- Designers who want an agent to draft a scroll-based page concept with consistent motion timing
- Marketers commissioning a premium one-page story and needing a starting implementation
Skip it if
- Simple brochure or documentation sites where extra JavaScript animation adds load time and complexity
- Accessibility-critical or content-heavy pages, since scroll hijacking and split text can hurt readability and screen reader output if misapplied
- Projects that cannot use GSAP or Lenis licences or dependencies, as the skill assumes both libraries
Try asking
- “Build a cinematic landing page for my architecture studio with a preloader, parallax hero and sticky project cards”
- “Add a word-by-word kinetic text reveal to my product intro section using GSAP ScrollTrigger”
- “Create a smooth-scrolling story page with footer parallax and subtle fade-up reveals”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
cinematic-scroll-storytelling.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip cinematic-scroll-storytelling.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip cinematic-scroll-storytelling.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Ask the agent to keep motion subtle and to test with reduced-motion enabled, as the skill recommends
- Limit the number of simultaneous scroll effects per section to keep the page readable
- Review the generated npm install commands and versions before running them in your project
What's inside
- demo/index.html
- demo/PROMPT.md
- REFERENCES.md
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.