{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tracking-in",
  "title": "Tracking In",
  "description": "Letter-spacing collapses and blur clears with a springy motion.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/tracking-in/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface TrackingInProps {\n  text: string;\n  startTracking?: number;\n  startBlur?: number;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport function TrackingIn({\n  text,\n  startTracking = 0.5,\n  startBlur = 12,\n  fontSize = 96,\n  color = \"#171717\",\n  fontWeight = 700,\n  speed = 1,\n  className,\n}: TrackingInProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const t = spring({\n    frame,\n    fps,\n    config: { damping: 18, stiffness: 90 },\n  });\n\n  const letterSpacing = `${interpolate(t, [0, 1], [startTracking, -0.03])}em`;\n  const blurAmount = interpolate(t, [0, 1], [startBlur, 0]);\n  const opacity = interpolate(frame, [0, 15], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: \"white\",\n      }}\n    >\n      <span\n        className={className}\n        style={{\n          fontSize,\n          fontWeight,\n          color,\n          letterSpacing,\n          opacity,\n          filter: `blur(${blurAmount}px)`,\n          fontFamily:\n            \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n          whiteSpace: \"nowrap\",\n        }}\n      >\n        {text}\n      </span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/tracking-in.tsx"
    }
  ],
  "type": "registry:component"
}