{
  "$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/bases/editframe/components/kinetic-type-mask/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst DefaultPanel = ({ label, color }: { label: string; color: string }) => (\n  <div\n    style={{\n      alignItems: \"center\",\n      background: color,\n      color: \"white\",\n      display: \"flex\",\n      fontFamily: FONT_FAMILY,\n      fontSize: 96,\n      fontWeight: 700,\n      inset: 0,\n      justifyContent: \"center\",\n      letterSpacing: \"-0.05em\",\n      position: \"absolute\",\n    }}\n  >\n    {label}\n  </div>\n);\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  fps?: number;\n  durationInFrames?: number;\n  width?: number;\n  height?: number;\n  className?: string;\n}\n\nexport const KineticTypeMask = ({\n  from,\n  to,\n  text = \"NEXT\",\n  transitionStart,\n  holdFrames = 12,\n  transitionDuration = 24,\n  maxScale = 120,\n  speed = 1,\n  fps = 30,\n  durationInFrames = 90,\n  width = 1280,\n  height = 720,\n  className,\n}: KineticTypeMaskProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const frameMs = 1000 / fps;\n\n  const startMs =\n    (transitionStart ?? Math.floor(durationInFrames * 0.3)) * frameMs;\n  const scaleStartMs = (startMs + holdFrames * frameMs) / safeSpeed;\n  const scaleDurationMs = (transitionDuration * frameMs) / safeSpeed;\n\n  const fromContent = from ?? <DefaultPanel label=\"Scene A\" color=\"#0f172a\" />;\n  const toContent = to ?? <DefaultPanel label=\"Scene B\" color=\"#f97316\" />;\n\n  const containerStyle: CSSProperties = {\n    background: \"black\",\n    height,\n    overflow: \"hidden\",\n    position: \"relative\",\n    width,\n  };\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-kinetic-mask-text {\n            0% { transform: scale(1); }\n            100% { transform: scale(${maxScale}); }\n          }\n          @keyframes framecn-kinetic-mask-reveal {\n            from { clip-path: inset(0 0 0 0); }\n            to { clip-path: inset(0 0 0 0); }\n          }\n          @keyframes framecn-kinetic-scene {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n        `}</style>\n        <div style={{ inset: 0, position: \"absolute\" }}>{fromContent}</div>\n\n        {maxScale > 1 && (\n          <div\n            style={{\n              alignItems: \"center\",\n              animation: `framecn-kinetic-mask-text ${scaleDurationMs}ms cubic-bezier(0.7, 0, 0.84, 1) ${scaleStartMs}ms backwards`,\n              color: \"black\",\n              display: \"flex\",\n              fontFamily: FONT_FAMILY,\n              fontSize: height * 0.7,\n              fontWeight: 900,\n              inset: 0,\n              justifyContent: \"center\",\n              position: \"absolute\",\n              transformOrigin: \"center center\",\n            }}\n          >\n            {text}\n          </div>\n        )}\n\n        <div\n          style={{\n            animation: `framecn-kinetic-scene 1ms linear ${scaleStartMs + scaleDurationMs * 0.95}ms forwards`,\n            inset: 0,\n            position: \"absolute\",\n          }}\n        >\n          {toContent}\n        </div>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/kinetic-type-mask.tsx"
    }
  ],
  "type": "registry:component"
}