Components
A full-screen, canvas-driven particle field that arcs gracefully around an off-screen magnetic center. Particles trail with soft fading and glow, shifting in hue over time to evoke a celestial aurora. Perfect for immersive hero backgrounds or ambient generative-art overlays.
npx @21st-dev/cli add dhileepkumargm/celestial-resonanceLoading preview...
import React from 'react'
import CelestialResonance, { CelestialResonanceProps } from '@/components/ui/celestial-resonance'
export const CelestialResonanceDemo = () => {
const demoProps: CelestialResonanceProps = {
particleCount: 1200,
particleSpeed: 0.08,
particleLife: 500,
trailOpacity: 0.12,
hueSpeed: 0.2,
canvasGlow: 15,
className: 'flex flex-col items-center justify-center text-center p-8',
}
return (
<CelestialResonance {...demoProps}>
<h1 className="text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-500">
Celestial Resonance
</h1>
<p className="mt-4 text-lg text-gray-300 max-w-xl">
Particles drawn toward a cosmic magnet, leaving shimmering trails.
</p>
</CelestialResonance>
)
}
export default CelestialResonanceDemo