{
  "name": "fade-out",
  "type": "registry:ui",
  "description": "Held exit that accelerates away, timed to the last frame of its sequence by default",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "motion-wrapper",
    "timing"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/fade-out.tsx",
      "type": "registry:ui",
      "content": "import type { CSSProperties, ReactNode } from \"react\";\nimport { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { MotionWrapper } from \"@/remotion/lib/motion-wrapper\";\nimport { EASING_EXIT } from \"@/remotion/lib/timing\";\n\nexport type FadeOutProps = {\n  children: ReactNode;\n  /** Length of the fade in frames. */\n  durationInFrames?: number;\n  /**\n   * Frame the fade starts on. Left out, it lands on the last frame of the\n   * surrounding `<Sequence>` — the usual intent, and one less number to keep\n   * in sync when the window changes.\n   */\n  delayInFrames?: number;\n  /** Opacity it holds before the fade. */\n  from?: number;\n  /** Opacity it ends on. */\n  to?: number;\n  block?: boolean;\n  style?: CSSProperties;\n  className?: string;\n};\n\n/**\n * Holds, then leaves on an ease-in curve — an exit accelerates away, it never\n * decelerates into nothing.\n */\nexport const FadeOut: React.FC<FadeOutProps> = ({\n  children,\n  durationInFrames = 30,\n  delayInFrames,\n  from = 1,\n  to = 0,\n  block,\n  style,\n  className,\n}) => {\n  const frame = useCurrentFrame();\n  const { durationInFrames: windowFrames } = useVideoConfig();\n\n  const duration = Math.max(1, Math.round(durationInFrames));\n  const start =\n    delayInFrames ??\n    (Number.isFinite(windowFrames) ? Math.max(0, windowFrames - duration) : 0);\n\n  const opacity = interpolate(frame, [start, start + duration], [from, to], {\n    easing: EASING_EXIT,\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": [
      "exit"
    ]
  }
}