Components
Loading preview...
Interactive 3D sphere animation with dynamic collisions, mouse interactions, and breathing effects. Features a loading animation sequence and responsive particle system perfect for modern hero sections.
@kedhar
npx shadcn@latest add https://21st.dev/r/kedhareswer.12110626/festivity-heroimport Component from '../components/ui/festivity-hero'
export default function Default() {
return (
<div className="relative w-full h-screen overflow-hidden">
<Component />
<div className="absolute top-8 left-8 z-10">
<h1 className="text-4xl font-bold text-white hide-text" style={{ opacity: 0 }}>
Interactive 3D Demo
</h1>
<p className="text-lg text-gray-300 mt-2 hide-text" style={{ opacity: 0 }}>
Move your mouse to interact with the spheres
</p>
</div>
<div className="main-txt absolute inset-0 flex items-center justify-center z-10">
<p className="text-2xl text-white">Loading...</p>
</div>
</div>
)
}