{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-grid",
  "title": "Dynamic Grid",
  "description": "Subtle moving grid background with configurable cell size and direction.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/dynamic-grid/index.tsx",
      "content": "\"use client\";\n\nimport { useCurrentFrame } from \"remotion\";\n\nexport interface DynamicGridProps {\n  cellSize?: number;\n  lineColor?: string;\n  background?: string;\n  speed?: number;\n  direction?: \"diagonal\" | \"horizontal\" | \"vertical\";\n  className?: string;\n}\n\nexport function DynamicGrid({\n  cellSize = 40,\n  lineColor = \"#27272a\",\n  background = \"#0a0a0a\",\n  speed = 0.5,\n  direction = \"diagonal\",\n  className,\n}: DynamicGridProps) {\n  const frame = useCurrentFrame();\n\n  const offset = (frame * speed) % cellSize;\n\n  let tx = 0;\n  let ty = 0;\n  if (direction === \"horizontal\") {\n    tx = offset;\n  } else if (direction === \"vertical\") {\n    ty = offset;\n  } else {\n    tx = offset;\n    ty = offset;\n  }\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        overflow: \"hidden\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: `-${cellSize}px`,\n          backgroundImage: `\n            linear-gradient(to right, ${lineColor} 1px, transparent 1px),\n            linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)\n          `,\n          backgroundSize: `${cellSize}px ${cellSize}px`,\n          transform: `translate(${tx}px, ${ty}px)`,\n          willChange: \"transform\",\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/dynamic-grid.tsx"
    }
  ],
  "type": "registry:component"
}