SVG Mask Effect

"use client";
import { MaskContainer } from "@/lab/aceternity/ui/svg-mask-effect";

export default function SVGMaskEffectDemo() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center overflow-hidden">
      <MaskContainer
        revealText={
          <p className="mx-auto max-w-[85cqw] text-center text-[clamp(0.9rem,3.6cqw,2.25rem)] font-bold text-slate-800 dark:text-white">
            The first rule of MRR Club is you do not talk about MRR Club. The second rule of MRR Club is
            you DO NOT talk about MRR Club.
          </p>
        }
        className="h-full w-full text-white dark:text-black [&_.text-4xl]:max-w-[85cqw] [&_.text-4xl]:text-[clamp(0.9rem,3.6cqw,2.25rem)]"
      >
        Discover the power of <span className="text-blue-500">Tailwind CSS v4</span> with native CSS
        variables and container queries with <span className="text-blue-500">advanced animations</span>.
      </MaskContainer>
    </div>
  );
}