ProScroll

Horizontal Rail

Scroll down, travel sideways: a pinned rail of panels with parallax.

Loading
Usage 
import { HorizontalRail } from "./HorizontalRail";

<HorizontalRail>
  <article>
    <img data-parallax src="/one.jpg" alt="…" />
  </article>
  {/* …one child per panel */}
</HorizontalRail>

About

A section that turns vertical scroll into a horizontal journey. It measures its own rail and sets its height to match, so the last panel lands flush as the section ends and the page carries on. Images marked data-parallax drift against the rail, the panels lean a few degrees when you scroll fast and settle when you stop, and a progress line with a 02 / 06 counter tracks where you are.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    HorizontalRail.tsx + HorizontalRail.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
↕ScrollNewPro
Open live demo →

Aperture Zoom

Scroll

A framed image that opens to full-bleed as you scroll, parting the headline.

↕ScrollNewFree
Open live demo →

Ink Reveal

Scroll

A paragraph that fills in word by word as you scroll through it.

↕ScrollNewPro
Open live demo →

Stack Scroll

Scroll

Cards that pin and pile into a deck as you scroll.