{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grayscale-reveal",
  "title": "Grayscale Reveal",
  "description": "Grayscale → color image reveal — grayscale(1) fades to grayscale(0) alongside opacity, on a slow ease.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://motion.asmitsah.dev/r/provider.json"
  ],
  "files": [
    {
      "path": "components/motion/grayscale-reveal.tsx",
      "content": "\"use client\";\n\nimport { useReducedMotion } from \"motion/react\";\nimport * as m from \"motion/react-m\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { durations, ease, grayscaleReveal, viewportOnce } from \"@/lib/motion\";\n\ntype Props = {\n  children: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  delay?: number;\n  trigger?: \"inView\" | \"mount\";\n};\n\n/**\n * Grayscale → color reveal, for images — `grayscale(1)` fades to `grayscale(0)`\n * alongside opacity, on `durations.slow` (filter animation reads best unhurried).\n *\n * `filter` isn't stripped by the reducedMotion=\"user\" provider (only transforms\n * are), so reduced-motion renders the final color state with a plain opacity\n * fade instead of animating the filter.\n */\nexport function GrayscaleReveal({\n  children,\n  className,\n  style,\n  delay = 0,\n  trigger = \"inView\",\n}: Props) {\n  const reduceMotion = useReducedMotion();\n  const transition = { duration: durations.slow, ease: ease.out, delay };\n  const target = reduceMotion ? { opacity: 1 } : grayscaleReveal.animate;\n  const initial = reduceMotion ? { opacity: 0 } : grayscaleReveal.initial;\n  const play =\n    trigger === \"mount\"\n      ? ({ animate: target } as const)\n      : ({ whileInView: target, viewport: viewportOnce } as const);\n\n  return (\n    <m.div className={className} style={style} initial={initial} {...play} transition={transition}>\n      {children}\n    </m.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/motion/grayscale-reveal.tsx"
    }
  ],
  "type": "registry:component"
}