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

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.

ReactWebGL3DInteractiveFont#three#3d#typography#wax#melting#liquid#experimental#fashion#music#interactive

Usage

import MeltingTypography from '@crazygl/hero-melting-typography';

export default function Page() {
  return (
    <MeltingTypography
      heading="MELT"
      textColor="#d34a4a"
      dripAmount={0.6}
      clearcoat={0.85}
    />
  );
}

Customise

  • Content — heading (the word that melts; 4–8 letters read best), subheading, ctaLabel, onCTAClick.
  • Geometry — extrudeDepth, letterSpacing.
  • Melting — dripAmount, dripSpeed, dripVariability.
  • Hover — hoverMeltMultiplier, reformSpeed.
  • Drops — dropParticleCount.
  • Material — textColor, roughness, clearcoat.
  • Lighting — envIntensity (studio reflection), keyLightIntensity.
  • Background — transparentBackground, bgColor.
  • Typography — headingFontFamily (drives the 3D word, default Changa One), headingFontWeight.

Best for

  • Fashion and streetwear launch pages.
  • Music and album landing sites.
  • Experimental art-direction portfolios.
  • Bold creative-studio homepages.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-melting-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 MeltingTypography from '@crazygl/hero-melting-typography';

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

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

Typography as Terrain

A bold headline is rasterised into a heightmap and extruded into a 3D landscape — the letters rise out of the ground as carved plateaus and ridges, lit by a low sun with drifting cloud shadows and atmospheric haze. A fixed aerial-oblique camera keeps the word readable, and the pointer orbits the terrain for parallax.

Liquid Metal Typography

Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.

Neon Tube Typography

A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus stacked blurred copies for true additive bloom.

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.

Particle Typography

A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze.

Kinetic Split Typography

A bold grotesk headline is split into horizontal slices that fly in from alternating sides, settle into alignment, and then parallax against the pointer at different depths.Live customizer

Melting Typography

Extrude Depth0.2Thickness of the letter bodies. Sweet spot is 0.18-0.28 — too thin reads as flat decals, too thick swamps the bevel highlight.Letter Spacing0.04World-unit gap between glyphs. 0.04 reads as tight bold; >0.15 opens up for wide display layouts.Drip Amount0.6Maximum melt magnitude. 0 = solid, ~0.4 looks 'just-starting', 0.6 (default) reads as actively dripping with rounded beads, 1.2+ goes fully liquefied.Drip Speed1How fast the melt evolves over time when no cursor interaction is present.Drip Variability0.5How uneven the dripping is across the letters. 0 = uniform melt, 1 = pronounced wax-like clumps and channels.Hover Melt Multiplier3How much faster the melt evolves when the cursor is over the letters.Re-form Speed1.5How fast the letters un-melt when the cursor leaves. 0 = no reform, 1.5 = a couple of seconds.Drop Particle Count60Number of falling wax droplets. 0 turns off the particle layer entirely.Wax ColorBase color of the wax. Warm reds and creams read best.Roughness0.22How matte vs glossy the base wax surface is. Low (0.1-0.25) reads as freshly-melted wet wax; high (0.6+) reads as dry candle wax.Clearcoat0.85Top-layer wet-gloss film. 0.7-1.0 gives the freshly-melted shine; lower drops back to a more matte cast-wax look.Studio Reflection1.7Strength of the procedural-studio HDRI reflection. Drives the crispness of the highlights along the bevel and drip rims.Key Light Intensity1.2Warm upper-left key light — the main directional shading of the form.Transparent backgroundBackground ColorHeading FontDrives the 3D melting word AND the DOM subheading. Changa One's heavy, slightly chubby letterforms hold their silhouette through the drip; 'Inherit' falls back to a bundled bold face.Heading Font Weight500InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.