Hero made by @ybouane.

@crazygl/hero-magnet-text

Letters are pulled toward the cursor with falloff — close letters attract strongly, distant letters barely tug. Springs return them to the line.

Demo

Magnet Text

Install

npm install @crazygl/hero-magnet-text

Usage

import MagnetText from '@crazygl/hero-magnet-text';

export default function Page() {
  return (
    <MagnetText
      heading="magnetic"
      strength={0.6}
      radiusPx={260}
    />
  );
}

Customise

• Content — heading.
• Magnet — strength (pull amount), radiusPx (influence radius).
• Typography — textColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Playful, interactive brand and product headlines
• Creative-studio and portfolio hero sections
• Landing pages that reward cursor exploration

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.