CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/magnetic-field-lines

Magnetic Field Lines

Thousands of particles stream along smooth, divergence-free flow lines — a live visualisation of an invisible magnetic field. The pointer drops a new magnetic pole into the field; lines visibly bend, swirl, and repel around the cursor.

ReactCanvasInteractiveFont#magnetic#field-lines#particles#curl-noise#flow#interactive#pointer#abstract#premium

Usage

import MagneticFieldLines from '@crazygl/hero-magnetic-field-lines';

export default function Hero() {
	return (
		<MagneticFieldLines
			heading="Invisible forces."
			poleMode="swirl"
			lineColor="#9fdcff"
		/>
	);
}

Customise

  • Content — heading + subheading, two columns, or a custom node.
  • Field — particleCount, fieldScale, flowSpeed, attractorCount, lineWidth, trailFade (tail length).
  • Colour — lineColor, backgroundColor, lineOpacity.
  • Pointer — poleMode (swirl / attract / repel), poleStrength, poleRadius.
  • Backdrop — transparent.

Best for

  • Premium SaaS and developer-tool landing pages.
  • Physics, science and data brands; AI and research products.
  • Any site wanting an elegant, intelligent backdrop behind its headline.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-magnetic-field-lines
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import MagneticFieldLines from '@crazygl/hero-magnetic-field-lines';

export default function Landing() {
  return (
    <MagneticFieldLines />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import MagneticFieldLines from '@crazygl/hero-magnetic-field-lines';

export default function Page() {
  return (
    <section>
      <MagneticFieldLines
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Magnetic 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.

Magnetic Dot Cloud

Thousands of floating 3D points settle into a soft sphere of light. Wherever you point, a gravity well opens — nearby dots erupt radially outward from the sphere's centre, bulging the cloud like a living particle sculpture. A critically-damped spring eases every swell in and out; idle, the whole field drifts and turns.

Soft Volumetric Particle Fog

Thousands of tiny semi-transparent dust motes drift in depth inside a soft beam of light. Curl-noise keeps them floating naturally; depth fog reads volumetric; the pointer stirs a slow vortex that swirls particles away and leaves a fading wake, like moving a hand through mist.

Touch Sparkle Grid

A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests.

Particle Slider

A cinematic auto-playing slider built on one shared particle engine. Each slide picks a visualization — magnetic sphere, spiral galaxy, liquid wave field, vortex portal, image-to-particle, particle text, neural cloud, cube lattice, orbital rings, terrain — and the thousands of particles MORPH from one formation into the next instead of resetting. The field reacts to the pointer (repel / attract / magnetic). Per-slide heading, subheading, CTA, text transition and layout. Dark, premium, developer-grade.

Reactive Gradient Silk

A background of folded silk made of light — very smooth gradients with broad flowing folds drifting in slow, elegant fabric motion. The folds carry deep desaturated jewel tones and catch a soft specular sheen along each crease. The pointer presses a gentle indentation into the cloth: the folds bend around the cursor and the highlights and shadows shift with it.Live customizer

Magnetic Field Lines

Particle count2500Number of particles advected through the field. More particles = denser, silkier line coverage (and more work per frame).Field scale1Spatial frequency of the base flow. Low = broad, sweeping curves; high = tight, intricate eddies.Flow speed1How fast particles travel along the field lines. 0 freezes the flow into a still composition.Attractors2Number of invisible static dipole attractors woven into the base field, giving it large-scale structure and recurring swirls.Line width0.7pxStroke width of each particle's fading trail. Thin reads as elegant filaments; thicker reads as ribbons.Trail fade0.06How quickly trails fade each frame. Low = long, smoky comet tails; high = short, crisp dashes.Line colourHue of the field lines. Pale cyan-white reads as cold magnetism on near-black.BackgroundBackdrop colour behind the lines. Near-black makes the pale streams glow.Line opacity0.5Per-segment opacity of the trails. Low keeps the field a whisper behind the heading; high makes it the star.Pole modeHow the field reacts to the pointer pole. Swirl rotates lines around the cursor; attract pulls them in; repel pushes them away.Pole strength1.4Magnitude of the pointer's magnetic influence. 0 disables it; high values warp the whole field dramatically.Pole radius0.4Reach of the pointer pole as a fraction of the canvas. Larger pulls in distant lines too.Transparent backgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.