{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion",
  "title": "Motion",
  "description": "The scroll-reveal motion utilities — FadeIn, Stagger and StaggerItem plus the shared EASE constant.",
  "dependencies": [
    "motion@^12.42.2"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/motion.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\n/**\n * Scroll-reveal motion utilities — the shared kit every animated marketing\n * block builds on. `FadeIn` reveals a single element as it scrolls into view;\n * `Stagger` + `StaggerItem` cascade a group of children.\n *\n * All three gate on `useReducedMotion()`: with reduced motion the transforms\n * drop away and only a gentle opacity change (or nothing) remains.\n *\n * The shared easing `EASE` — a gentle, slightly overshooting ease-out — is the\n * Nexus signature curve; reuse it for any bespoke motion so the whole site\n * moves with one voice. It matches the CSS `cubic-bezier(0.2, 0.7, 0.2, 1)`\n * shipped in the theme.\n */\n\n/** The shared easing curve used across every animated marketing surface. */\nexport const EASE = [0.2, 0.7, 0.2, 1] as const\n\ninterface FadeInProps {\n  children: React.ReactNode\n  /** Seconds to delay the reveal — stagger sibling reveals by hand. */\n  delay?: number\n  className?: string\n  as?: \"div\" | \"section\"\n}\n\nfunction FadeIn({ children, delay = 0, className, as = \"div\" }: FadeInProps) {\n  const reduce = useReducedMotion()\n  const Tag = as === \"section\" ? motion.section : motion.div\n  return (\n    <Tag\n      className={className}\n      initial={{ opacity: 0, y: reduce ? 0 : 16 }}\n      whileInView={{ opacity: 1, y: 0 }}\n      viewport={{ once: true, margin: \"-10% 0px -10% 0px\" }}\n      transition={{ duration: 0.5, ease: EASE, delay }}\n    >\n      {children}\n    </Tag>\n  )\n}\n\ninterface StaggerProps {\n  children: React.ReactNode\n  className?: string\n  /** Seconds between each child's reveal (default 0.08). */\n  stagger?: number\n}\n\nfunction Stagger({ children, className, stagger = 0.08 }: StaggerProps) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.div\n      className={className}\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={{ once: true, margin: \"-10% 0px -10% 0px\" }}\n      variants={{\n        hidden: {},\n        visible: { transition: { staggerChildren: reduce ? 0 : stagger } },\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nfunction StaggerItem({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.div\n      className={className}\n      variants={{\n        hidden: { opacity: 0, y: reduce ? 0 : 14 },\n        visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE } },\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nexport { FadeIn, Stagger, StaggerItem }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/motion.tsx"
    }
  ],
  "type": "registry:block"
}