{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "soft-blur-in",
  "title": "Soft Blur In",
  "description": "Per-character fade-in with a gentle blur and upward motion. Apple's signature hero-title reveal.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/soft-blur-in/index.tsx",
      "content": "\"use client\";\n\nimport { Easing, interpolate, useCurrentFrame } from \"remotion\";\n\nexport interface SoftBlurInProps {\n  text: string;\n  blur?: number;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport function SoftBlurIn({\n  text,\n  blur = 12,\n  fontSize = 72,\n  color = \"#171717\",\n  fontWeight = 600,\n  speed = 1,\n  className,\n}: SoftBlurInProps) {\n  const frame = useCurrentFrame() * speed;\n\n  const chars = Array.from(text);\n  const charDurationFrames = 27;\n  const staggerFrames = 1;\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.05em\",\n          fontFamily:\n            \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n        }}\n      >\n        {chars.map((char, i) => {\n          const local = frame - i * staggerFrames;\n          const easing = Easing.bezier(0.22, 1, 0.36, 1);\n          const opacity = interpolate(local, [0, charDurationFrames], [0, 1], {\n            extrapolateLeft: \"clamp\",\n            extrapolateRight: \"clamp\",\n            easing,\n          });\n          const y = interpolate(local, [0, charDurationFrames], [16, 0], {\n            extrapolateLeft: \"clamp\",\n            extrapolateRight: \"clamp\",\n            easing,\n          });\n          const blurAmount = interpolate(\n            local,\n            [0, charDurationFrames],\n            [blur, 0],\n            { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\", easing },\n          );\n          return (\n            <span\n              key={i}\n              style={{\n                display: \"inline-block\",\n                whiteSpace: \"pre\",\n                backfaceVisibility: \"hidden\",\n                transformOrigin: \"50% 55%\",\n                opacity,\n                transform: `translateY(${y}px)`,\n                filter: `blur(${blurAmount}px)`,\n              }}\n            >\n              {char}\n            </span>\n          );\n        })}\n      </span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/soft-blur-in.tsx"
    }
  ],
  "type": "registry:component"
}