Skip to content
Black FridayBlack Friday launch price: Lifetime $149 until 30 Nov. Regular price $299 from 1 Dec.ends in 15d 03:13:33Get Lifetime →
loopkit
proNew200 lines · framer-motion

Scroll Feature Reveal

A device mock that walks through four steps as you move. A two-column 'how it works' section: numbered steps on the left highlight in turn while a phone or browser mock on the right cross-fades between matching screens, driven by scroll or by a self-contained autoplay loop.

Use it for
Explaining a multi-step product flow (connect, configure, run, review) with a visual that changes in sync, without needing a video.
Themes
Light + dark
License
Commercial use
Live

How it works

  1. 1

    Connect your tools

    Point it at the repo, the tracker, the docs. No migration, no new data lake.

  2. 2

    Set the guardrails

    Decide what runs on its own and what waits for a yes. Change it any time.

  3. 3

    Watch it work

    Plans, tool calls and cost show up in one timeline, live.

  4. 4

    Approve the rest

    It hands back exactly the decisions that need a person, nothing more.

Sources

RepoTrackerDocsChat
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 ScrollFeatureRevealProps {
  eyebrow?: 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;
  /** Full autoplay cycle length (0→1→0), in ms. */
  cycleMs?: number;
  /** Shape of the device mock. */

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, so it keeps working inside embeds and previews.
  • →With autoplay on (the default) progress loops 0→1→0 on a timer at cycleMs, and the section uses a compact resting layout instead of claiming real scroll height.
  • →With autoplay off, the section becomes a tall sticky-scroll region and progress follows the reader's actual scroll position instead.
  • →The active step's number badge and device screen cross-fade; inactive steps dim rather than disappear.
  • →device swaps the mock between a phone silhouette and a browser chrome silhouette.
  • →prefers-reduced-motion snaps straight to the final step with no loop and no scroll-linked motion.

Accessibility

  • ✓Step list is a real <ol>; the device mock is decorative chrome around text already present in the step list.
  • ✓Each device screen is hidden from the accessibility tree while inactive (`aria-hidden`) so screen readers only see the current one once, not four stacked copies.
  • ✓All motion — loop, scroll-link and cross-fade — stops under prefers-reduced-motion.
  • ✓Honours prefers-reduced-motion.