confetti

1"use client";
2 
3import { useRef } from "react";
4 
5import {
6  Confetti,
7  type ConfettiRef,
8} from "@/components/magicui/confetti";
9 
10export function ConfettiDemo() {
11  const confettiRef = useRef<ConfettiRef>(null);
12 
13  return (
14    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
15      <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
16        Confetti
17      </span>
18 
19      <Confetti
20        ref={confettiRef}
21        className="absolute left-0 top-0 z-0 size-full"
22        onMouseEnter={() => {
23          confettiRef.current?.fire({});
24        }}
25      />
26    </div>
27  );
28}