Hero made by @ybouane.

@crazygl/hero-inflatable-balloon-typography

Your headline becomes a row of soft, puffy balloon letters. Each glyph is inflated outward along its surface normal, floats gently with its own bobbing rhythm, squashes elastically when your cursor gets close, and ripples in a bounce wave when you click anywhere on the canvas.

Demo

Inflatable Balloon Typography

Install

npm install @crazygl/hero-inflatable-balloon-typography

Usage

import InflatableBalloonTypography from '@crazygl/hero-inflatable-balloon-typography';

export default function Page() {
  return (
    <InflatableBalloonTypography
      heading="Squishy"
      inflateAmount={0.7}
      textColor="#ff6fb0"
    />
  );
}

Customise

• Content — heading (one short word balloons best), subheading, ctaLabel/onCTAClick/ctaTextColor/ctaBgColor.
• Geometry — extrudeDepth (letter thickness), bevelSize, inflateAmount (0 = flat extrusion, 1 = fully blown-up balloon), letterSpacing.
• Motion — floatAmplitude/floatSpeed (per-letter bob), squashStrength/squashSpringStiffness (cursor squash), bounceWaveStrength/bounceWaveSpeed (click ripple).
• Material — textColor, sheenColor, clearcoat, roughness.
• Lighting — keyLightIntensity, envIntensity (studio reflection).
• Background & type — transparentBackground, bgTop/bgBottom, headingFontFamily, headingFontWeight (the balloons extrude this font's real glyphs).

Best for

• Consumer apps and playful SaaS launch pages
• Creator tools and kids' or education brands
• Candy and DTC e-commerce product pages that want warmth over polish

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.