Hero made by @ybouane.

@crazygl/hero-proximitytextfx

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

Demo

Proximity Text FX

Install

npm install @crazygl/hero-proximitytextfx

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.

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.