How to use the Horizontal Scroll Scenes agent skill

What the skill makes the agent build

The skill builds scene-by-scene chapters that advance left to right on one fixed stage while the user scrolls vertically. Native scroll is the only input, so there is no wheel hijacking and no scroll snapping.

Scroll position is the only state. One pure function turns scroll progress into a scene number, a resting dwell value and a move value on every frame, and everything on screen is drawn from those values. Because nothing is stored, scrolling back, dragging the scrollbar, jumping to a section or reloading the page all show the correct scene.

• Each scene gets a resting pause where only its own content animates.
• Transitions between scenes can be a burn-wipe or a pan.
• A chapter index and progress UI follow the current scene.
• Glide-to-scene links can skip intermediate scenes.
• Keyboard and reduced-motion behaviour are covered.

Install the skill from the ZIP

Download the ZIP for horizontal-scroll-scenes from this page and unzip it. The folder contains agents/openai.yaml, demo.html, PROMPT.md and SKILL.md.

For a personal install, unzip the skill into ~/.claude/skills/. To scope it to one project, unzip it into that project's .claude/skills/ folder instead.

In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.

Trigger the skill with a natural request

You do not need special syntax beyond naming the skill. The bundled PROMPT.md uses the form of mentioning the skill by name with a $ prefix, followed by a plain description of the result you want.

The skill's description lists the situations it fits: horizontal scrollytelling, multi-scene product tours, scroll down to travel sideways, chapter carousels driven by the wheel, and any wheel-jacked slider that breaks on touch, keys, refresh or back.

• Use $horizontal-scroll-scenes to turn this page into five scenes on one fixed stage that advance left to right as I scroll down.
• Use $horizontal-scroll-scenes to build a product tour with a chapter index, a burn-wipe between scenes and correct reverse and reload behaviour.
• Use $horizontal-scroll-scenes to make my chapter carousel work on touch and keyboard, and respect reduced motion.

Check the result: pacing, reverse, skip and reload

The skill sets the pace with a few constants: a dwell of 1.15 screens per scene, a move of 0.85 screens between scenes, and a page height derived from the number of scenes. The page height is calculated from the scene count, not a fixed pixel value, so it adapts to the screen.

Scroll progress is normalised by the scrollable distance, not a hard-coded pixel height. This matters on phones, where the collapsing address bar changes the viewport height during scrolling.

• Scroll forward, then back, and confirm each scene looks the same both times.
• Drag the scrollbar and jump to the end and back to the start.
• Reload the page partway down and confirm the correct scene appears.
• Test with a keyboard and with touch input.

Keep the motion accessible

Hidden chapters are set to visibility hidden and inert, so their links cannot be focused or read by screen readers. Index rows are real links with aria-current on the active row.

A polite live region announces a scene change only when a glide lands on a scene, not on every boundary crossed along the way. Ask the agent to honour reduced-motion settings as part of the request.