{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inset-frame-reveal",
  "title": "Inset Frame Reveal",
  "description": "Window settle — a uniform clip-path frame insets in from the edges, then opens to reveal.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://motion.asmitsah.dev/r/provider.json"
  ],
  "files": [
    {
      "path": "components/motion/inset-frame-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 { insetFrameReveal, revealTransition, viewportOnce } from \"@/lib/motion\";\n\ntype InsetFrameRevealProps = {\n  children: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  delay?: number;\n  trigger?: \"inView\" | \"mount\";\n};\n\n/** Window settle — a uniform clip-path frame insets in from the edges, then opens to reveal. */\nexport function InsetFrameReveal({\n  children,\n  className,\n  style,\n  delay = 0,\n  trigger = \"inView\",\n}: InsetFrameRevealProps) {\n  const reducedMotion = useReducedMotion();\n\n  // `clip-path` isn't stripped by the provider's reducedMotion=\"user\" (transforms only),\n  // so when reduced motion is on, skip the frame entirely and render the settled state.\n  if (reducedMotion) {\n    return (\n      <div className={className} style={style}>\n        {children}\n      </div>\n    );\n  }\n\n  const play =\n    trigger === \"mount\"\n      ? ({ animate: insetFrameReveal.animate } as const)\n      : ({ whileInView: insetFrameReveal.animate, viewport: viewportOnce } as const);\n\n  return (\n    <m.div\n      className={className}\n      style={style}\n      initial={insetFrameReveal.initial}\n      transition={{ ...revealTransition, delay }}\n      {...play}\n    >\n      {children}\n    </m.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/motion/inset-frame-reveal.tsx"
    }
  ],
  "type": "registry:component"
}