Background Meteors

1'use client';
2import React, { useEffect, useState, ReactNode } from 'react';
3import { motion } from 'motion/react';
4 
5interface Beam {
6  id: number;
7  x: number;
8  duration: number;
9}
10 
11interface BackgroundMeteorsProps {
12  children?: ReactNode;
13}
14 
15export default function BackgroundMeteors({
16  children,
17}: BackgroundMeteorsProps) {
18  const [beams, setBeams] = useState<Beam[]>([]);
19  const gridSize = 40;
20  const totalLines = 35;
21 
22  const generateSafeGridPositions = (count: number): number[] => {
23    const available: number[] = [];
24    for (let i = 0; i < totalLines - 1; i++) {
25      available.push(i);
26    }
27 
28    const selected: number[] = [];
29    while (available.length > 0 && selected.length < count) {
30      const idx = Math.floor(Math.random() * available.length);
31      const value = available[idx];
32      selected.push(value);
33      available.splice(
34        0,
35        available.length,
36        ...available.filter((v) => Math.abs(v - value) > 1),
37      );
38    }
39 
40    return selected.map((line) => line * gridSize);
41  };
42 
43  useEffect(() => {
44    const generateBeams = () => {
45      const count = Math.floor(Math.random() * 2) + 3;
46      const xPositions = generateSafeGridPositions(count);
47 
48      const newBeams: Beam[] = xPositions.map((x) => ({
49        id: Math.random(),
50        x,
51        duration: 4 + Math.random() * 1.5,
52      }));
53 
54      setBeams(newBeams);
55 
56      const maxDuration = Math.max(...newBeams.map((b) => b.duration));
57      setTimeout(generateBeams, (maxDuration - 0.5) * 1000);
58    };
59 
60    generateBeams();
61  }, []);
62 
63  return (
64    <div className='relative flex h-screen w-full items-center justify-center overflow-hidden bg-white dark:bg-black'>
65      <div
66        className='absolute inset-0'
67        style={{
68          backgroundSize: `${gridSize}px ${gridSize}px`,
69          backgroundImage:
70            'linear-gradient(to right, #e4e4e7 1px, transparent 1px), linear-gradient(to bottom, #e4e4e7 1px, transparent 1px)',
71        }}
72      />
73      <div
74        className='absolute inset-0 dark:block hidden'
75        style={{
76          backgroundSize: `${gridSize}px ${gridSize}px`,
77          backgroundImage:
78            'linear-gradient(to right, #262626 1px, transparent 1px), linear-gradient(to bottom, #024e6b  1px, transparent 1px)',
79        }}
80      />
81      <div
82        className='pointer-events-none absolute inset-0 flex items-center justify-center bg-white dark:bg-black 
83        mask-[radial-gradient(ellipse_at_center,transparent_20%,black)]'
84// … truncated