proNew164 lines · framer-motion

Scroll Gallery

A horizontal card gallery that tracks a progress bar, not the clock. A row of cards that translates horizontally as progress advances, with a thin progress bar underneath, driven by scroll or by a self-contained autoplay loop; falls back to a plain horizontal-scroll strip under reduced motion.

Use it for: Walking through a short ordered sequence (a pipeline, a process, a set of steps) as a horizontal filmstrip instead of a vertical list.
Themes: Light + dark
License: Commercial use

Live

The loop

One loop, every run, start to finish.

Plan

Break the goal into steps it can actually run.

Build

Write, edit and test code across the repo.

Review

Hand the diff to a person before it merges.

Ship

Deploy behind the same gates your team uses.

Monitor

Watch cost, latency and errors in one place.

Learn

Feed outcomes back into the next run.

tsx

"use client";

import * as React from "react";
import { motion, useMotionValue, useMotionValueEvent, 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;
}

export interface ScrollGalleryProps {
  eyebrow?: string;
  title?: string;
  /** 0..1 override for the scroll progress. Set this to snapshot a frame (library previews, tests). */
  progress?: number;
  /** Animate progress 0→1→0 on a loop instead of following page scroll. Default true so the demo stays alive without scrolling. */
  autoplay?: boolean;
  /** How many cards from the pool to show. */
  count?: number;

The rest is in Pro.

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

Get Pro

How it behaves

→Progress is tracked with useScroll({ target }) against the section's own ref, never the window.
→With autoplay on (the default) progress loops 0→1→0 on a timer, and the section keeps a compact resting layout instead of claiming real scroll height.
→With autoplay off, the section becomes a tall sticky-scroll region and the card track pans as the reader scrolls.
→count controls how many cards from the built-in pool are shown (3 to 8); the horizontal distance is measured live so it always reaches the last card exactly.
→prefers-reduced-motion swaps the pinned, translating track for a plain horizontally-scrollable strip of the same cards.

Accessibility

✓The progress bar is a real `role="progressbar"` element with live min/max/now values.
✓Under reduced motion the gallery becomes natively scrollable with the keyboard and a scrollbar, instead of relying on any animation.
✓Honours prefers-reduced-motion.