Skip to content
Get packs

Horizontal Scroll Scenes

Build chapter-by-chapter pages that move sideways as you scroll down, with reliable reverse, skip and refresh

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

It teaches the agent how to build a web page where scrolling down moves the view sideways through a series of scenes, like a horizontal scrolling story or product tour. Each scene gets a resting pause, and the page is designed so that scrolling back, dragging the scrollbar, jumping to a section, or reloading the page all show the correct scene. It also covers transitions between scenes, chapter menus, progress indicators, keyboard and reduced-motion support.

Great for

  • Front-end developers building scrollytelling or multi-scene product tours
  • Designers who want a chapter-based scroll experience and need it to work on touch and keyboard
  • Developers whose wheel-driven slider keeps breaking on refresh, back navigation or touch

Skip it if

  • Simple vertical pages or standard carousels, where this added complexity is unnecessary
  • Sites that must work without JavaScript or need plain, accessible content flow, since the design depends on scripted scroll mapping and motion effects

Try asking

  • “Build a five-scene horizontal scroll product tour where scrolling down moves the camera left to right”
  • “Add a chapter index and progress bar to my scroll story that stays correct after a page reload”
  • “Make a scroll-driven chapter transition with a wipe between scenes and reduced-motion support”
Step-by-step guide: how to use Horizontal Scroll ScenesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    horizontal-scroll-scenes.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip horizontal-scroll-scenes.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip horizontal-scroll-scenes.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 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

  • Describe the number of scenes and whether you want a wipe or a pan transition so the agent picks the right pattern.
  • Ask for the demo.html approach if you want plain JavaScript, DOM and CSS rather than three.js.
  • Test the result by scrolling backwards, dragging the scrollbar and reloading mid-page before shipping.

What's inside

  • agents/openai.yaml
  • demo.html
  • PROMPT.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.