{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "anamorphic-flare",
  "title": "Anamorphic Flare",
  "description": "A point of light grows into a cinematic anamorphic streak that sweeps the frame and reveals the logo in its wake.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/anamorphic-flare/index.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useId } from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  interpolate,\n  random,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nexport type AnamorphicFlareProps = {\n  /** Lockup revealed behind the streak. Falls back to a placeholder \"remocn\" lockup. */\n  children?: React.ReactNode;\n  /** Warm tint of the streak glow and ghosts. */\n  tint?: string;\n  /** Color of the hot core line. */\n  coreColor?: string;\n  backgroundColor?: string;\n  /** Number of ghost orbs mirrored across the frame center. */\n  ghosts?: number;\n  /** Vertical position of the streak, 0 to 1. */\n  y?: number;\n  seed?: number;\n  speed?: number;\n};\n\nexport const anamorphicFlareDefaults = {\n  tint: \"#E5322D\",\n  coreColor: \"#FFFFFF\",\n  backgroundColor: \"#111111\",\n  ghosts: 4,\n  y: 0.5,\n  seed: 2,\n  speed: 1,\n};\n\nconst IGNITE = 6;\nconst CROSS_START = 4;\nconst CROSS_END = 26;\nconst clamp = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\nconst PLACEHOLDER_FONT =\n  \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif\";\n\n// Neutral lockup shown when no children are passed.\nfunction PlaceholderLockup({\n  mark,\n  dot,\n  text,\n  scale = 1,\n}: {\n  mark: string;\n  dot: string;\n  text: string;\n  scale?: number;\n}) {\n  return (\n    <div style={{ display: \"flex\", alignItems: \"center\", gap: 28 * scale }}>\n      <div\n        style={{\n          width: 120 * scale,\n          height: 120 * scale,\n          borderRadius: 32 * scale,\n          backgroundColor: mark,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <div\n          style={{\n            width: 36 * scale,\n            height: 36 * scale,\n            borderRadius: \"50%\",\n            backgroundColor: dot,\n          }}\n        />\n      </div>\n      <span\n        style={{\n          fontFamily: PLACEHOLDER_FONT,\n          fontSize: 104 * scale,\n          fontWeight: 800,\n          letterSpacing: \"-0.04em\",\n          color: text,\n        }}\n      >\n        remocn\n      </span>\n    </div>\n  );\n}\n\nexport function AnamorphicFlare(props: AnamorphicFlareProps) {\n  const { children, tint, coreColor, backgroundColor, ghosts, y, seed, speed } =\n    { ...anamorphicFlareDefaults, ...props };\n  const uid = `anamorphic-flare-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const frame = useCurrentFrame();\n  const { width, height } = useVideoConfig();\n  const t = frame * Math.max(0, speed);\n  const cy = y * height;\n  const cx = width / 2;\n\n  const head = interpolate(t, [CROSS_START, CROSS_END], [0.07, 1.12], {\n    ...clamp,\n    easing: Easing.bezier(0.45, 0, 0.4, 1),\n  });\n  const hx = head * width;\n  const ignite = interpolate(t, [0, IGNITE], [0, 1], {\n    ...clamp,\n    easing: Easing.out(Easing.cubic),\n  });\n  const fade = interpolate(t, [CROSS_END - 6, CROSS_END + 2], [1, 0], clamp);\n  const power = ignite * fade;\n  const streakLen =\n    width *\n    interpolate(t, [0, 12], [0.04, 1.3], {\n      ...clamp,\n      easing: Easing.out(Easing.quad),\n    });\n  const coreH = Math.max(2, height * 0.004);\n  const glowH = height * 0.05;\n  const residual = interpolate(\n    t,\n    [CROSS_END - 2, CROSS_END + 14],\n    [0, 0.14],\n    clamp,\n  );\n  const soft = width * 0.08;\n  const mask = `linear-gradient(90deg, #000 0px, #000 ${hx - soft}px, transparent ${hx}px)`;\n\n  const ghostList = Array.from(\n    { length: Math.max(0, Math.round(ghosts)) },\n    (_, i) => {\n      const k = -1.3 + random(`anamorphic-flare-${seed}-${i}-k`) * 2.2;\n      return {\n        x: cx - (hx - cx) * k,\n        r: height * (0.025 + 0.07 * random(`anamorphic-flare-${seed}-${i}-r`)),\n        o: 0.12 + 0.18 * random(`anamorphic-flare-${seed}-${i}-o`),\n        dy: (random(`anamorphic-flare-${seed}-${i}-y`) - 0.5) * height * 0.05,\n      };\n    },\n  );\n\n  return (\n    <AbsoluteFill style={{ backgroundColor }}>\n      <svg\n        width={width}\n        height={height}\n        viewBox={`0 0 ${width} ${height}`}\n        style={{ position: \"absolute\", inset: 0 }}\n      >\n        <defs>\n          <linearGradient id={`${uid}-trail`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n            <stop offset=\"0\" stopColor={tint} stopOpacity={0} />\n            <stop offset=\"0.5\" stopColor={tint} stopOpacity={1} />\n            <stop offset=\"1\" stopColor={tint} stopOpacity={0} />\n          </linearGradient>\n        </defs>\n        <rect\n          x={0}\n          y={cy - 1}\n          width={width}\n          height={2}\n          fill={`url(#${uid}-trail)`}\n          opacity={residual}\n        />\n      </svg>\n      <AbsoluteFill\n        style={{\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          WebkitMaskImage: mask,\n          maskImage: mask,\n        }}\n      >\n        {children ?? (\n          <PlaceholderLockup\n            mark={tint}\n            dot={backgroundColor}\n            text={coreColor}\n          />\n        )}\n      </AbsoluteFill>\n      <svg\n        width={width}\n        height={height}\n        viewBox={`0 0 ${width} ${height}`}\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          mixBlendMode: \"screen\",\n        }}\n      >\n        <defs>\n          <linearGradient id={`${uid}-core`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n            <stop offset=\"0\" stopColor={coreColor} stopOpacity={0} />\n            <stop offset=\"0.5\" stopColor={coreColor} stopOpacity={1} />\n            <stop offset=\"1\" stopColor={coreColor} stopOpacity={0} />\n          </linearGradient>\n          <radialGradient id={`${uid}-bloom`}>\n            <stop offset=\"0\" stopColor={coreColor} stopOpacity={1} />\n            <stop offset=\"0.25\" stopColor={tint} stopOpacity={0.7} />\n            <stop offset=\"1\" stopColor={tint} stopOpacity={0} />\n          </radialGradient>\n          <radialGradient id={`${uid}-ghost`}>\n            <stop offset=\"0\" stopColor={tint} stopOpacity={0.15} />\n            <stop offset=\"0.8\" stopColor={tint} stopOpacity={0.5} />\n            <stop offset=\"1\" stopColor={tint} stopOpacity={0} />\n          </radialGradient>\n          <filter\n            id={`${uid}-blur`}\n            x={-width}\n            y={-height}\n            width={width * 3}\n            height={height * 3}\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feGaussianBlur stdDeviation={glowH * 0.35} />\n          </filter>\n        </defs>\n        <g opacity={power}>\n          <rect\n            x={hx - streakLen * 0.45}\n            y={cy - glowH / 2}\n            width={streakLen * 0.9}\n            height={glowH}\n            fill={`url(#${uid}-trail)`}\n            opacity={0.55}\n            filter={`url(#${uid}-blur)`}\n          />\n          <rect\n            x={hx - streakLen / 2}\n            y={cy - coreH / 2}\n            width={streakLen}\n            height={coreH}\n            fill={`url(#${uid}-core)`}\n          />\n          <ellipse\n            cx={hx}\n            cy={cy}\n            rx={height * 0.16}\n            ry={height * 0.1}\n            fill={`url(#${uid}-bloom)`}\n          />\n          {ghostList.map((g, i) => (\n            <circle\n              key={i}\n              cx={g.x}\n              cy={cy + g.dy}\n              r={g.r}\n              fill={`url(#${uid}-ghost)`}\n              opacity={g.o * 2}\n            />\n          ))}\n        </g>\n      </svg>\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/anamorphic-flare.tsx"
    }
  ],
  "type": "registry:component"
}