proNew151 lines · framer-motion

Scroll Sticky Stack

Cards that queue up behind each other. A full-width scroll section where cards arrive one at a time and stack on top of each other, each new arrival shrinking and lifting the ones before it — driven entirely by the section's own scroll progress.

Use it for: A process or pipeline explainer where each stage should feel like it physically lands on top of the last.
Themes: Light + dark
License: Commercial use

Live

One pass, every signal

Cards that queue up behind each other

Scroll to bring each card forward. They never fully leave — they just settle a little further back.

Collect

Every event, log and metric lands in one place the moment it happens.

Correlate

Related signals across services get linked automatically, no manual tagging.

Decide

A ranked shortlist of likely causes, with the evidence for each one attached.

Resolve

One action applies the fix and leaves a record of exactly what changed.

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: cards arrive one at a time and stack on top of
 * each other, each new arrival shrinking and lifting the ones before it —
 * driven by the section's own scroll progress, not the window's.
 */

export interface StackCard {
  title: string;
  body: string;

The rest is in Pro.

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

Get Pro

How it behaves

→Scroll progress comes from useScroll targeted at this section only, not the window, so the effect is self-contained wherever it sits on a page.
→Each card's own entrance and later depth (scale, lift, stacking order) is computed from a per-card slice of the shared progress value via useTransform.
→At rest (0% scrolled) only the first card is in place and the rest wait below it, which is a correct, composed starting frame.
→Without a page to scroll (e.g. a library preview), autoplay drives the same progress value back and forth on a timed loop so the stacking motion is still visible.
→prefers-reduced-motion snaps straight to the fully-stacked end state.

Accessibility

✓Cards remain in normal reading order in the DOM regardless of their visual stacking, so screen readers see them in the intended sequence.
✓Numbered badges use real text content, not just colour, to mark order.
✓Honours prefers-reduced-motion by skipping the scroll-tied animation.
✓Honours prefers-reduced-motion.