CrazyGLInteractive Orb
A fluid iridescent marble floating in the dark. Domain-warped aurora currents — deep navy lobes, cyan pools, hot white folds — swirl across the sphere and flow toward your cursor, with fine contour ripples and filmic grain.
Usage
import InteractiveOrb from '@crazygl/hero-interactive-orb';
export default function Page() {
return (
<InteractiveOrb
heading="Feel the surface"
subheading="A fluid marble that answers the cursor."
orbSize={0.62}
stirStrength={1}
/>
);
}Customise
- Orb —
orbSize, pluscenterX/centerYto push the marble aside and lay heading copy opposite it. - Fluid —
flowSpeed(ambient drift),warpAmount(how tightly the currents fold),stirStrength(cursor influence),rippleAmount(fine contour rings in the pools),grainAmount. - Colors —
deepColor(dark lobes),poolColor(cyan basins),hotColor(white core),fringeColor(iridescent creases),bgColor, ortransparentto float the orb over your own backdrop.
Best for
- AI assistants and voice interfaces wanting a living "presence" centerpiece.
- Premium SaaS and creative-tool launch pages on dark themes.
- Music, meditation, and wellness products where the orb reads as a reactive companion.
One command, zero config.
npm install @crazygl/hero-interactive-orbImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import InteractiveOrb from '@crazygl/hero-interactive-orb';
export default function Landing() {
return (
<InteractiveOrb />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import InteractiveOrb from '@crazygl/hero-interactive-orb';
export default function Page() {
return (
<section>
<InteractiveOrb
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
