proNew160 lines · framer-motion

Scroll Horizontal Pan

Scroll down, read sideways. A full-width scroll section pinned in place while vertical scroll pans a row of panels horizontally, with a progress rail underneath that fills panel by panel.

Use it for: Walking through a short sequence of steps or product states without stacking a long column of screenshots.
Themes: Light + dark
License: Commercial use

Live

Scroll sideways, sort of

One axis for reading, another for moving

01
Draft
Start from a blank canvas or a saved template.
02
Arrange
Drag blocks until the layout reads the way you mean it.
03
Preview
See it at every width before anyone else does.
04
Publish
Ship it, then keep editing without a redeploy.
05
Measure
Watch what people actually do with it.

Draft

Start from a blank canvas or a saved template.

Arrange

Drag blocks until the layout reads the way you mean it.

Preview

See it at every width before anyone else does.

Publish

Ship it, then keep editing without a redeploy.

Measure

Watch what people actually do with it.

tsx

"use client";

import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useScroll, useTransform, type MotionValue } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width scroll section: vertical scroll drives a horizontal pan across
 * a row of panels pinned inside the viewport, like turning the page
 * sideways instead of down.
 */

export interface PanPanel {
  tag: string;
  title: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→A pinned, element-scoped useScroll progress maps directly to the horizontal x offset of the panel track.
→A row of progress segments below the panels fills in as each one comes fully into frame, each driven by its own slice of the shared progress value.
→At rest the first panel sits fully in frame and the rail shows nothing filled yet, a correct starting composition.
→autoplay pans the track back and forth on a timed loop when there's no real scroll to drive it, so a static preview still shows the motion.
→prefers-reduced-motion locks the track in place and fills the rail fully instead of animating the pan.

Accessibility

✓Panels stay in document order; nothing here relies on scroll position to make content reachable.
✓The progress rail is `aria-hidden`, purely decorative feedback for sighted scrolling.
✓Honours prefers-reduced-motion by disabling the horizontal pan.
✓Honours prefers-reduced-motion.