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

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.

ReactInteractiveFont#typography#dom#magnetic#playful#interactive#saas#portfolio#agency#css#physics

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
01 · Install the package

One command, zero config.

npm install @crazygl/hero-magnetic-letter-field
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 MagneticLetterField from '@crazygl/hero-magnetic-letter-field';

export default function Landing() {
  return (
    <MagneticLetterField />
  );
}
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 MagneticLetterField from '@crazygl/hero-magnetic-letter-field';

export default function Page() {
  return (
    <section>
      <MagneticLetterField
        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 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.

Kinetic Split Typography

A bold grotesk headline is split into horizontal slices that fly in from alternating sides, settle into alignment, and then parallax against the pointer at different depths.

Letter Morph

Heading where each letter cross-fades and morphs through the next phrase — letters that match stay, letters that don't blur-swap.

Typewriter Effect

A cycling wordmark that types itself out character by character, pauses, deletes, and rolls to the next word — with a blinking block cursor that glows softly against a layered atmospheric backdrop.

Image Masked Text

A heading whose letterforms are filled with a photograph. Uses native CSS background-clip:text so the wordmark stays selectable and crisp at any zoom, with cover, contain, or custom-percent fit modes.Live customizer

Magnetic Letter Field

CTA LabelOn CTA ClickURL to navigate to when the CTA is clicked. From code, you can also pass a function — same prop name, type-detected at runtime.Magnetic Strength1How strongly the cursor pulls or pushes nearby letters. 1.0 is the photogenic default — at 0 letters ignore the cursor; at 2 they snap dramatically.Magnetic Radius180pxField falloff radius in CSS pixels. 180px feels like a soft halo around the cursor; tighten it for a sharp local effect, widen it for a sweeping wave.Field PolarityWhether the cursor pushes letters away (classic magnetic feel) or draws them in.Max Tilt12°How much each letter can rotate toward the cursor when the field is active. 0 = no tilt; 12° feels alive without becoming sloppy.Spring Stiffness1How fast letters return to their rest position once the cursor moves away. 1.0 = snappy; lower = lazy/floaty; higher = rigid/tight.Word Float Strength0.8When the cursor is closest to a letter, that letter's whole word lifts upward. 0 = off; 0.8 = a confident hop; 2 = the word jumps off the page.Text ColorHeading and copy color.Accent ColorColor the letters of the currently hovered word take on. Pick a vivid hue for the strongest pop.Heading Weight800Background ColorBase background color. The gradient overlay rides on top of this.Gradient OverlaySoft pastel or dark gradient layered over the background color.Transparent BackgroundDrop the background entirely — useful when composing the hero on top of an existing page section.Heading FontGoogle Font used for the magnetic headline. Rounded grotesks like Plus Jakarta Sans, Inter and Space Grotesk work best.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.