Hero made by @ybouane.

@crazygl/hero-magnetic-letter-field

Every character of the headline is an individual physical object. The cursor projects an invisible magnetic field — letters lean toward it, push back, and lift away. Hover a word and its letters float upward like iron filings rising from a sheet of paper.

Demo

Magnetic Letter Field

Install

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

Usage

import MagneticLetterField from '@crazygl/hero-magnetic-letter-field';

export default function Hero() {
  return (
    <MagneticLetterField
      heading={'Make every\nword magnetic.'}
      repelOrAttract="repel"
      ctaLabel="Try it yourself"
    />
  );
}

Customise

• Content / CTA — heading (newlines control wrapping), subheading, ctaLabel, onCTAClick.
• Magnetism — magneticStrength, magneticRadius, repelOrAttract, maxTiltDegrees.
• Spring — springStiffness (how fast letters settle home).
• Word float — wordFloatStrength (how high the hovered word lifts).
• Appearance — textColor, accentColor (hovered word), headingFontWeight, headingFontFamily.
• Background — bgColor, bgGradient (preset overlay), transparentBackground.

Best for

• Agency, studio, and portfolio sites where the type is the showpiece
• Modern SaaS landing pages wanting a premium interactive layer without WebGL
• Conference / product-launch heroes needing one memorable interaction beat

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.