Background Ripple Effect

"use client";
import React from "react";
import { BackgroundRippleEffect } from "@/lab/aceternity/ui/background-ripple-effect";

export default function BackgroundRippleEffectDemo() {
  return (
    <div className="relative flex h-full w-full flex-col items-start justify-end overflow-hidden [container-type:inline-size]">
      <BackgroundRippleEffect cellSize={48} />
      <div className="pointer-events-none mb-[8%] w-full px-4">
        <h2 className="relative z-10 mx-auto max-w-4xl text-center text-[clamp(1.1rem,5.5cqw,4.5rem)] leading-tight font-bold text-neutral-800 dark:text-neutral-100">
          Interactive Background Boxes Ripple Effect
        </h2>
        <p className="relative z-10 mx-auto mt-[1.5cqw] max-w-xl text-center text-[clamp(0.65rem,1.6cqw,1rem)] text-neutral-800 dark:text-neutral-500">
          Hover over the boxes above and click.To be used on backgrounds of hero sections OR Call
          to Action sections. I beg you don&apos;t use it everywhere.
        </p>
      </div>
    </div>
  );
}