{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kinetic-type-mask",
  "title": "Kinetic Type Mask",
  "description": "Use giant typography as a window into the next scene.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/kinetic-type-mask/index.tsx",
      "content": "\"use client\";\n\nimport { type ReactNode, useId } from \"react\";\nimport { Easing, interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface KineticTypeMaskProps {\n  from?: ReactNode;\n  to?: ReactNode;\n  text?: string;\n  transitionStart?: number;\n  holdFrames?: number;\n  transitionDuration?: number;\n  maxScale?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nfunction DefaultPanel({ label, color }: { label: string; color: string }) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: color,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        color: \"white\",\n        fontFamily: FONT_FAMILY,\n        fontSize: 96,\n        fontWeight: 700,\n        letterSpacing: \"-0.05em\",\n      }}\n    >\n      {label}\n    </div>\n  );\n}\n\nexport function KineticTypeMask({\n  from,\n  to,\n  text = \"NEXT\",\n  transitionStart,\n  holdFrames = 12,\n  transitionDuration = 24,\n  maxScale = 120,\n  speed = 1,\n  className,\n}: KineticTypeMaskProps) {\n  const frame = useCurrentFrame() * speed;\n  const { width, height, durationInFrames } = useVideoConfig();\n\n  const start = transitionStart ?? Math.floor(durationInFrames * 0.3);\n  const scaleStart = start + holdFrames;\n\n  const scale = interpolate(\n    frame,\n    [scaleStart, scaleStart + transitionDuration],\n    [1, maxScale],\n    {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n      easing: Easing.bezier(0.7, 0, 0.84, 0),\n    },\n  );\n\n  const id = useId().replace(/[:#]/g, \"\");\n\n  const fromContent = from ?? <DefaultPanel label=\"Scene A\" color=\"#0f172a\" />;\n  const toContent = to ?? <DefaultPanel label=\"Scene B\" color=\"#f97316\" />;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        overflow: \"hidden\",\n        background: \"black\",\n      }}\n    >\n      <div style={{ position: \"absolute\", inset: 0 }}>{fromContent}</div>\n\n      {scale < maxScale * 0.95 && (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            color: \"black\",\n            fontFamily: FONT_FAMILY,\n            fontSize: height * 0.7,\n            fontWeight: 900,\n            transform: `scale(${scale})`,\n            transformOrigin: \"center center\",\n            willChange: \"transform\",\n          }}\n        >\n          {text}\n        </div>\n      )}\n\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          clipPath: `url(#${id})`,\n          WebkitClipPath: `url(#${id})`,\n        }}\n      >\n        <div style={{ position: \"absolute\", inset: 0 }}>{toContent}</div>\n      </div>\n\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox={`0 0 ${width} ${height}`}\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          pointerEvents: \"none\",\n        }}\n      >\n        <defs>\n          <clipPath id={id} clipPathUnits=\"userSpaceOnUse\">\n            <text\n              x={width / 2}\n              y={height / 2}\n              textAnchor=\"middle\"\n              dominantBaseline=\"central\"\n              fontFamily={FONT_FAMILY}\n              fontWeight={900}\n              fontSize={height * 0.7}\n              style={{\n                transform: `scale(${scale})`,\n                transformOrigin: `${width / 2}px ${height / 2}px`,\n              }}\n            >\n              {text}\n            </text>\n          </clipPath>\n        </defs>\n      </svg>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/kinetic-type-mask.tsx"
    }
  ],
  "type": "registry:component"
}