{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swirl-dissolve",
  "title": "Swirl Dissolve",
  "description": "A swirl shader transition that unwinds open and winds shut to reveal the next scene.",
  "dependencies": ["remotion", "@remotion/transitions"],
  "registryDependencies": ["@remocn/shader-swirl"],
  "files": [
    {
      "path": "registry/remocn/swirl-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 { ShaderSwirl } from \"@/components/remocn/shader-swirl\";\n\nconst clampOpts = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\nconst DEFAULT_COLORS = [\"#1f1d29\", \"#413d56\", \"#8f88ae\"];\n\nexport type SwirlDissolveProps = {\n  colors?: string[];\n  colorBack?: string;\n  bandCount?: number;\n  softness?: number;\n  speed?: number;\n};\n\nconst SwirlDissolvePresentation: React.FC<\n  TransitionPresentationComponentProps<SwirlDissolveProps>\n> = ({\n  children,\n  presentationProgress,\n  presentationDirection,\n  passedProps,\n}) => {\n  const {\n    colors = DEFAULT_COLORS,\n    colorBack = \"#141318\",\n    bandCount = 10,\n    softness = 0.35,\n    speed = 1,\n  } = passedProps;\n  const entering = presentationDirection === \"entering\";\n  const p = presentationProgress;\n\n  const twist = interpolate(p, [0.1, 0.42, 0.64, 1], [1, 0, 0, 1], {\n    ...clampOpts,\n    easing: Easing.bezier(0.42, 0, 0.58, 1),\n  });\n\n  const childStyle: React.CSSProperties = entering\n    ? {\n        opacity: interpolate(p, [0.77, 0.87], [0, 1], clampOpts),\n        scale: `${interpolate(p, [0.77, 1], [0.3, 1], {\n          ...clampOpts,\n          easing: Easing.out(Easing.cubic),\n        })}`,\n        filter: `blur(${interpolate(p, [0.77, 0.93], [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          <ShaderSwirl\n            speed={speed}\n            twist={twist}\n            colors={colors}\n            colorBack={colorBack}\n            bandCount={bandCount}\n            softness={softness}\n          />\n        </AbsoluteFill>\n      ) : null}\n      <AbsoluteFill style={childStyle}>{children}</AbsoluteFill>\n    </AbsoluteFill>\n  );\n};\n\nexport function swirlDissolve(\n  props: SwirlDissolveProps = {},\n): TransitionPresentation<SwirlDissolveProps> {\n  return {\n    component: SwirlDissolvePresentation,\n    props,\n  };\n}\n",
      "type": "registry:component",
      "target": "components/remocn/swirl-dissolve.tsx"
    }
  ],
  "type": "registry:component"
}