{
  "name": "fade-in",
  "type": "registry:ui",
  "description": "Opacity-only entrance, with an exit that lands on the end of its sequence",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "motion-primitive",
    "motion-wrapper"
  ],
  "compat": {
    "remotion": "^4.0.0"
  },
  "files": [
    {
      "path": "registry/bases/default/primitives/fade-in.tsx",
      "type": "registry:ui",
      "content": "import { interpolate } from \"remotion\";\nimport {\n  useEnterExit,\n  type MotionPrimitiveProps,\n} from \"@/remotion/lib/motion-primitive\";\nimport { MotionWrapper } from \"@/remotion/lib/motion-wrapper\";\n\nexport type FadeInProps = MotionPrimitiveProps & {\n  /** Opacity the fade starts from. */\n  from?: number;\n  /** Opacity the fade settles on. */\n  to?: number;\n};\n\n/**\n * Opacity alone — no transform, so it composes with anything already moving.\n *\n * The curve spends the whole duration here instead of leading it the way the\n * transform primitives do: with nothing travelling underneath, a fade that\n * finishes early just reads as a short fade.\n */\nexport const FadeIn: React.FC<FadeInProps> = ({\n  children,\n  from = 0,\n  to = 1,\n  block,\n  style,\n  className,\n  ...motionProps\n}) => {\n  const { motion } = useEnterExit(motionProps);\n  const opacity = interpolate(motion, [0, 1], [from, to], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  return (\n    <MotionWrapper block={block} className={className} style={{ ...style, opacity }}>\n      {children}\n    </MotionWrapper>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "core",
    "tags": [
      "enter"
    ]
  }
}