{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "smoke-dissolve",
  "title": "Smoke Dissolve",
  "description": "A smoke-ring shader transition that expands the ring outward to reveal the next scene.",
  "dependencies": ["remotion", "@remotion/transitions"],
  "registryDependencies": ["@remocn/shader-smoke-ring"],
  "files": [
    {
      "path": "registry/remocn/smoke-dissolve/index.tsx",
      "content": "\"use client\";\n\nimport type {\n  TransitionPresentation,\n  TransitionPresentationComponentProps,\n} from \"@remotion/transitions\";\nimport type React from \"react\";\nimport { AbsoluteFill, Easing, interpolate } from \"remotion\";\nimport { ShaderSmokeRing } from \"@/components/remocn/shader-smoke-ring\";\n\nconst clampOpts = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\nconst DEFAULT_COLORS = [\"#8f88ae\"];\n\nexport type SmokeDissolveProps = {\n  colorBack?: string;\n  colors?: string[];\n  speed?: number;\n};\n\nconst SmokeDissolvePresentation: React.FC<\n  TransitionPresentationComponentProps<SmokeDissolveProps>\n> = ({\n  children,\n  presentationProgress,\n  presentationDirection,\n  passedProps,\n}) => {\n  const {\n    colorBack = \"#141318\",\n    colors = DEFAULT_COLORS,\n    speed = 1,\n  } = passedProps;\n  const entering = presentationDirection === \"entering\";\n  const p = presentationProgress;\n\n  const radius = interpolate(p, [0, 1], [0, 1], clampOpts);\n  const scale = interpolate(p, [0, 1], [1, 2], clampOpts);\n  const thickness = interpolate(p, [0, 1], [1, 1.5], clampOpts);\n\n  const childStyle: React.CSSProperties = entering\n    ? {\n        opacity: interpolate(p, [0.55, 0.68], [0, 1], clampOpts),\n        scale: `${interpolate(p, [0.55, 1], [0.3, 1], {\n          ...clampOpts,\n          easing: Easing.out(Easing.cubic),\n        })}`,\n        filter: `blur(${interpolate(p, [0.55, 0.75], [10, 0], clampOpts)}px)`,\n      }\n    : { opacity: interpolate(p, [0.06, 0.13], [1, 0], clampOpts) };\n\n  return (\n    <AbsoluteFill>\n      {entering ? (\n        <AbsoluteFill style={{ pointerEvents: \"none\" }}>\n          <ShaderSmokeRing\n            speed={speed}\n            colorBack={colorBack}\n            colors={colors}\n            radius={radius}\n            scale={scale}\n            thickness={thickness}\n          />\n        </AbsoluteFill>\n      ) : null}\n      <AbsoluteFill style={childStyle}>{children}</AbsoluteFill>\n    </AbsoluteFill>\n  );\n};\n\nexport function smokeDissolve(\n  props: SmokeDissolveProps = {},\n): TransitionPresentation<SmokeDissolveProps> {\n  return {\n    component: SmokeDissolvePresentation,\n    props,\n  };\n}\n",
      "type": "registry:component",
      "target": "components/remocn/smoke-dissolve.tsx"
    }
  ],
  "type": "registry:component"
}