CrazyGLLogo Sand Formation
Thousands of glowing sand grains drift on a warm desert current and re-form the supplied logo. Pointer movement scatters them in a Gaussian shockwave; springs and damping pull each grain back into the silhouette.
Usage
import LogoSandFormation from '@crazygl/hero-logo-sand-formation';
export default function Hero() {
return (
<LogoSandFormation
heading="Built from a million grains."
logo="/my-logo.png"
sampleMode="alpha"
grainCount={2200}
/>
);
}Customise
- Logo —
logoimage,sampleMode(alpha / luminosity / inverseLuma),sampleThreshold,sampleDensity,logoScale,logoOffsetX/Y. - Sand —
backgroundColor,transparent,sandColor,accentColor(sparkle),grainCount,grainSize,glowAmount,trailFade. - Motion —
windStrength,springStrength,damping,pulseRadius,pulseForce. - Content & typography — heading / subheading / two-column / custom content, plus heading font.
Best for
- Premium brand and agency landing pages
- Product launches with a tactile, interactive logo reveal
- Luxury, fragrance, or lifestyle sites with warm, earthy palettes
- AI and creative-tool homepages wanting a signature hero moment
One command, zero config.
npm install @crazygl/hero-logo-sand-formationImport 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 LogoSandFormation from '@crazygl/hero-logo-sand-formation';
export default function Landing() {
return (
<LogoSandFormation />
);
}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 LogoSandFormation from '@crazygl/hero-logo-sand-formation';
export default function Page() {
return (
<section>
<LogoSandFormation
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
