Components
Celestial Sphere
"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.
import { CelestialSphere } from "@/components/ui/celestial-sphere";
const settings = {
hue: 210.0,
speed: 0.4,
zoom: 1.2,
particleSize: 4.0,
};
export default function DemoOne(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<CelestialSphere
hue={s.hue}
speed={s.speed}
zoom={s.zoom}
particleSize={s.particleSize}
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>
);
}