Components
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
Loading preview...
import { SparklesCore } from "@/components/ui/spark-theme";
const DemoOne = () => {
return (
<div className="relative w-full h-screen bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-800 overflow-hidden">
<SparklesCore
id="default-theme-sparkles"
background="transparent"
minSize={0.4}
maxSize={1.4}
particleDensity={120}
className="w-full h-full"
particleColor="#FFFFFF"
speed={2}
/>
<div className="absolute inset-0 flex items-center justify-center z-10">
<div className="text-center space-y-6">
<h1 className="text-6xl font-bold text-white mb-4">
Spark Theme
</h1>
<p className="text-xl text-white/80 max-w-2xl">
Clean white particles on gradient background
</p>
</div>
</div>
</div>
);
};
export { DemoOne };