Wensity

Scrubbable Video Reveal

An Apple-style image sequence scrubbed frame by frame on canvas, following your hand as you scroll in either direction.

cinematic interactionsscrubbablevideorevealframer motion
Scrubbable Video Reveal component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add scrubbable-video-reveal

Usage

Import ScrubbableVideoReveal from @/components/wensity/scrubbable-video-reveal and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { ScrubbableVideoReveal } from "@/components/wensity/scrubbable-video-reveal";


const frames = Array.from({ length: 180 }, (_, i) =>
  `/sequence/frame-${String(i).padStart(4, "0")}.webp`
);


export function ScrubbableVideoRevealDemo() {
  return (
    <ScrubbableVideoReveal
      frames={frames}
      aspect="16 / 10"
      travel={3}
      framed
    />
  );
}

Props

PropTypeDefaultDescription
framesstring[]-Image sequence URLs in order. Prefer 100–200 compressed WebP / JPEG frames.
aspectstring"16 / 10"Aspect ratio for the canvas wrapper.
travelnumber3Scroll travel multiplier. Total inner height is travel × 100vh.
framedbooleantrueRender the surrounding device frame.
stickybooleantruePin the canvas via position sticky while the user scrolls.
childrenReact.ReactNode-Optional content rendered above the canvas as overlays.
useWindowbooleanfalseUse window scroll instead of an inner scrollable container.
preload"eager" | "lazy""eager"Loading strategy for image preload.
heightstring"640px"Scroll container height when useWindow is false.