{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheen-slide-in",
  "title": "Sheen Slide In",
  "description": "A title glides in from the right with an exponential settle and a slow final creep to center, while a gradient sheen sweeps once through the glyphs.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/sheen-slide-in/index.tsx",
      "content": "\"use client\";\n\nimport { Easing, interpolate, useCurrentFrame } from \"remotion\";\n\nexport interface SheenSlideInProps {\n  text: string;\n  exitAt?: number;\n  fontSize?: number;\n  baseColor?: string;\n  sheenColor?: string;\n  fontWeight?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst SETTLE_AMP_EM = 1.8;\nconst SETTLE_TAU = 2.5;\nconst CREEP_AMP_EM = 0.28;\nconst CREEP_TAU = 12;\nconst FADE_FRAMES = 4;\nconst SHEEN_IN_START = 0;\nconst SHEEN_IN_END = 4;\nconst SHEEN_SWEEP_END = 48;\nconst SHEEN_OUT_START = 48;\nconst SHEEN_OUT_END = 58;\nconst EXIT_FRAMES = 4;\nconst EXIT_SCALE = 0.9;\n\nexport function sheenSlideInLength(exitAt = 60): number {\n  return exitAt + EXIT_FRAMES;\n}\n\nfunction travelEm(frame: number): number {\n  return (\n    SETTLE_AMP_EM * Math.exp(-frame / SETTLE_TAU) +\n    CREEP_AMP_EM * Math.exp(-frame / CREEP_TAU)\n  );\n}\n\nconst exitEasing = Easing.out(Easing.quad);\n\nexport function SheenSlideIn({\n  text,\n  exitAt = 60,\n  fontSize = 72,\n  baseColor = \"#18181b\",\n  sheenColor = \"#4f8ef7\",\n  fontWeight = 400,\n  speed = 1,\n  className,\n}: SheenSlideInProps) {\n  const frame = useCurrentFrame() * speed;\n\n  const x = fontSize * travelEm(frame);\n\n  const exit = interpolate(frame, [exitAt, exitAt + EXIT_FRAMES], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: exitEasing,\n  });\n\n  const opacity = interpolate(frame, [0, FADE_FRAMES], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const sheenOpacity =\n    interpolate(frame, [SHEEN_IN_START, SHEEN_IN_END], [0, 1], {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    }) *\n    interpolate(frame, [SHEEN_OUT_START, SHEEN_OUT_END], [1, 0], {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    });\n\n  const sheenPosition = interpolate(frame, [0, SHEEN_SWEEP_END], [160, -60], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: Easing.bezier(0.42, 0, 0.58, 1),\n  });\n\n  const textStyle: React.CSSProperties = {\n    fontSize,\n    fontWeight,\n    letterSpacing: \"-0.02em\",\n    lineHeight: 1.1,\n    margin: 0,\n    fontFamily:\n      \"var(--font-geist-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)\",\n  };\n\n  if (exit >= 1) {\n    return (\n      <div\n        style={{ position: \"absolute\", inset: 0, background: \"transparent\" }}\n      />\n    );\n  }\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        whiteSpace: \"nowrap\",\n        background: \"transparent\",\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          display: \"inline-block\",\n          opacity,\n          translate: `${x}px 0`,\n          scale: `${1 - (1 - EXIT_SCALE) * exit}`,\n        }}\n      >\n        <span className={className} style={{ ...textStyle, color: baseColor }}>\n          {text}\n        </span>\n        <span\n          aria-hidden\n          style={{\n            ...textStyle,\n            position: \"absolute\",\n            inset: 0,\n            color: \"transparent\",\n            backgroundClip: \"text\",\n            WebkitBackgroundClip: \"text\",\n            backgroundImage: `linear-gradient(100deg, transparent 25%, ${sheenColor} 50%, transparent 75%)`,\n            backgroundSize: \"250% 100%\",\n            backgroundPosition: `${sheenPosition}% 50%`,\n            opacity: sheenOpacity,\n          }}\n        >\n          {text}\n        </span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/sheen-slide-in.tsx"
    }
  ],
  "type": "registry:component"
}