Background Beams With Collision

1"use client";
2import { cn } from "@/lib/utils";
3import { motion, AnimatePresence } from "motion/react";
4import React, { useRef, useState, useEffect } from "react";
5 
6export const BackgroundBeamsWithCollision = ({
7  children,
8  className,
9}: {
10  children: React.ReactNode;
11  className?: string;
12}) => {
13  const containerRef = useRef<HTMLDivElement>(null);
14  const parentRef = useRef<HTMLDivElement>(null);
15 
16  const beams = [
17    {
18      initialX: 10,
19      translateX: 10,
20      duration: 7,
21      repeatDelay: 3,
22      delay: 2,
23    },
24    {
25      initialX: 600,
26      translateX: 600,
27      duration: 3,
28      repeatDelay: 3,
29      delay: 4,
30    },
31    {
32      initialX: 100,
33      translateX: 100,
34      duration: 7,
35      repeatDelay: 7,
36      className: "h-6",
37    },
38    {
39      initialX: 400,
40      translateX: 400,
41      duration: 5,
42      repeatDelay: 14,
43      delay: 4,
44    },
45    {
46      initialX: 800,
47      translateX: 800,
48      duration: 11,
49      repeatDelay: 2,
50      className: "h-20",
51    },
52    {
53      initialX: 1000,
54      translateX: 1000,
55      duration: 4,
56      repeatDelay: 2,
57      className: "h-12",
58    },
59    {
60      initialX: 1200,
61      translateX: 1200,
62      duration: 6,
63      repeatDelay: 4,
64      delay: 2,
65      className: "h-6",
66    },
67  ];
68 
69  return (
70    <div
71      ref={parentRef}
72      className={cn(
73        "h-96 md:h-[40rem] bg-gradient-to-b from-white to-neutral-100 dark:from-neutral-950 dark:to-neutral-800 relative flex items-center w-full justify-center overflow-hidden",
74        // h-screen if you want bigger
75        className
76      )}
77    >
78      {beams.map((beam) => (
79        <CollisionMechanism
80          key={beam.initialX + "beam-idx"}
81          beamOptions={beam}
82          containerRef={containerRef}
83          parentRef={parentRef}
84        />
85      ))}
86 
87      {children}
88      <div
89        ref={containerRef}
90        className="absolute bottom-0 bg-neutral-100 w-full inset-x-0 pointer-events-none"
91        style={{
92          boxShadow:
93            "0 0 24px rgba(34, 42, 53, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.04), 0 0 4px rgba(34, 42, 53, 0.08), 0 16px 68px rgba(47, 48, 55, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1) inset",
94        }}
95      ></div>
96    </div>
97  );
98};
99 
100const CollisionMechanism = React.forwardRef<
101  HTMLDivElement,
102  {
103    containerRef: React.RefObject<HTMLDivElement>;
104    parentRef: React.RefObject<HTMLDivElement>;
105    beamOptions?: {
106      initialX?: number;
107// … truncated