Background Beams With Collision

"use client";
import React from "react";
import { BackgroundBeamsWithCollision } from "@/lab/aceternity/ui/background-beams-with-collision";
import { Fit } from "./_fit";

export default function BackgroundBeamsWithCollisionDemo() {
  return (
    <Fit width={1100} height={640} max={1}>
      <BackgroundBeamsWithCollision className="h-full md:h-full">
        <h2 className="text-7xl relative z-20 font-bold text-center text-black dark:text-white font-sans tracking-tight">
          What&apos;s cooler than Beams?{" "}
          <div className="relative mx-auto inline-block w-max [filter:drop-shadow(0px_1px_3px_rgba(27,_37,_80,_0.14))]">
            <div className="absolute left-0 top-[1px] bg-clip-text bg-no-repeat text-transparent bg-gradient-to-r py-4 from-purple-500 via-violet-500 to-pink-500 [text-shadow:0_0_rgba(0,0,0,0.1)]">
              <span className="">Exploding beams.</span>
            </div>
            <div className="relative bg-clip-text text-transparent bg-no-repeat bg-gradient-to-r from-purple-500 via-violet-500 to-pink-500 py-4">
              <span className="">Exploding beams.</span>
            </div>
          </div>
        </h2>
      </BackgroundBeamsWithCollision>
    </Fit>
  );
}