{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scale-down-fade",
  "title": "Scale Down Fade",
  "description": "Subtle premium settle-in with a restrained scale-down fade on exit.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/scale-down-fade/index.tsx",
      "content": "\"use client\";\n\nimport { Easing, interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface ScaleDownFadeProps {\n  text: string;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport function ScaleDownFade({\n  text,\n  fontSize = 72,\n  color = \"#171717\",\n  fontWeight = 600,\n  speed = 1,\n  className,\n}: ScaleDownFadeProps) {\n  const frame = useCurrentFrame() * speed;\n  const { durationInFrames } = useVideoConfig();\n\n  const enterDurFrames = 16;\n  const exitDurFrames = 11;\n  const exitStart = Math.max(enterDurFrames, durationInFrames - exitDurFrames);\n\n  const enterEasing = Easing.bezier(0.22, 1, 0.36, 1);\n  const exitEasing = Easing.bezier(0.64, 0, 0.78, 0);\n\n  const enterP = interpolate(frame, [0, enterDurFrames], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: enterEasing,\n  });\n\n  const exitP = interpolate(frame, [exitStart, durationInFrames], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: exitEasing,\n  });\n\n  const opacity = enterP * (1 - exitP);\n\n  const yEnter = interpolate(frame, [0, enterDurFrames], [8, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: enterEasing,\n  });\n\n  const yExit = interpolate(frame, [exitStart, durationInFrames], [0, -8], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: exitEasing,\n  });\n\n  const y = yEnter + yExit;\n\n  const scaleEnter = interpolate(frame, [0, enterDurFrames], [1.04, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: enterEasing,\n  });\n\n  const scaleExitDelta = interpolate(\n    frame,\n    [exitStart, durationInFrames],\n    [0, -0.06],\n    {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n      easing: exitEasing,\n    },\n  );\n\n  const scale = scaleEnter + scaleExitDelta;\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: \"transparent\",\n      }}\n    >\n      <span\n        className={className}\n        style={{\n          fontSize,\n          fontWeight,\n          color,\n          letterSpacing: \"-0.03em\",\n          fontFamily:\n            \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n          display: \"inline-block\",\n          transformOrigin: \"50% 50%\",\n          opacity,\n          translate: `0 ${y}px`,\n          scale: `${scale}`,\n        }}\n      >\n        {text}\n      </span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/scale-down-fade.tsx"
    }
  ],
  "type": "registry:component"
}