Fireworks Background

import { FireworksBackground } from "@/components/ui/fireworks-background";
import * as React from 'react';


// If you don't have a cn helper, you can define a simple one here or remove it in the imported component.
function cn(...classes: Array<string | undefined | false | null>) {
  return classes.filter(Boolean).join(' ');
}


export default function DemoOne() {
  return (
 <div className={cn('relative h-full w-full min-h-screen bg-black text-white')}>
      {/* Fireworks background fills the screen */}
      <FireworksBackground
        className="absolute inset-0"
        // optional tweaks:
        population={1.2}
        fireworkSpeed={{ min: 4, max: 8 }}
        fireworkSize={{ min: 2, max: 5 }}
        particleSpeed={{ min: 2, max: 7 }}
        particleSize={{ min: 1, max: 5 }}
      />

      {/* Foreground content */}
      <main className="relative z-10 flex items-center justify-center min-h-screen">
        <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight">
          Happy Day! 🎆
        </h1>
      </main>
    </div>
  ) ;
}