_{Hero made by @ybouane.}

@crazygl/hero-jumpytextfx

Each letter bounces in independently with spring-damped physics, then idles with a subtle hover-bounce — text that feels alive.

Demo

Jumpy Text FX

Install

npm install @crazygl/hero-jumpytextfx

Usage

import JumpyTextFx from '@crazygl/hero-jumpytextfx';

export default function Page() {
  return (
    <JumpyTextFx
      heading="happy little letters"
      bounceHeight={10}
      fontSize={96}
    />
  );
}

Customise

• Content — heading (each character animates separately).
• Motion — bounceHeight (idle hover px), bouncePeriod (idle period s), introHeight (intro drop px).
• Typography — textColor, fontSize, headingFontFamily (auto-loaded from Google Fonts), headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Playful product, app and consumer brand landing pages.
• Portfolios and event sites wanting a lively typographic headline.
• Any hero where a single line of copy should carry the energy.

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.