Recap Story Scroll

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<RecapStoryScroll />

Installation

Usage

Assembled from compound components: RecapStoryScroll is the scroll-snap container, each RecapScene is one scene, and inside a scene you choreograph the data with RecapStat (oversized numbers) and RecapReveal (relay reveals). The container height is set through className, and each scene fills the container's full height.

import {
  RecapStoryScroll,
  RecapScene,
  RecapStat,
  RecapReveal,
} from "@/components/ui/recap-story-scroll";

<RecapStoryScroll autoPlay className="h-[560px]">
  <RecapScene background="#100a24" label="Prologue">
    <RecapReveal>
      <p className="text-7xl font-bold">2025</p>
    </RecapReveal>
  </RecapScene>

  <RecapScene background="#1c0b33" label="Listening">
    <RecapStat value={48210} suffix=" minutes" label="Total listening time" />
    <RecapReveal delay={0.35}>
      <p className="text-sm text-white/70">That is 33 days without a break.</p>
    </RecapReveal>
  </RecapScene>

  <RecapScene background="#0a2418" label="Epilogue">
    <RecapReveal>
      <p className="text-4xl font-bold">Thanks for your 2025</p>
    </RecapReveal>
  </RecapScene>
</RecapStoryScroll>

Props

RecapStoryScroll

RecapScene

RecapStat

RecapReveal

How it works

• Scene-by-scene settling: the container is a snap-y snap-mandatory scroll area with each scene filling its height; a single IntersectionObserver picks whichever scene is closest to the viewport as the settled scene.
• Data reveal: the components inside a scene read from context whether their scene has settled. RecapStat counts up from 0 and scales in when the scene settles, and resets to zero when it leaves so it can replay; RecapReveal staggers by delay, which is how the keywords relay passage by passage within a single scene.
• Whole-scene color change: the background color is driven by the settled scene's background, transitioning smoothly on the container's base layer (backgroundColor is interpolatable). This component is an immersive dark canvas, so give each scene a fairly dark background and adjust the text color through className where needed.
• Autoplay: autoPlay starts after mount and advances one scene every autoPlayInterval; it pauses automatically when the user interacts with the wheel or by touch, and you can also switch scenes by hand with the buttons in the top-left.
• Keyword relay: the bottom lists each scene's label in order, lighting up the settled scene's keyword and fading the rest, forming a baton-passing index of the narrative.

Accessibility

• When the user has "reduce motion" enabled at the system level, the scroll-snap layout and the content are kept (everything is shown directly) while the count / scale reveals, the whole-scene color transition, and autoplay are disabled, and jumping between scenes becomes an instant scroll.
• The scroll area is focusable and supports scene-by-scene navigation with the arrow keys, PageUp, PageDown, Home, and End; any keyboard or mouse interaction pauses autoplay.
• The progress dots on the right are native buttons that can be focused with the keyboard and clicked to jump scenes, with the settled scene marked aria-current; the play button carries aria-pressed and an aria-label.
• Each scene carries aria-roledescription="scene" and an aria-label; the counting layer of RecapStat is hidden from assistive technology and announces its final value through aria-label.