Loading hero…

@crazygl/proximitytextfx

Proximity Text FX

Letters near the cursor scale up and brighten; letters further away dim and shrink — an inverse-distance attention effect.

React

Interactive

Font

#proximity

#cursor

#typography

Usage

import ProximityTextFx from '@crazygl/hero-proximitytextfx';

export default function Hero() {
	return (
		<ProximityTextFx
			heading="follow the cursor"
			radius={240}
			peakScale={1.6}
		/>
	);
}

Customise

Effect — radius (influence falloff in px), peakScale (max letter scale at the cursor), minBrightness (opacity floor for far letters).
Typography — textColor, fontSize, headingFontFamily, headingFontWeight.
Backdrop — bgColor or transparentBackground.

Best for

Interactive landing pages and portfolio headers that reward cursor movement.
Playful product or agency splash sections.
Call-to-action headlines where you want the eye to follow the pointer.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-proximitytextfx

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 ProximityTextFX from '@crazygl/hero-proximitytextfx';

export default function Landing() {
  return (
    <ProximityTextFX />
  );
}

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 ProximityTextFX from '@crazygl/hero-proximitytextfx';

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

Similar heroes

Live customizer