ma68foysal

Claude Scrollytelling Skill — Development skill for Claude Code

Development community

Claude skill + Claude Code plugin that builds award-level scrollytelling websites: products that open, spray and travel as you scroll.

How to install Claude Scrollytelling Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open ma68foysal/claude-scrollytelling-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Scrollytelling Skill does

Claude skill + Claude Code plugin that builds award-level scrollytelling websites: products that open, spray and travel as you scroll. GSAP ScrollTrigger + Lenis, one HTML file.

Alternatives in Development

Microsandbox — Open-source self-hosted MicroVM sandboxes with sub-200ms startup, hardware-level isolation via libkrun 5k ★
Ian Xiaohei Scenes — Xiaohei 2.0 Codex Skill for Chinese real-object article illustrations and long-scroll story images 486 ★
Travel Plan Viz — Migo · 旅行领航 —— 把旅行行程生成为单文件、可离线、手机优先的 HTML（交互地图+每日时间轴+出发前提醒） 347 ★

README

Scrollytelling Skill for Claude

**Teach Claude to build award-level scroll-animated websites.** Describe a product, and Claude designs and codes a homepage where the product opens, twists, sprays and travels between sections as you scroll, with smooth scrolling, pinned scenes and copy that lands beside it at the right moment.

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE) ![Claude Skill](https://img.shields.io/badge/Claude-Skill-D97757) ![Claude Code Plugin](https://img.shields.io/badge/Claude_Code-Plugin-5A4FCF) ![GSAP ScrollTrigger](https://img.shields.io/badge/GSAP-ScrollTrigger-88CE02) ![Lenis](https://img.shields.io/badge/Lenis-smooth_scroll-111111)

![Four homepages built with this skill](docs/cover.jpg)

What it does

Ask Claude for something like *"a scroll-animated homepage for a perfume brand"*. With this skill installed, Claude:

Proposes a concept: a brand, a palette, two typefaces and one ambient motif that comes from the product (mist for perfume, bubbles for soda, pollen for a botanical cream).
Writes a scene-by-scene storyboard before any code.
Picks how to render the product: drawn in code so every part can move, cut out of real photos, or a mix of both.
Builds one self-contained HTML file with GSAP ScrollTrigger and Lenis. There is no build step: open it in a browser.
Checks its own work at phone and desktop sizes, scene by scene, and fixes what it finds.

The skill carries everything learned from building real demos: a scene catalogue with working code, a starter template, a particle engine that dissolves a real product photo into its ingredients, engineering rules that prevent the common scroll-animation bugs, art-direction guidance, and two helper scripts for photos.

Built with this skill


LIORA Rose Glow Serum: the real bottle photo dissolves into dust that streams out and assembles into its ingredients (a rose, orange slices and an aloe lea