Components
Spark Theme
A beautiful default sparkles theme featuring clean white particles floating over a stunning blue-to-purple gradient background. Perfect for hero sections, backgrounds, and interactive UI elements with smooth 60fps animations
Features ✨ 120 clean white particles 🎨 Beautiful blue-to-purple gradient background 🖱️ Interactive (click to add particles) ⚡ 60+ FPS smooth performance 📱 Fully responsive 🎯 Ready-to-use theme 🔧 Built with TypeScript 🎭 Framer Motion animations
"use client";
import { SparklesCore } from "@/components/ui/spark-theme";
const settings = {
background: "transparent",
minSize: 0.6,
maxSize: 1.4,
speed: 4,
particleColor: "#ffffff",
particleDensity: 100,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen bg-background">
<SparklesCore
id="tsparticles"
background={s.background}
minSize={s.minSize}
maxSize={s.maxSize}
speed={s.speed}
particleColor={s.particleColor}
particleDensity={s.particleDensity}
className="h-full w-full"
/>
</div>
);
}