{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "velocity-skew",
  "type": "registry:component",
  "title": "VelocitySkew",
  "description": "The 'liquid scroll' feel — skews its children by scroll velocity (read from Lenis), clamped and eased back to flat. No second RAF loop.",
  "dependencies": [
    "gsap",
    "lenis"
  ],
  "registryDependencies": [],
  "tier": "free",
  "note": "Reads Lenis velocity via useLenis; needs a ReactLenis root.",
  "files": [
    {
      "path": "components/prism/VelocitySkew.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { useLenis } from \"lenis/react\";\nimport gsap from \"gsap\";\n\n/**\n * VelocitySkew — the \"liquid scroll\" feel: skews its children by scroll velocity,\n * clamped and eased back to flat. Reads Lenis velocity from the existing root\n * instance (no second RAF loop) and drives a gsap.quickTo for smoothing. Honors\n * prefers-reduced-motion.\n */\nexport function VelocitySkew({\n  children,\n  className = \"\",\n  strength = 0.5,\n  max = 8,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  /** velocity → degrees multiplier */\n  strength?: number;\n  /** clamp in degrees */\n  max?: number;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const skewTo = useRef<((v: number) => void) | null>(null);\n  const reduced = useRef(false);\n\n  useEffect(() => {\n    reduced.current = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    const el = ref.current;\n    if (!el || reduced.current) return;\n    skewTo.current = gsap.quickTo(el, \"skewY\", { duration: 0.5, ease: \"power3.out\" });\n    return () => {\n      gsap.killTweensOf(el);\n      skewTo.current = null;\n    };\n  }, []);\n\n  useLenis((lenis: { velocity: number }) => {\n    if (reduced.current || !skewTo.current) return;\n    const v = Math.max(-max, Math.min(max, lenis.velocity * strength));\n    skewTo.current(v);\n  });\n\n  return (\n    <div ref={ref} className={className} style={{ willChange: \"transform\" }}>\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/prism/VelocitySkew.tsx"
    }
  ]
}