{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slot-machine-roll",
  "title": "Slot Machine Roll",
  "description": "Vertical reel scrolls characters from one value to another.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/slot-machine-roll/index.tsx",
      "content": "\"use client\";\n\nimport { spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface SlotMachineRollProps {\n  from?: string;\n  to?: string;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport function SlotMachineRoll({\n  from = \"$99\",\n  to = \"$199\",\n  fontSize = 120,\n  color = \"#171717\",\n  fontWeight = 700,\n  speed = 1,\n  className,\n}: SlotMachineRollProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const len = Math.max(from.length, to.length);\n  const paddedFrom = from.padStart(len, \" \");\n  const paddedTo = to.padStart(len, \" \");\n\n  const columns = [];\n  for (let i = 0; i < len; i++) {\n    const raw = spring({\n      frame: frame - i * 4,\n      fps,\n      config: { damping: 14 },\n    });\n    const t = Math.max(0, Math.min(1, raw));\n    columns.push(\n      <span\n        key={i}\n        style={{\n          display: \"inline-block\",\n          overflow: \"hidden\",\n          height: \"1.1em\",\n          lineHeight: \"1.1em\",\n          verticalAlign: \"top\",\n          width: \"0.7em\",\n          textAlign: \"center\",\n        }}\n      >\n        <span\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            translate: `0 ${-t * fontSize * 1.1}px`,\n          }}\n        >\n          <span>{paddedFrom[i]}</span>\n          <span>{paddedTo[i]}</span>\n        </span>\n      </span>,\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        background: \"white\",\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          lineHeight: 1.1,\n        }}\n      >\n        {columns}\n      </span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/slot-machine-roll.tsx"
    }
  ],
  "type": "registry:component"
}