Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsScroll Narrative Craft
Turn ordinary scrolling into cinematic, high-framerate web stories with parallax, pinned sequences, and reveals that stay accessible.
Free
Scroll Narrative Craft
Example session with this skill installed
We're rebuilding our e-bike landing page in the app/ directory (index.html, styles.css, main.js). I want a scroll-driven story: an atmospheric hero with a parallax mountain scene, then a pinned three-step breakdown of the battery technology, then a word-by-word reveal of the tagline before the buy CTA. Use plain HTML/CSS/JS and pull in GSAP only where it's genuinely needed. It has to degrade gracefully with prefers-reduced-motion enabled, run smoothly on phones under 768px, and keep all the copy crawlable for SEO. Give me the beat sheet first, then the code.
- Read your context and instructions
- Compiled the scroll narrative craft
- Generated the design tokens stylesheet
Summary
Rebuilt the e-bike hero into a five-beat scroll narrative: atmospheric parallax cover, pinned battery breakdown, word-level tagline reveal, quiet progress rail, CTA outro. Everything degrades to static, fully readable content under reduced motion.
| Metric | Before | After |
|---|---|---|
| Scroll beats | 1 flat hero | 5 paced beats, each with exit condition |
| Mobile framerate | 28-42 fps, layer jank | 58-60 fps, transform/opacity only |
| Pin length | 3200px trapped section | 1800px scrubbed stage + progress rail |
| Reduced-motion users | Text hidden behind reveals | Full static content, no motion |
| Scroll listeners | 4 unthrottled handlers | 1 passive rAF loop, destroyed on unmount |
Patterns applied: CSS animation-timeline: view() with @supports fallback for one-shot reveals; three-layer parallax at 15% / 40% / 75% depth driven by CSS custom properties from a single rAF loop; word split with staggered 35ms delays triggered by IntersectionObserver.
Next steps
- Replace placeholder /sky.jpg and /hills.jpg with compressed, crop-to-render-size WebP layers
- Run the 10-point QA checklist on iOS Safari; address-bar collapse shifts vh units
- Add chapter markers if the battery section grows past three pinned steps
sky.jpg
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Static landing pages often fail to hold attention, but over-engineered scroll animations frequently break accessibility and performance. This skill bridges the gap by treating vertical movement as a cinematic timeline without sacrificing readability or speed. It provides a structured approach to building scroll-driven narratives using industry-standard tools like GSAP and Framer Motion alongside native CSS techniques.
What it does
- Multi-engine implementation provides code patterns for GSAP ScrollTrigger, Framer Motion, and native CSS Scroll Timelines.
- Narrative beat mapping helps you structure content into opening, orienting, complicating, and reveal phases.
- Optimized parallax depth implements multi-layer background motion using performant
transformandopacityproperties. - Pinned sequence management handles complex step-by-step product tours and data reveals that lock the viewport.
- Accessibility enforcement includes automatic support for
prefers-reduced-motionand keyboard navigation.
How it works
- Define the beat sheet by outlining the information structure, visual anchors, and exit conditions for each scroll section.
- Select the animation engine based on complexity, ranging from lightweight
IntersectionObserverto full GSAP scrubbing. - Build the layers using CSS variables and a safe requestAnimationFrame loop to prevent layout thrashing and stutter.
- Apply mobile overrides to disable battery-heavy background motion on small screens while maintaining content flow.
Frameworks & tools
Specific implementation patterns are provided for GSAP (ScrollTrigger), Framer Motion, React, and native CSS/JavaScript. It focuses on modern web standards like dvh units and the animation-timeline property.
Why this beats prompting it yourself
Generic AI prompts often produce "janky" scroll code that triggers layout thrashing or breaks on mobile devices. This skill enforces professional performance budgets and accessibility standards that keep text readable even during motion.
Use cases
- Product walkthroughs that reveal features sequentially as the user scrolls.
- Data storytelling where charts and insights build dynamically based on scroll progress.
- Cinematic landing pages that use depth and parallax to establish brand atmosphere.
- Interactive reports that guide readers through long-form content with progress indicators.
Known limitations
Does not support legacy browsers that lack IntersectionObserver or CSS variables. Requires manual cleanup of library instances in SPA frameworks to prevent memory leaks.
CSS Scroll Timeline support is still uneven across browsers, so older Safari relies on the JavaScript fallbacks. Guidance assumes hand-coded frontends; visual page builders like Webflow get less direct benefit.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
1 use
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 26 days ago
- Free with an Agensi account
Permissions
File Scopes
Needs read/write access to your frontend source files to add scroll patterns, styles, and scripts; no network access is required.