{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-scale-cut-text",
  "title": "Gradient Scale Cut Text",
  "description": "An oversized gradient reveal snaps to a separate compact blurred line that settles left while the reveal continues.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/gradient-scale-cut-text/index.tsx",
      "content": "\"use client\";\n\nimport { Easing, interpolate, useCurrentFrame } from \"remotion\";\n\nexport interface GradientScaleCutTextProps {\n  text?: string;\n  giantFontSize?: number;\n  compactFontSize?: number;\n  fontWeight?: number;\n  gradientStart?: string;\n  gradientEnd?: string;\n  ghostColor?: string;\n  backgroundColor?: string;\n  anchorOffsetX?: number;\n  giantTravel?: number;\n  settleTravel?: number;\n  cutFrame?: number;\n  revealSoftness?: number;\n  compactBlur?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport const gradientScaleCutTextLength = 36;\n\nconst REVEAL_END = 33;\nconst SETTLE_FRAMES = 8;\nconst GIANT_Y = -28;\nconst GIANT_X_CORRECTION = -48;\nconst COMPACT_Y = 5;\nconst COMPACT_X_SCALE = 0.87;\nconst COMPACT_START_X_CORRECTION = 28;\nconst FONT_FAMILY = \"Arial, Helvetica, sans-serif\";\nconst clamp = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\ninterface TextLayerProps {\n  text: string;\n  fontSize: number;\n  fontWeight: number;\n  gradientStart: string;\n  gradientEnd: string;\n  ghostColor: string;\n  maskImage: string;\n}\n\nfunction TextLayer({\n  text,\n  fontSize,\n  fontWeight,\n  gradientStart,\n  gradientEnd,\n  ghostColor,\n  maskImage,\n}: TextLayerProps) {\n  const textStyle = {\n    display: \"block\",\n    fontFamily: FONT_FAMILY,\n    fontSize,\n    fontWeight,\n    letterSpacing: 0,\n    lineHeight: 1.12,\n    whiteSpace: \"nowrap\" as const,\n  };\n\n  return (\n    <div style={{ position: \"relative\" }}>\n      <span style={{ ...textStyle, color: ghostColor }}>{text}</span>\n      <span\n        style={{\n          ...textStyle,\n          position: \"absolute\",\n          inset: 0,\n          color: \"transparent\",\n          backgroundImage: `linear-gradient(90deg, ${gradientStart} 0%, ${gradientStart} 4%, ${gradientEnd} 26%, ${gradientEnd} 100%)`,\n          backgroundClip: \"text\",\n          maskImage,\n          maskRepeat: \"no-repeat\",\n          opacity: 1,\n          WebkitBackgroundClip: \"text\",\n          WebkitMaskImage: maskImage,\n          WebkitMaskRepeat: \"no-repeat\",\n        }}\n      >\n        {text}\n      </span>\n    </div>\n  );\n}\n\nexport function GradientScaleCutText({\n  text = \"Introducing\",\n  giantFontSize = 520,\n  compactFontSize = 132,\n  fontWeight = 700,\n  gradientStart = \"#f04a14\",\n  gradientEnd = \"#f3f1f1\",\n  ghostColor = \"#170b0a\",\n  backgroundColor = \"#000000\",\n  anchorOffsetX = -16,\n  giantTravel = 400,\n  settleTravel = 160,\n  cutFrame = 13,\n  revealSoftness = 14,\n  compactBlur = 12,\n  speed = 1,\n  className,\n}: GradientScaleCutTextProps) {\n  const frame = useCurrentFrame() * Math.max(speed, 0);\n  const safeCutFrame = Math.max(cutFrame, 1);\n  const safeGiantFontSize = Math.max(giantFontSize, 1);\n  const safeCompactFontSize = Math.max(compactFontSize, 1);\n  const safeSoftness = Math.max(revealSoftness, 0);\n  const safeBlur = Math.max(compactBlur, 0);\n  const revealProgress = interpolate(frame, [0, REVEAL_END], [0.02, 1], {\n    ...clamp,\n    easing: Easing.bezier(0.22, 0.74, 0.24, 1),\n  });\n  const revealEdge = revealProgress * (100 + safeSoftness / 2);\n  const revealSolid = Math.max(0, revealEdge - safeSoftness / 2);\n  const revealFade = revealEdge + safeSoftness / 2;\n  const maskImage = `linear-gradient(90deg, #000 0%, #000 ${revealSolid}%, transparent ${revealFade}%, transparent ${revealFade}%)`;\n  const giantProgress = interpolate(\n    frame,\n    [0, Math.max(safeCutFrame - 1, 1)],\n    [0, 1],\n    {\n      ...clamp,\n      easing: Easing.out(Easing.cubic),\n    },\n  );\n  const settleProgress = interpolate(\n    frame,\n    [safeCutFrame, safeCutFrame + SETTLE_FRAMES],\n    [0, 1],\n    {\n      ...clamp,\n      easing: Easing.out(Easing.cubic),\n    },\n  );\n  const moveProgress = interpolate(\n    frame,\n    [\n      safeCutFrame + 1,\n      safeCutFrame + 2,\n      safeCutFrame + 4,\n      safeCutFrame + SETTLE_FRAMES,\n    ],\n    [0, 0.58, 0.875, 1],\n    clamp,\n  );\n  const showGiant = frame < safeCutFrame;\n  const compactX =\n    interpolate(moveProgress, [0, 1], [settleTravel, 0], clamp) +\n    COMPACT_START_X_CORRECTION * (1 - moveProgress);\n  const compactBlurValue = safeBlur * (1 - settleProgress);\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        overflow: \"hidden\",\n        backgroundColor,\n      }}\n    >\n      {showGiant ? (\n        <div\n          style={{\n            position: \"absolute\",\n            top: `calc(50% + ${GIANT_Y}px)`,\n            left: `calc(50% + ${anchorOffsetX + GIANT_X_CORRECTION - giantTravel * giantProgress}px)`,\n            opacity: 1,\n            transform: \"translate3d(0, -50%, 0)\",\n          }}\n        >\n          <TextLayer\n            text={text}\n            fontSize={safeGiantFontSize}\n            fontWeight={fontWeight}\n            gradientStart={gradientStart}\n            gradientEnd={gradientEnd}\n            ghostColor={ghostColor}\n            maskImage={maskImage}\n          />\n        </div>\n      ) : (\n        <div\n          style={{\n            position: \"absolute\",\n            top: `calc(50% + ${COMPACT_Y}px)`,\n            left: `calc(50% + ${anchorOffsetX + compactX}px)`,\n            filter: `blur(${compactBlurValue}px)`,\n            opacity: 1,\n            transform: `translate3d(-50%, -50%, 0) scaleX(${COMPACT_X_SCALE})`,\n            transformOrigin: \"center\",\n          }}\n        >\n          <TextLayer\n            text={text}\n            fontSize={safeCompactFontSize}\n            fontWeight={fontWeight}\n            gradientStart={gradientStart}\n            gradientEnd={gradientEnd}\n            ghostColor={ghostColor}\n            maskImage={maskImage}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/gradient-scale-cut-text.tsx"
    }
  ],
  "type": "registry:component"
}