CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/inflatable-balloon-typography

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.

ReactWebGL3DInteractiveFont#three#3d#text#typography#balloon#inflatable#playful#saas#consumer#creator#kids#interactive#spring

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
01 · Install the package

One command, zero config.

npm install @crazygl/hero-inflatable-balloon-typography
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 InflatableBalloonTypography from '@crazygl/hero-inflatable-balloon-typography';

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

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

Bouncy Logo Mascot

The uploaded logo becomes a soft mascot-like 3D toy that drops in with snappy spring physics, reacts to the cursor like a squashy character, and pops into a colorful confetti burst when clicked — then drops in again.

Carousel of Product Toys

A slowly turning toy shelf — 5–8 chunky plastic-toy product icons rotate around the headline like collectibles on a display stand. Hover a toy to bring it forward; click to navigate.

Feature Blocks Playground

Each selling point is a colourful, chunky 3D block. The blocks fall from above, bounce into a deliberate stacked composition, and respond to hover and click — your product benefits, rendered as playful building blocks.

Chrome Mascot Logo

Your logo or mascot reborn as a chunky Y2K chrome object floating over a sunset gradient with twinkling stars and slow anamorphic lens flares. Real PBR mirror metal lit by a procedural HDR environment.

Iridescent Gradient Typography

Your headline cast in oil-slick iridescence. Real thin-film interference shifts the surface through cyan → green → gold → pink → violet → blue as you move the pointer, just like a soap bubble or a petrol puddle catching streetlight. Three.js TextGeometry + a MeshPhysicalMaterial iridescence layer, lit by a procedural HDR studio with concentrated softboxes.

Melting Typography

Headline cast in soft wax that drips slowly downward — vertices stretch into icicle-like extensions while letters stay readable. Hovering speeds up the melt; moving away lets the letters re-form. Glossy droplets fall from the bottoms.Live customizer

Inflatable Balloon Typography

Letter Depth0.28How thick each balloon letter is along Z. 0.28 reads as a soft pillow; below 0.15 reads as a flat sticker, above 0.45 reads as a fat marshmallow.Bevel Size0.04Rim rounding on each glyph. 0.04 gives the soft pillow corners; lower turns the letters crisp/hard, higher swallows fine details.Inflation0.7How rounded each balloon letter is. 0 = flat extrusion with crisp edges; 0.5 reads as a plump pillow; 1 = fully inflated balloon with the bevel filling the entire depth.Letter Spacing0.08Gap between adjacent letters in REF units. Inflation pushes letters outward visually, so a little extra spacing keeps them from kissing.Float Amplitude0.1How far each letter bobs up/down. 0 = no float; 0.1 is a calm hover; above 0.3 looks frantic.Float Speed1Bobbing frequency. 1 ≈ one cycle per ~3s; 0 freezes the float.Squash Strength0.4How much a letter compresses vertically (and bulges horizontally) when the cursor is near it. Volume-preserving.Squash Spring Stiffness1Spring constant on the squash response. Higher = snappier, lower = slower elastic.Bounce Wave Strength1Amplitude of the click-triggered bounce kick on each letter. 0 disables the bounce entirely.Bounce Wave Speed1.5How fast the bounce wave travels through the word. Higher = faster ripple across letters.Balloon ColorSheen / Highlight ColorSoft fabric-like sheen tint on the curved surface.Clearcoat (gloss layer)0.7Roughness0.45Key Light Intensity1.3Studio Reflection1.1Transparent backgroundBackground TopBackground BottomHeading FontFont for BOTH the 3D balloon letters and the DOM subheading/CTA. The balloons fetch this font's TTF and extrude its real glyph outlines. Rounded bold display faces balloon best: Fredoka, Baloo 2, Quicksand, Nunito. "Inherit" uses a bundled rounded-bold face (no network needed for the poster).Heading Font Weight700Heavier weights have thicker bowls, which balloon more convincingly. Static-weight Google fonts honor this exactly; variable-only fonts fall back to their default master.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.