{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dither-dissolve",
  "title": "Dither Dissolve",
  "description": "A dithering shader transition that dissolves one scene into the next.",
  "dependencies": ["remotion", "@remotion/transitions"],
  "registryDependencies": ["@remocn/shader-dithering"],
  "files": [
    {
      "path": "registry/remocn/dither-dissolve/index.tsx",
      "content": "\"use client\";\n\nimport type {\n  TransitionPresentation,\n  TransitionPresentationComponentProps,\n} from \"@remotion/transitions\";\nimport type React from \"react\";\nimport { AbsoluteFill, interpolate } from \"remotion\";\nimport { ShaderDithering } from \"@/components/remocn/shader-dithering\";\n\nconst clampOpts = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\nconst coverEnvelope = (p: number) =>\n  interpolate(p, [0, 0.3, 0.65, 1], [0, 1, 1, 0], clampOpts);\n\nconst coverChildOpacity = (p: number, entering: boolean) =>\n  entering\n    ? interpolate(p, [0.58, 0.66], [0, 1], clampOpts)\n    : interpolate(p, [0.28, 0.36], [1, 0], clampOpts);\n\ntype DitherShape = NonNullable<\n  React.ComponentProps<typeof ShaderDithering>[\"shape\"]\n>;\n\nexport type DitherDissolveProps = {\n  colorBack?: string;\n  colorFront?: string;\n  shape?: DitherShape;\n  speed?: number;\n};\n\nconst DitherDissolvePresentation: React.FC<\n  TransitionPresentationComponentProps<DitherDissolveProps>\n> = ({\n  children,\n  presentationProgress,\n  presentationDirection,\n  passedProps,\n}) => {\n  const {\n    colorBack = \"#141318\",\n    colorFront = \"#8f88ae\",\n    shape = \"simplex\",\n    speed = 1.5,\n  } = passedProps;\n  const entering = presentationDirection === \"entering\";\n  const p = presentationProgress;\n  const size = interpolate(p, [0, 1], [1.6, 2.8], clampOpts);\n\n  return (\n    <AbsoluteFill>\n      <AbsoluteFill style={{ opacity: coverChildOpacity(p, entering) }}>\n        {children}\n      </AbsoluteFill>\n      {entering ? (\n        <AbsoluteFill\n          style={{ opacity: coverEnvelope(p), pointerEvents: \"none\" }}\n        >\n          <ShaderDithering\n            speed={speed}\n            colorBack={colorBack}\n            colorFront={colorFront}\n            shape={shape}\n            size={size}\n          />\n        </AbsoluteFill>\n      ) : null}\n    </AbsoluteFill>\n  );\n};\n\nexport function ditherDissolve(\n  props: DitherDissolveProps = {},\n): TransitionPresentation<DitherDissolveProps> {\n  return {\n    component: DitherDissolvePresentation,\n    props,\n  };\n}\n",
      "type": "registry:component",
      "target": "components/remocn/dither-dissolve.tsx"
    }
  ],
  "type": "registry:component"
}