{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scrubbable-video-reveal",
  "type": "registry:block",
  "title": "Scrubbable Video Reveal",
  "description": "Scroll either way. Every frame follows your hand like apple.com.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "clsx",
    "framer-motion",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/scrubbable-video-reveal.tsx",
      "type": "registry:component",
      "target": "@components/wensity/scrubbable-video-reveal.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  motion,\n  useScroll,\n  useTransform,\n  useMotionValueEvent,\n  useReducedMotion,\n} from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ScrubbableVideoRevealProps {\n  /** Image sequence URLs in order. Use 100–200 highly-compressed WebP / JPEG. */\n  frames: string[];\n  /** Aspect ratio for the canvas wrapper (e.g. \"16 / 10\"). */\n  aspect?: string;\n  /** Multiplier on the scroll travel — total inner = `travel × 100vh`. */\n  travel?: number;\n  /** Render the surrounding device frame. */\n  framed?: boolean;\n  /** Pin the canvas via `position: sticky` while user scrolls. */\n  sticky?: boolean;\n  /** Optional content rendered above the canvas (overlays). */\n  children?: React.ReactNode;\n  /** Use the window scroll instead of an inner scrollable container. */\n  useWindow?: boolean;\n  /** Loading strategy for the image preload. */\n  preload?: \"eager\" | \"lazy\";\n  /** Scroll container height (when `useWindow` is false). */\n  height?: string;\n  className?: string;\n}\n\n/**\n * ScrubbableVideoReveal\n *\n * Apple-grade scroll-scrubbed sequence. We never use a `<video>` tag —\n * temporal compression murders reverse-scrubbing. Instead we preload\n * every frame as an `Image`, map `scrollYProgress → frameIndex`, and call\n * `ctx.drawImage()` on every change. The canvas paints on the GPU.\n *\n * Notes:\n *  - Provide 100–200 frames. WebP keeps size sane.\n *  - We resize the canvas with `devicePixelRatio` so it stays sharp on retina.\n *  - We round to the nearest integer index so we don't redraw the same frame.\n *  - Reduced motion shows the final frame as a still: only that one image is\n *    fetched, there is no scroll travel, and scrolling never scrubs.\n */\n/**\n * Reduced-motion preference that is safe to read during render. Framer's\n * `useReducedMotion()` resolves on the first client render, while the server\n * always renders motion-on, so branching on it straight away breaks hydration.\n * This returns false for the server render and the hydration pass, then the\n * real preference right after. Client-only mounts get the real value at once.\n */\nconst subscribeToNothing = () => () => {};\nfunction useHydratedReducedMotion() {\n  const prefersReducedMotion = useReducedMotion() ?? false;\n  const hydrated = React.useSyncExternalStore(\n    subscribeToNothing,\n    () => true,\n    () => false,\n  );\n  return hydrated && prefersReducedMotion;\n}\n\nexport function ScrubbableVideoReveal({\n  frames,\n  aspect = \"16 / 10\",\n  travel = 3,\n  framed = true,\n  sticky = true,\n  useWindow = false,\n  children,\n  preload = \"eager\",\n  height = \"640px\",\n  className,\n}: ScrubbableVideoRevealProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const targetRef = React.useRef<HTMLDivElement>(null);\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const imagesRef = React.useRef<HTMLImageElement[]>([]);\n  const lastIndexRef = React.useRef<number>(-1);\n  const [loaded, setLoaded] = React.useState(0);\n  const reduceMotion = useHydratedReducedMotion();\n  const hydrated = React.useSyncExternalStore(subscribeToNothing, () => true, () => false);\n  const lastFrame = Math.max(0, frames.length - 1);\n  const expected = reduceMotion ? Math.min(1, frames.length) : frames.length;\n\n  /* ─── Preload frames ─── */\n  React.useEffect(() => {\n    let cancelled = false;\n    const arr: HTMLImageElement[] = [];\n    // Wait for the hydrated preference before fetching, so reduced motion\n    // never starts downloading the full sequence.\n    if (!hydrated) return;\n    let count = 0;\n    setLoaded(0);\n    frames.forEach((src, i) => {\n      if (reduceMotion && i !== lastFrame) return;\n      const img = new Image();\n      img.decoding = \"async\";\n      img.loading = preload === \"lazy\" ? \"lazy\" : \"eager\";\n      img.src = src;\n      img.onload = () => {\n        if (cancelled) return;\n        count++;\n        setLoaded(count);\n        if (reduceMotion ? i === lastFrame : i === 0) drawFrame(i);\n      };\n      arr[i] = img;\n    });\n    imagesRef.current = arr;\n    return () => {\n      cancelled = true;\n      imagesRef.current = [];\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [frames.join(\"|\"), reduceMotion, hydrated]);\n\n  /* ─── Resize canvas to its CSS box (DPR-aware) ─── */\n  const sizeCanvas = React.useCallback(() => {\n    const c = canvasRef.current;\n    if (!c) return;\n    const dpr = Math.min(window.devicePixelRatio || 1, 2);\n    const rect = c.getBoundingClientRect();\n    const w = Math.floor(rect.width * dpr);\n    const h = Math.floor(rect.height * dpr);\n    if (c.width !== w || c.height !== h) {\n      c.width = w;\n      c.height = h;\n      drawFrame(lastIndexRef.current >= 0 ? lastIndexRef.current : 0);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    sizeCanvas();\n    const onResize = () => sizeCanvas();\n    window.addEventListener(\"resize\", onResize);\n    return () => window.removeEventListener(\"resize\", onResize);\n  }, [sizeCanvas]);\n\n  /* ─── Frame painter ─── */\n  function drawFrame(index: number) {\n    const c = canvasRef.current;\n    const img = imagesRef.current[index];\n    if (!c || !img || !img.complete || img.naturalWidth === 0) return;\n    const ctx = c.getContext(\"2d\");\n    if (!ctx) return;\n    // Object-fit: cover behaviour.\n    const cw = c.width;\n    const ch = c.height;\n    const iw = img.naturalWidth;\n    const ih = img.naturalHeight;\n    const cr = cw / ch;\n    const ir = iw / ih;\n    let dw = cw;\n    let dh = ch;\n    let dx = 0;\n    let dy = 0;\n    if (ir > cr) {\n      // image wider than canvas → scale to height, crop width\n      dh = ch;\n      dw = ch * ir;\n      dx = (cw - dw) / 2;\n    } else {\n      dw = cw;\n      dh = cw / ir;\n      dy = (ch - dh) / 2;\n    }\n    ctx.clearRect(0, 0, cw, ch);\n    ctx.drawImage(img, dx, dy, dw, dh);\n    lastIndexRef.current = index;\n  }\n\n  /* ─── Scroll → frame index ─── */\n  const { scrollYProgress } = useScroll(\n    useWindow\n      ? { target: targetRef, offset: [\"start end\", \"end start\"] }\n      : {\n          container: containerRef,\n          target: targetRef,\n          offset: [\"start start\", \"end end\"],\n        }\n  );\n\n  const frameIndex = useTransform(scrollYProgress, (p) => {\n    const total = frames.length - 1;\n    return Math.round(Math.max(0, Math.min(1, p)) * total);\n  });\n\n  useMotionValueEvent(frameIndex, \"change\", (v) => {\n    if (reduceMotion) return;\n    if (v !== lastIndexRef.current) drawFrame(v);\n  });\n\n  /* ─── Markup ─── */\n  const innerHeight = `calc(${travel} * 100vh)`;\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative w-full\",\n        useWindow\n          ? \"\"\n          : \"scrollbar-hidden overflow-y-auto rounded-3xl border border-[var(--border)] bg-[var(--surface)]\",\n        className\n      )}\n      style={useWindow ? undefined : { height }}\n    >\n      <div\n        ref={targetRef}\n        className=\"relative w-full\"\n        style={{ height: reduceMotion ? undefined : innerHeight }}\n      >\n        <div\n          className={cn(\n            \"flex w-full items-center justify-center px-4 py-6 sm:px-8\",\n            sticky && !reduceMotion ? \"sticky top-0\" : \"relative\"\n          )}\n          style={!useWindow ? { height } : { height: \"100vh\" }}\n        >\n          <div\n            className={cn(\n              \"relative w-full max-w-4xl overflow-hidden rounded-2xl\",\n              framed\n                ? \"border border-[var(--border-strong)] bg-[#0a0a0b] p-2 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)]\"\n                : \"\"\n            )}\n            style={{ aspectRatio: aspect }}\n          >\n            <div className=\"relative h-full w-full overflow-hidden rounded-[14px] bg-black\">\n              <canvas\n                ref={canvasRef}\n                className=\"block h-full w-full\"\n                aria-label=\"Scrubbable video sequence\"\n              />\n              {/* Scanline shimmer while frames preload */}\n              {loaded < expected && (\n                <div className=\"pointer-events-none absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 py-2\">\n                  <div className=\"relative h-[3px] flex-1 overflow-hidden rounded-full bg-white/10\">\n                    <motion.div\n                      className=\"absolute left-0 top-0 h-full w-full origin-left bg-chili-500\"\n                      initial={{ scaleX: 0 }}\n                      animate={{ scaleX: loaded / Math.max(1, expected) }}\n                      transition={{ type: \"spring\", stiffness: 220, damping: 28 }}\n                      style={{ willChange: \"transform\" }}\n                    />\n                  </div>\n                  <span className=\"font-display text-[10px] tabular-nums text-white/72\">\n                    {loaded}/{expected}\n                  </span>\n                </div>\n              )}\n              {children && <div className=\"absolute inset-0\">{children}</div>}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-heading": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/scrubbable-video-reveal.tsx. For Pro components and updates, use pnpm dlx wensity@latest add scrubbable-video-reveal.",
  "categories": [
    "Cinematic Interactions",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "scrubbable-video-reveal",
      "access": "free",
      "category": "Cinematic Interactions",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/components/scrubbable-video-reveal",
      "shadcnUrl": "https://ui.wensity.com/r/scrubbable-video-reveal",
      "cliInstall": "pnpm dlx wensity@latest add scrubbable-video-reveal"
    }
  }
}