Hero made by @ybouane.

@crazygl/hero-magnetic-logo

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.

Demo

Magnetic Logo Field

Install

npm install @crazygl/hero-magnetic-logo

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.