{
  "name": "tracking-in",
  "type": "registry:ui",
  "description": "Letter-spacing collapses with spring snap",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "layout",
    "springs"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/tracking-in.tsx",
      "type": "registry:ui",
      "content": "import { spring, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { scaleFont } from \"@/remotion/lib/layout\";\nimport { springSmooth } from \"@/remotion/lib/springs\";\n\nexport type TrackingInProps = {\n  text: string;\n  durationInFrames?: number;\n  delayInFrames?: number;\n  fromTracking?: number;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  fontFamily?: string;\n};\n\nexport const TrackingIn: React.FC<TrackingInProps> = ({\n  text,\n  durationInFrames = 28,\n  delayInFrames = 0,\n  fromTracking = 0.28,\n  fontSize: fontSizeProp,\n  color = \"#f4f4f5\",\n  fontWeight = 600,\n  fontFamily,\n}) => {\n  const frame = useCurrentFrame();\n  const { fps, width } = useVideoConfig();\n  const fontSize = fontSizeProp ?? scaleFont(84, width);\n  const progress = spring({\n    fps,\n    frame,\n    config: springSmooth,\n    delay: delayInFrames,\n    durationInFrames,\n  });\n  const letterSpacing = `${fromTracking * (1 - progress)}em`;\n  const blur = (1 - progress) * 6;\n  const opacity = Math.min(1, progress * 1.15);\n\n  return (\n    <span\n      style={{\n        fontSize,\n        fontWeight,\n        color,\n        lineHeight: 1.15,\n        letterSpacing,\n        opacity,\n        filter: blur > 0.1 ? `blur(${blur}px)` : undefined,\n        ...(fontFamily ? { fontFamily } : {}),\n      }}\n    >\n      {text}\n    </span>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "advanced",
    "tags": [
      "text"
    ]
  }
}