Skip to content
Get packs

Guide · Agent skill

How to use the Cinematic Scroll Storytelling agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

Cinematic Scroll Storytelling is an agent skill: a set of instructions and code patterns that tells an AI coding agent how to build websites where content animates as the visitor scrolls. This guide explains what the skill does, how to install it, how to ask for it, and what your project needs before it works. It is written for developers, designers and marketers who may never have used an agent skill before.

Cinematic Scroll StorytellingMengTo/Skills · MIT

Quick start

  1. 1Download and unzip the skill. Download the cinematic-scroll-storytelling ZIP from this page and unzip it into ~/.claude/skills/ or your project's .claude/skills/ folder.
  2. 2Install the libraries. Run npm i gsap lenis in your web project. Node.js and npm must already be installed.
  3. 3Set up a module-based project. Make sure your project uses a bundler or module imports, since the skill's code uses import statements for Lenis and GSAP.
  4. 4Ask for the effect in plain language. Describe the page and name the effects you want, or mention the skill directly with $cinematic-scroll-storytelling.
  5. 5Review the output on real devices. Check timing, readability and motion on desktop and mobile, and test with reduced motion enabled.
  6. 6Adjust the motion tokens. Tune durations, stagger and easing to match your brand, keeping motion subtle as the skill recommends.

What the skill makes the agent do

When the skill is active, the agent follows a playbook for premium editorial scroll pages. The playbook covers Lenis smooth scrolling, GSAP ScrollTrigger, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals and preloaders.

The skill also suggests a page structure: a preloader, a hero with image parallax and a masked headline, a word-by-word intro, story sections with fade-up and blur-in reveals, a sticky project stack, a gallery or proof section, and a footer reveal.

  • Motion tokens such as enter easing of power3.out or power4.out, reveal durations of 0.8s to 1.1s for text, and word stagger of 0.035s to 0.07s.
  • Guidance to keep motion subtle, avoid bounce or elastic easing, avoid aggressive scale jumps, and respect reduced-motion settings.
  • Warnings against scroll hijacking and against splitting text that contains links or meaningful inline markup.

Install the skill from the ZIP download

Download the ZIP of the cinematic-scroll-storytelling skill from this page. Unzip it so that the skill folder sits inside your skills directory. For a personal setup across all your projects, use ~/.claude/skills/. For a single project, use the .claude/skills/ folder inside that project.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

  • Personal install: ~/.claude/skills/
  • Project install: .claude/skills/ inside your project folder
  • Claude apps: Settings → Capabilities → Skills

Install the libraries the skill needs

The skill itself does not bring GSAP or Lenis. Your project needs Node.js and npm, then the skill's core stack is installed with npm. The skill also assumes a web project that uses a bundler or module imports, because its examples use import statements.

  • Node.js and npm installed on your machine
  • GSAP, including the ScrollTrigger plugin
  • Lenis smooth scroll library
npm i gsap lenis

Trigger the skill with natural requests

You do not need special syntax. Describe the page you want and mention the effect in plain words. The skill's description matches requests about scroll-driven storytelling, sticky project stacks, parallax, split text, preloaders, kinetic typography and section-by-section storytelling.

The demo prompt in the package names the skill directly with $cinematic-scroll-storytelling. Naming it is the most reliable way to make sure the agent uses it.

  • Build a one-page studio portfolio with a preloader, a parallax hero and a sticky stack of three project cards.
  • Use $cinematic-scroll-storytelling to add word-by-word reveals to my product landing page intro.
  • Review my scroll animations and suggest timing that feels calmer and more editorial.
  • Create a footer that slides up over the last section as the visitor reaches the bottom.

Review the example output before shipping

The skill ships a standalone demo (demo/index.html) and a prompt file (demo/PROMPT.md) that asks for a responsive reference demo with choreography and replay behaviour as the focus. Use them to see the intended feel before you adapt the patterns to your own content.

Treat the agent's output as a starting implementation. Check the pages on real devices, test with reduced motion turned on, and confirm that text remains readable and reachable with a keyboard and screen reader.

  • Open demo/index.html in a browser to see the reference behaviour.
  • Check that headings and body copy still read correctly when split into word spans.
  • Confirm the page still works with prefers-reduced-motion enabled.

What people use it for

  • A portfolio or studio homepage with a preloader, hero parallax and a sticky stack of recent projects.
  • A product landing page whose intro reveals word by word as the visitor scrolls.
  • A one-page brand story where each section fades up and blurs in once it enters the viewport.
  • A footer that reveals with a slow upward handoff at the end of a long page.

Frequently asked questions

Is the Cinematic Scroll Storytelling skill free to use?

The skill is published under the MIT licence, as shown on this page. The GSAP and Lenis libraries it depends on have their own licences, so check those before using them in a commercial project.

What do I need to install before using this skill?

You need Node.js and npm to install gsap and lenis, plus a web project that uses a bundler or module imports. The skill assumes both GSAP, including ScrollTrigger, and Lenis are available.

Where do I put the skill folder after downloading it?

Unzip it into ~/.claude/skills/ for a personal setup, or into .claude/skills/ inside a project for a project-only setup. In the Claude apps, upload it under Settings → Capabilities → Skills.

Does this skill run scripts or access the network?

According to this listing, the skill does not run scripts and does not use the network. It provides instructions and code patterns that the agent writes into your project.

Can I use this skill on a simple brochure or documentation site?

It is not recommended for those. Extra JavaScript animation adds load time and complexity, so a simple brochure or documentation site is better served by a plainer approach.

Is scroll animation accessible?

It can be if applied carefully. The skill advises respecting reduced-motion settings and avoiding scroll hijacking, and it hides split words from screen readers with an aria-label on the parent. Content-heavy or accessibility-critical pages still need careful testing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are building a portfolio, studio or one-page product story with editorial scroll animation and you are comfortable working with GSAP and Lenis. Pick something else for simple brochure or documentation sites, content-heavy pages, or projects that cannot use those two libraries.

Download the skill