{
  "name": "dynamic-grid",
  "type": "registry:ui",
  "description": "Subtle drifting dot and line grid background",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "motion-tokens"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/dynamic-grid.tsx",
      "type": "registry:ui",
      "content": "import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { EASING } from \"@/remotion/lib/motion-tokens\";\n\nexport type DynamicGridProps = {\n  backgroundColor?: string;\n  lineColor?: string;\n  sweepColor?: string;\n  spacing?: number;\n  speed?: number;\n  sweepDurationInFrames?: number;\n};\n\nexport const DynamicGrid: React.FC<DynamicGridProps> = ({\n  backgroundColor = \"#080810\",\n  lineColor = \"rgba(255,255,255,0.1)\",\n  sweepColor = \"rgba(232,184,109,0.55)\",\n  spacing = 64,\n  speed = 0.4,\n  sweepDurationInFrames = 150,\n}) => {\n  const frame = useCurrentFrame();\n  const { width, height } = useVideoConfig();\n\n  // Wraps every `spacing` px, so the pattern re-aligns with itself on wrap —\n  // a hard modulo on frame instead would snap the drift back to zero.\n  const driftPx = ((frame * speed) % spacing + spacing) % spacing;\n\n  const sweepT = interpolate(frame % sweepDurationInFrames, [0, sweepDurationInFrames], [0, 1], {\n    easing: EASING.editorial,\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const diag = width + height;\n  const sweepOffset = interpolate(sweepT, [0, 1], [-diag * 0.3, diag * 0.5]);\n\n  return (\n    <AbsoluteFill style={{ background: backgroundColor, overflow: \"hidden\" }}>\n      <AbsoluteFill\n        style={{\n          backgroundImage: `linear-gradient(${lineColor} 1px, transparent 1px), linear-gradient(90deg, ${lineColor} 1px, transparent 1px)`,\n          backgroundSize: `${spacing}px ${spacing}px`,\n          backgroundPosition: `${driftPx}px ${driftPx}px`,\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          top: -height * 0.5,\n          left: -width * 0.2,\n          width: 260,\n          height: height * 2,\n          transform: `translateX(${sweepOffset}px) rotate(18deg)`,\n          background: `linear-gradient(90deg, transparent, ${sweepColor}, transparent)`,\n          filter: \"blur(40px)\",\n          mixBlendMode: \"screen\",\n        }}\n      />\n      <AbsoluteFill\n        style={{\n          background: \"radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,0.6) 100%)\",\n          pointerEvents: \"none\",\n        }}\n      />\n    </AbsoluteFill>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "advanced",
    "tags": [
      "background"
    ]
  }
}