CrazyGLMagnetic Logo Field
An image-driven particle field. Drop in a logo and the particles drift around then snap into its silhouette in waves. Cursor magnetically pulls or repels the swarm. Sample by alpha, luminosity, or transparency.
Usage
import MagneticLogo from '@crazygl/hero-magnetic-logo';
export default function Hero() {
return (
<MagneticLogo
logo="https://crazygl.com/samples/crazygl.svg"
heading="Your logo, alive."
sampleMode="alpha"
cursorForce={1}
/>
);
}Inputs you can plug in
- Logo — Transparent SVG (preferred) or PNG. The silhouette becomes the formation the particles snap into, and transparency gives the cleanest edges. JPGs work too — the background is auto-detected and dropped.
Notable controls
- Sample by — How the image is read into the shape: alpha, bright pixels (luminosity), or dark pixels (inverse luminosity). Match it to your logo; the default suits dark marks on transparent backgrounds.
- Cursor Force — Magnetic pull on the swarm. Positive attracts, negative repels; ±1 stays interactive without yanking the whole swarm, ±1.8 is dramatic.
- Cycle Animation — When on, particles loop between free drift and logo formation; when off they stay locked to the mark so it never breaks. Pair with Cycle Period (3–20s) to pace the reveal.
- Drift — Ambient motion when not locked. 0.3–0.5 reads as "alive"; above 1 the silhouette gets noisy.
- Glow — How far each particle's halo spreads. 0.5–0.8 is the photogenic range; push past 1.5 for a soft nebula.
One command, zero config.
npm install @crazygl/hero-magnetic-logoImport 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 MagneticLogoField from '@crazygl/hero-magnetic-logo';
export default function Landing() {
return (
<MagneticLogoField />
);
}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 MagneticLogoField from '@crazygl/hero-magnetic-logo';
export default function Page() {
return (
<section>
<MagneticLogoField
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
