Components
Loading preview...
"Celestial Sphere," combines several of the best ideas from the code you shared: Procedural Generation: Like the lightning and dark veil examples, it uses procedural noise to generate a unique, ever-shifting visual. Mouse Interaction: Inspired by the iridescence shader, the visual reacts to your mouse movements, creating a "warp" effect as you move the cursor. Customizable Props: The component is highly customizable, allowing you to control hue, speed, zoom, and particleSize through props. Clean React Structure: It's built as a self-contained React component using modern hooks (useRef, useEffect), making it easy to drop into any project.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/celestial-sphereimport { CelestialSphere } from "@/components/ui/celestial-sphere";
export default function DemoOne() {
return (
<div className="relative flex h-screen w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-black">
<CelestialSphere
hue={210.0}
speed={0.4}
zoom={1.2}
particleSize={4.0}
className="absolute top-0 left-0 w-full h-full"
/>
<div className="relative z-10 text-center text-white pointer-events-none">
<h1 className="text-6xl font-bold tracking-tighter">Celestial Sphere</h1>
<p className="mt-4 text-lg text-gray-300">An interactive WebGL shader component for React.</p>
</div>
</div>
);
}