Hero made by @ybouane.

@crazygl/hero-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.

Demo

Magnetic Field Lines

Install

npm install @crazygl/hero-magnetic-field-lines

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.

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.