# Animated Scroll Websites with Claude Code: Skills & Prompts

https://createmotion.io/guides/animated-websites-with-claude-code/ · Written by motif with Claude Fable 5.1 · Facts checked 2026-10-27

Start with CSS scroll-driven animations for reveals and simple parallax, add GSAP ScrollTrigger with Lenis when a section must pin or scrub, and give every effect a prefers-reduced-motion fallback. Four free skills and two written tutorials cover the Claude Code workflow. Paid libraries appear only with a dated price, and vendor claims are marked as theirs.

Note: **Version of 27 October 2026.** Every repository, price and post below was checked on that date. Prices and catalogue counts change, so the makers' own pages are linked for re-checking. motif has not tested the paid libraries.

### Short answer

Use CSS scroll-driven animations first. They cover fade-and-rise reveals and simple parallax with no JavaScript, but MDN lists the animation-timeline property as Limited availability, not Baseline, on 27 October 2026, so wrap the rules in @supports and keep the page readable without them ([MDN: animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)). Reach for GSAP ScrollTrigger when a section must pin or scrub, and add Lenis only if you want inertial smooth scrolling. GSAP is free for all users, with Webflow’s support ([GSAP pricing](https://gsap.com/pricing/)), and Lenis is MIT ([Lenis README](https://github.com/darkroomengineering/lenis)). Three.js is the route for 3D scenes keyed to scroll. Whatever you pick, give every effect a prefers-reduced-motion branch; that media feature has been Baseline since January 2020 ([MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)).

### Which technique fits which effect?

Scroll techniques Claude Code can write, and the library each needs (checked 2026-10-27)

| Effect | Use | Why |
| --- | --- | --- |
| Fade-and-rise reveal, simple parallax | CSS animation-timeline with scroll() or view(), inside an @supports block | No JavaScript; the browser drives it. Limited availability on MDN, so the static fallback matters |
| Pin a hero while a timeline plays | GSAP ScrollTrigger with pin: true and scrub | pin, scrub, snap and pinSpacing are built in; markers draw start and end lines while you tune |
| Inertial smooth scrolling | Lenis, synced to ScrollTrigger through the GSAP ticker | A few KB, MIT, respects reduced motion by default; the README ships the sync snippet |
| 3D scene or camera flight keyed to scroll | Three.js (MIT, r186 released 2026-09-24) driven by one scroll value | Real 3D depth, but the most work to keep smooth on phones |
| Menus, cards, modals, text swaps | CSS transitions, for example the transitions.dev snippets | Not scroll-driven; each snippet ships with a prefers-reduced-motion guard |

Zumkai's tutorial gives a three-question triage: is there a pin, is there a scrub, is there parallax at distinct speeds? Three no answers mean CSS scroll-driven animations suffice; one yes justifies GSAP ScrollTrigger ([Zumkai, 2026-09-19](https://zumkai.com/en/post/gsap-scroll-claude-code)). Its other rule: never run GSAP's ScrollSmoother and Lenis on the same page, because both drive scroll position and fight over pins. motif's summary: [Cinematic scroll with GSAP + Lenis in Claude Code](https://createmotion.io/articles/cinematic-scroll-with-gsap-lenis-in-claude-code-pin-scrub-and-parallax-with-63ad4df0301d/).

### Free skills for Claude Code

Claude Code loads a skill from ~/.claude/skills/skill-name/SKILL.md for every project on your machine, from .claude/skills/skill-name/SKILL.md inside one repository, or from a plugin as /plugin-name:skill-name ([Claude Code docs: Skills](https://code.claude.com/docs/en/skills)). Claude Code skills follow the Agent Skills open standard, which the docs say works across multiple AI tools. The four below are the ones we read in full; GitHub stars and push dates are from 27 October 2026. More motion skills, GSAP's own included, are listed in [Agent skills for motion](https://createmotion.io/resources/agent-skills/).

Free skills for animated websites, checked on GitHub 2026-10-27

| Skill | What it does | Licence and stars | Install |
| --- | --- | --- | --- |
| [nateherkai/scroll-craft](https://github.com/nateherkai/scroll-craft) | A full scroll-driven site workflow: brief, one of eight page grammars, a feeling curve with one peak, build, then a Playwright pass that screenshots desktop, mobile and reduced-motion states. It uses its own engine (scrollcraft.js with data-sc attributes), not GSAP | MIT; 4,102 stars; last push 2026-09-30 | /plugin marketplace add nateherkai/scroll-craft, then /plugin install nateherk-design; or ask Claude Code to read its SKILL.md |
| [elayadesign/ai-design-skills: landing-page-design](https://github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md) | Landing-page structure, copy rules and a strict visual system. Its motion section fixes one easing curve, allows transform and opacity only, triggers reveals with IntersectionObserver or Framer Motion's whileInView, and replaces movement with an opacity change under reduced motion | MIT; 8,523 stars; last push 2026-10-26 | Copy the skill folder into .claude/skills/ |
| [emilkowalski/skills](https://github.com/emilkowalski/skills) | UI motion taste: animate, review-animations, animation-performance, find-animation-opportunities and more. Not scroll-specific; use it to judge easing, duration and the frame budget of what Claude wrote | MIT; 50,454 stars; last push 2026-10-11 | npx skills@latest add emilkowalski/skills |
| [Jakubantalik/transitions.dev](https://github.com/Jakubantalik/transitions.dev) | CSS transitions for cards, menus, modals and text; the repo counts 43+, Pro ones included. The README says each copied snippet carries a prefers-reduced-motion guard. Not scroll-driven | Custom licence, quoted below; tooling MIT; 5,818 stars; last push 2026-10-25 | npx skills add Jakubantalik/transitions.dev |

**Disclosures.** scroll-craft needs Node 18+, a full FFmpeg build and playwright-core with Chrome. Generated assets are optional, need a KIE AI API key and are not free; building from your own photos and footage needs no key ([scroll-craft README](https://github.com/nateherkai/scroll-craft)). Its ten-site rebuild was done with Codex, not Claude Code. Emil Kowalski's README links his own newsletter and his Sonner toast library. The landing-page-design skill credits Leon Lin's taste-skill for parts of its content, both MIT. transitions.dev sells Pro and Business plans for its Pro transitions; the free set and the skill need no plan.

Note: **transitions.dev licence, quoted** ([LICENSE](https://github.com/Jakubantalik/transitions.dev/blob/main/LICENSE)). You and any coding agent working for you may "use them in unlimited personal and commercial projects", "copy, paste, and modify them freely", "ship them to end users as part of your own product or website" and "install and run the skills in any coding agent (Claude Code, Cursor, GitHub Copilot, Codex, Gemini CLI, and others)". The one restriction: "you may not redistribute the library itself" as "a competing transitions library, motion pack, or animation kit". Templates that bundle the transitions need a Pro, Business or Lifetime plan.

### Step by step: a pinned hero with GSAP and Lenis

1. Start a plain Vite project and install both libraries: npm create vite@latest, then npm install gsap lenis ([ScrollHaus, a vendor](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/)).
2. Register ScrollTrigger and bridge Lenis to it before any trigger exists: lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add(time => lenis.raf(time * 1000)); gsap.ticker.lagSmoothing(0). Without the bridge, pins compute wrong positions and timelines fire early ([Lenis README](https://github.com/darkroomengineering/lenis); [Zumkai](https://zumkai.com/en/post/gsap-scroll-claude-code)).
3. Give Claude Code structure, not adjectives. Start from the one-line prompt Zumkai quotes from the iart-ai web-animation-skills repo, "Build a pinned hero section that scrubs a timeline to scroll with GSAP", then name the sections, which layer takes the pin, the scrub length (Zumkai's example uses end: "+=150%" and scrub: 1), the mobile behaviour and where Lenis enters.
4. Ask for gsap.matchMedia with two branches: full pin, scrub and parallax under (prefers-reduced-motion: no-preference), and a static, legible version with no pin or scrub under reduce ([Zumkai](https://zumkai.com/en/post/gsap-scroll-claude-code); [GSAP ScrollTrigger docs](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)).
5. Keep markers: true while tuning and switch it off before publishing. If start and end positions drift, call ScrollTrigger.refresh() after images and fonts load; positions are computed once, not every frame ([GSAP ScrollTrigger docs](https://gsap.com/docs/v3/Plugins/ScrollTrigger/); [ScrollHaus](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/)).
6. Animate the children of the pinned element, never the pinned element itself, and check the reserved pin space on a narrow screen; ScrollTrigger adds pinSpacing padding by default so the content below does not jump ([GSAP ScrollTrigger docs](https://gsap.com/docs/v3/Plugins/ScrollTrigger/); [Zumkai](https://zumkai.com/en/post/gsap-scroll-claude-code)).

#### Section by section, the ScrollHaus way

ScrollHaus sells scroll-driven site templates ([scrollhaus.ai](https://scrollhaus.ai/)), and its guide opens with a disclosure that ScrollHaus publishes it and that the examples are its own sites ([ScrollHaus, 2026-10-06](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/)). Its method works without buying anything: pick one live reference site, write a structured brief, then ask Claude Code for one section at a time and check each in the browser before the next. Report faults as you see them ("the reveal fires too early", "the headline wraps to three lines on mobile"). For a cinematic pinned hero it extracts frames from a clip with FFmpeg at 24 fps as WebP and has Claude scrub a canvas image sequence over 300vh. Its launch checklist asks for real HTML headings and copy over any canvas, a reduced-motion fallback, and compressed, cached images and frames. If Claude adds libraries you did not ask for, it says to list the allowed ones in the prompt. motif's summary: [How to Make an Animated Website With Claude Code](https://createmotion.io/articles/how-to-make-an-animated-website-with-claude-code-2026-6d65f3c414d5/).

### Copyable prompts

Each prompt names its author. Replace the bracketed parts with your own.

#### 1. Pinned hero (iart-ai example, structured as Zumkai advises)

Build a pinned hero section that scrubs a timeline to scroll with GSAP. Sections in order: [list]. The [layer] takes the pin; the timeline runs over end: "+=150%" with scrub: 1. Use Lenis for smooth scrolling, synced through the GSAP ticker with lagSmoothing(0). On phones, [shorter scrub or no pin]. Wrap everything in gsap.matchMedia with a static branch for prefers-reduced-motion: reduce. Do not add libraries beyond gsap and lenis. The first sentence is the iart-ai example prompt as quoted by [Zumkai](https://zumkai.com/en/post/gsap-scroll-claude-code); the structure lines follow Zumkai's advice.

#### 2. Structured brief for a whole marketing site (ScrollHaus, a vendor)

Build a single-page marketing site for [brand], [one-line description]. Sections: hero, three feature rows, proof/testimonials, pricing, footer CTA. Style: [reference site], dark background, large serif headline, restrained palette. Motion: Lenis smooth scrolling; GSAP ScrollTrigger reveals (fade+rise, stagger 0.1s); a pinned hero that scrubs a canvas image sequence from /frames/f_0001.webp to f_0144.webp over 300vh. Respect prefers-reduced-motion. Mobile-first, no horizontal scroll. Keep headlines as real HTML text. Do not add libraries beyond gsap and lenis. Quoted from [ScrollHaus](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/), which sells site templates.

#### 3. CSS-first reveals with no JavaScript (motif)

Add scroll reveals to this page with CSS scroll-driven animations only: animation-timeline: view() on each section, a short rise and fade using transform and opacity, no JavaScript. Put the rules inside @supports (animation-timeline: view()) so browsers without support show the content static and fully visible. Under @media (prefers-reduced-motion: reduce), remove the movement and keep only a short opacity change. Do not add libraries. Written by motif from the MDN pages linked in this guide.

#### 4. Raw Three.js scroll site with builder and critic rounds (Chris, @everestchris6)

The one full creator-own prompt for a scroll-driven website in the motif archive on 27 October 2026 is Chris's Three.js brief, archived as [this is the only prompt you need to one-shot a studio-level 3d website with claude opus 5.5](https://createmotion.io/motions/x-2107877188351791308/) (posted 2026-10-07). It asks for raw Three.js with an import map and no build step, "one smooth scroll value drives everything", each chapter rendered to its own render target, pins that ease in and out over at least 0.1 viewport heights, and "respect prefers-reduced-motion with an instant scroll and still frames". It is long: separate builder and critic agents score each element against a reference in rounds, and a Playwright recorder films the scroll at 60 fps for a motion check. Disclosure: it generates imagery with a paid image model on Replicate and asks you to set an image budget first; the Opus 5.5 credit is the creator's claim.

### Paid libraries, with the price on the day we checked

Note: **ScrollTide** ([scrolltide.co](https://scrolltide.co/)) sells prompts with source code for scroll-driven and 3D sites, written to paste into Claude, Cursor or v0. Prices on 27 October 2026: $39 a month, $144 a year, and a $299 lifetime price marked early access; all sales are final ([pricing](https://scrolltide.co/pricing)). The site listed 131 templates, plus 66 components, 55 shaders, 20 sections and 14 UI screens ([scrolltide.co](https://scrolltide.co/)); 6 of the templates are free ([free templates](https://scrolltide.co/free)). The 3D collection and the MCP for Claude, Cursor and Codex come with Yearly and Lifetime only ([pricing](https://scrolltide.co/pricing)). Disclosure: Aman Singh (@amananimates), who says he built the React component library on scrolltide.co, promotes it on X ([2026-10-25 post](https://x.com/amananimates/status/2114355065389818194)). The site’s footer links @himanshubuildss on X, whose [2026-10-24 post](https://x.com/himanshubuildss/status/2114085316147716265) promotes ScrollTide with his own prompt count; the counts above are what the site showed on 27 October. motif has not tested the templates.

Note: **Scroll Shaders** ([scrollshaders.com](https://scrollshaders.com/pricing)) sells WebGL2 shader backgrounds as React components, HTML snippets, MP4 loops and stills. Prices on 27 October 2026: $29 a month, $129 a year, and $239 lifetime, shown as a launch offer with a countdown timer, for 164 shaders and components. Monthly opens up to 10 new items a week, and all sales are final. The vendor says its components pause off-screen, cap pixel density and show a still frame under reduced motion; motif has not verified this.

### Accessibility and performance checklist

- Branch on prefers-reduced-motion: reduce in CSS, in gsap.matchMedia, and in Lenis, where respectReducedMotion is on by default. Replace movement with a short opacity change or a still frame; never hide content. Scaling or panning large objects can trigger vestibular motion disorders ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion); [Lenis README](https://github.com/darkroomengineering/lenis)).
- Animate transform and opacity by default; not width, height, top or margin, and never transition: all. The frame budget is 16.7 ms at 60 fps and 8 ms on a 120 Hz screen, which the skill says most phones now have ([emilkowalski/skills: animation-performance](https://github.com/emilkowalski/skills/blob/main/skills/animation-performance/SKILL.md)).
- Keep headlines and copy as real HTML over any canvas or WebGL scene, so search engines and screen readers get the text ([ScrollHaus](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/); [scroll-craft SKILL.md](https://github.com/nateherkai/scroll-craft/blob/main/plugins/nateherk-design/skills/scroll-craft/SKILL.md)).
- Reserve pin space and animate the children of a pinned element, not the element itself ([GSAP ScrollTrigger docs](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)).
- Call ScrollTrigger.refresh() after fonts and images load; start and end positions are calculated once and on resize, not continuously ([GSAP ScrollTrigger docs](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)).
- Serve a smaller frame set to phones, cap canvas pixel ratio at 2, and show a poster frame first so the largest contentful paint is fast ([ScrollHaus](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/)).
- Test on a mid-range phone, not only a laptop ([ScrollHaus](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/)). Hand the browser check to Claude Code: Zumkai uses Playwright MCP and Chrome DevTools MCP, scroll-craft runs its own Playwright screenshot pass including a reduced-motion state ([Zumkai](https://zumkai.com/en/post/gsap-scroll-claude-code); [scroll-craft](https://github.com/nateherkai/scroll-craft)).
- Cut motion that delays reading: long intros, parallax under text, loops next to forms ([Zumkai](https://zumkai.com/en/post/gsap-scroll-claude-code)).

### What the motif archive shows

motif archives videos, not live sites, so scroll websites are rare in it. Of 3,791 entries on 27 October 2026, 757 carry a prompt, and 117 of those mention websites, landing pages, Three.js, GSAP, WebGL or scrolling in the prompt or post. Nearly all of them ask for a video, such as a product promo, showreel or 3D render, not a live site; the one full scroll-website prompt we found is Chris's, above. Product promos are collected in [Product & UI](https://createmotion.io/explore/product-ui/), and 3D renders, Chris's prompt included, in [3D & Generative](https://createmotion.io/explore/3d-generative/). For motion projects that render to MP4 instead, start at [Quick start](https://createmotion.io/quick-start/); the GSAP agent skills in our list are under [Agent skills for motion](https://createmotion.io/resources/agent-skills/).

### FAQ

#### Does Claude Code need a skill to build scroll animations?

No. It writes GSAP, Lenis and CSS scroll-driven code from a structured prompt. The skills add a design standard and a checking pass: scroll-craft screenshots desktop, mobile and reduced-motion states with Playwright, and emilkowalski/skills reviews easing, duration and frame budget ([scroll-craft](https://github.com/nateherkai/scroll-craft); [emilkowalski/skills](https://github.com/emilkowalski/skills)).

#### CSS scroll-driven animations or GSAP ScrollTrigger?

CSS for reveals and simple parallax when you can accept a static fallback, since MDN lists animation-timeline as Limited availability on 27 October 2026 ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)). GSAP when a section must pin, scrub or snap. GSAP is free for all users ([GSAP pricing](https://gsap.com/pricing/)).

#### Do I need Lenis?

Only for inertial smooth scrolling; ScrollTrigger works on native scroll. If you add Lenis, sync it through the GSAP ticker and do not also run ScrollSmoother ([Lenis README](https://github.com/darkroomengineering/lenis); [Zumkai](https://zumkai.com/en/post/gsap-scroll-claude-code)).

#### Are the free skills allowed in commercial work?

scroll-craft, emilkowalski/skills and landing-page-design are MIT. transitions.dev allows unlimited commercial use but forbids redistributing the library as a competing product, and its Pro transitions need a paid plan ([transitions.dev LICENSE](https://github.com/Jakubantalik/transitions.dev/blob/main/LICENSE)).

#### Is ScrollTide worth paying for?

motif has not tested it, so no verdict. Its prices and catalogue counts are listed above with the date checked, and all sales are final ([ScrollTide pricing](https://scrolltide.co/pricing)). Aman Singh (@amananimates), who says he built the React component library on scrolltide.co, promotes it on X ([2026-10-25 post](https://x.com/amananimates/status/2114355065389818194)).

#### How do I handle prefers-reduced-motion?

Branch in CSS with @media (prefers-reduced-motion: reduce), in GSAP with gsap.matchMedia, and leave Lenis's respectReducedMotion at its default. Keep the content and replace movement with an opacity change or a still frame ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)).

### Sources

- [Zumkai: Cinematic scroll with GSAP + Lenis in Claude Code (2026-09-19)](https://zumkai.com/en/post/gsap-scroll-claude-code)
- [ScrollHaus (vendor): How to Make an Animated Website With Claude Code (2026-10-06)](https://scrollhaus.ai/blog/how-to-make-an-animated-website-with-claude-code/)
- [ScrollHaus home (vendor)](https://scrollhaus.ai/)
- [GitHub: nateherkai/scroll-craft](https://github.com/nateherkai/scroll-craft)
- [GitHub: nateherkai/scroll-craft SKILL.md](https://github.com/nateherkai/scroll-craft/blob/main/plugins/nateherk-design/skills/scroll-craft/SKILL.md)
- [GitHub: elayadesign/ai-design-skills, landing-page-design SKILL.md](https://github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md)
- [GitHub: emilkowalski/skills](https://github.com/emilkowalski/skills)
- [GitHub: emilkowalski/skills, animation-performance SKILL.md](https://github.com/emilkowalski/skills/blob/main/skills/animation-performance/SKILL.md)
- [GitHub: Jakubantalik/transitions.dev LICENSE](https://github.com/Jakubantalik/transitions.dev/blob/main/LICENSE)
- [GitHub: Jakubantalik/transitions.dev](https://github.com/Jakubantalik/transitions.dev)
- [GSAP docs: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)
- [GSAP pricing: free for all users](https://gsap.com/pricing/)
- [GitHub: darkroomengineering/lenis README](https://github.com/darkroomengineering/lenis)
- [GitHub: mrdoob/three.js](https://github.com/mrdoob/three.js)
- [MDN: CSS scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
- [MDN: animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)
- [Claude Code docs: Skills](https://code.claude.com/docs/en/skills)
- [ScrollTide home (vendor)](https://scrolltide.co/)
- [ScrollTide pricing (vendor)](https://scrolltide.co/pricing)
- [ScrollTide free templates (vendor)](https://scrolltide.co/free)
- [Scroll Shaders pricing (vendor)](https://scrollshaders.com/pricing)
- [@amananimates (Aman Singh) on X (2026-10-25)](https://x.com/amananimates/status/2114355065389818194)
- [@himanshubuildss on X (2026-10-24)](https://x.com/himanshubuildss/status/2114085316147716265)
- [@everestchris6 on X (2026-10-07), Three.js scroll-site prompt](https://x.com/everestchris6/status/2107877188351791308)