{
  "name": "matrix-decode",
  "type": "registry:ui",
  "description": "Scramble resolves left-to-right into target text",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "layout"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/matrix-decode.tsx",
      "type": "registry:ui",
      "content": "import { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { scaleFont } from \"@/remotion/lib/layout\";\n\nexport type MatrixDecodeProps = {\n  text: string;\n  durationInFrames?: number;\n  delayInFrames?: number;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  fontFamily?: string;\n};\n\nconst GLYPHS = \"アイウエオカキクケコサシスセソ0123456789\";\n\nfunction scrambleChar(target: string, progress: number, index: number): string {\n  if (progress >= 1) return target;\n  const resolved = Math.floor(progress * target.length);\n  if (index < resolved) return target[index] ?? \"\";\n  const seed = (index * 17 + Math.floor(progress * 40)) % GLYPHS.length;\n  return GLYPHS[seed] ?? target;\n}\n\nexport const MatrixDecode: React.FC<MatrixDecodeProps> = ({\n  text,\n  durationInFrames = 50,\n  delayInFrames = 0,\n  fontSize: fontSizeProp,\n  color = \"#2dd4bf\",\n  fontWeight = 600,\n  fontFamily,\n}) => {\n  const frame = useCurrentFrame();\n  const { width } = useVideoConfig();\n  const fontSize = fontSizeProp ?? scaleFont(72, width);\n  const progress = interpolate(\n    frame,\n    [delayInFrames, delayInFrames + durationInFrames],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n  const decoded = Array.from(text, (char, index) =>\n    char === \" \" ? \" \" : scrambleChar(char, progress, index),\n  ).join(\"\");\n\n  return (\n    <span\n      style={{\n        fontSize,\n        fontWeight,\n        color,\n        lineHeight: 1.2,\n        fontFamily: fontFamily ?? \"ui-monospace, monospace\",\n      }}\n    >\n      {decoded}\n    </span>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "advanced",
    "tags": [
      "text"
    ]
  }
}