CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/mousewavetext

Mouse Wave Text

A wave travels along the heading following the cursor — each letter pops up as the wave passes, then settles back. Switch to auto mode for a hands-off demo.

ReactInteractiveFont#wave#cursor#typography

Usage

import MouseWaveText from '@crazygl/hero-mousewavetext';

export default function App() {
	return (
		<MouseWaveText
			heading="ride the wave"
			mode="pointer"
			amplitude={36}
			textColor="#ffffff"
		/>
	);
}

Customise

  • Content — heading, the text rendered one span per letter.
  • Driver — mode: pointer (the wave follows the cursor) or auto (it oscillates on its own).
  • Wave — amplitude (peak letter rise in px), spread (how many characters the wave covers), autoSpeed (oscillation rate in auto mode).
  • Typography — textColor, fontSize, headingFontFamily (any Google font), headingFontWeight.
  • Backdrop — transparentBackground toggle, or a solid bgColor.

Best for

  • Playful SaaS and product landing headlines.
  • Portfolios and personal sites wanting a single interactive flourish.
  • Event / launch pages where the headline is the hero.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-mousewavetext
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 MouseWaveText from '@crazygl/hero-mousewavetext';

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

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

Magnet Text

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

Cursor Shadow Text

The heading casts a real drop shadow whose direction tracks the cursor — like a single fixed light moving across the room.

Proximity Text FX

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

Text Image Cursor

A list of items where hovering each row reveals a thumbnail that follows the cursor — case-study index pattern, magazine-grade.

Cursor Reveal Text

Two stacked paragraphs — a primary line shown in the surface colour, and a secret reveal line shown only inside a cursor-following spotlight that grows on hover.

Unblur Text Reveal

A paragraph that resolves word-by-word as the viewer scrolls, with a choice of six animation styles — blur, slide-up, scale, rotate, wave, or glow — and a colour transition from an initial muted hue to the final readable colour.Live customizer

Mouse Wave Text

Wave driverChoose what controls the wave. Pointer = follows the cursor; Auto = oscillates on its own.Wave height (px)36pxWave spread (chars)4Auto speed1Oscillation rate when driver is Auto.Text colourFont size110pxFontWeight700Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.