Hero Section With Beams and Grid

Animated light beams travel diagonally and explode into particles when they hit the product screenshot. The beams use orange-yellow gradients and run continuously with staggered timing. A rotated CSS grid pattern sits behind everything, fading at the edges with mask-image gradients.

The hero includes a balanced headline (using react-wrap-balancer), description text, two CTA buttons, and a product screenshot in a double-bordered frame. Configure beam starting positions, travel distance, duration, and delay through the component props. Dark mode inverts the grid color automatically.

Good for AI product pages, developer tool marketing, tech startup sites, API documentation homepages, and data platform landing pages where you want a technical, high-energy feel.