CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/morph-astronaut

Morph Astronaut

A hover-focus hero: a bold display word is rendered as a true signed-distance field and softens or sharpens under the cursor via an SDF lens blur (no chromatic aberration), while an animated 3D character floats in front — playing its loop animation, tilting toward the pointer in 3D, and bobbing as if weightless. Drop in any animated .glb (e.g. an astronaut).

ReactWebGL3DInteractiveFont#3d#three#glb#astronaut#text#sdf#lens-blur#hover#focus#interactive

Usage

import MorphAstronaut from '@crazygl/hero-morph-astronaut';

export default function Page() {
  return (
    <MorphAstronaut
      word="COSMOS"
      model="https://crazygl.com/samples/astronaut.glb"
      textColor="#ff1919"
    />
  );
}

Customise

  • Text — word, textColor, fillWidth (auto-fits any word length), letterSpacing, fontFamily, fontWeight.
  • Lens blur — lensStrength, lensRadius (focus spot size), baseBlur (base softness), glowIntensity, glowColor.
  • Model — model (any animated .glb), animationName, modelScale, modelYOffset, lightIntensity, starfield / starCount / starColor.
  • Motion — pointerTilt, spin (idle turntable), floatAmount, floatSpeed.
  • Backdrop — backgroundColor, transparentBackground.

Best for

  • 3D product, game, and entertainment launch pages.
  • Space / sci-fi and creative-studio brands.
  • Showcasing a hero character or mascot over a bold wordmark.

The default uses a sample floating astronaut (Idle loop). Point model at your own animated GLB to reskin it.

Credits

The sample model — “Animated Floating Astronaut in Space Suit Loop” — is from Sketchfab. Swap in your own animated GLB via the model prop; if you keep theirs, honour its license and attribution.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-morph-astronaut
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 MorphAstronaut from '@crazygl/hero-morph-astronaut';

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

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

SDF Lens Blur

A single heading word, rasterised to a true signed distance field and rendered in WebGL. Where the cursor hovers, the letters dissolve into a soft luminous bokeh — a variable-radius radial blur kernel sampled in distance space, with optional chromatic aberration. Move the cursor across the word to smear it into a beam of light; move away and it snaps back to a razor-sharp typeface.

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.

Extruded 3D Headline Sculpture

Your headline as a thick, bevelled 3D sculpture floating under three-point studio lighting. Each letter has glossy bevelled edges, the camera parallaxes with your pointer so the depth reads from every angle, a soft contact shadow + AO strip ground it, and a real mirrored reflection fades into the glossy floor. A CTA button hover sends a sweep of light across the letters.

Text Glow Hover

A heading with a stack of layered, blurred shadow copies that fan out in the direction of the cursor — like a tracer of light pouring out of the wordmark. On hover-end the stack relaxes back to a resting diagonal trail.

Topographic Binary

A slowly-rotating 3D relief slab on a dark gradient: the ridge top is drawn as parallel contour lines and the outer face is a wall of falling glyphs — binary, ASCII, katakana or a custom word — that drip from under the lines, fan apart toward the bottom and glow. A depth-buffered occluder hides the interior so only the outer face shows. Framed by an editorial heading.

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.Live customizer

Morph Astronaut

WordText colourFill width0.92How much of the hero width the word spans (auto-fits any word length).Letter spacing-0.02emFontWeight900Lens strength24pxHow strongly the letters blur away from the focused spot under the cursor.Focus radius0.15Size of the sharp spot that follows the cursor.Base softness0.5pxHow soft the word is away from the cursor.Glow1.53Soft halo around the letters.Glow colourModel (.glb)Any animated glTF/GLB. Swap in an astronaut model here.AnimationClip name to play (blank = an Idle/float clip, or the first one).Scale0.9Vertical offset-0.4Light0Star fieldA slight scatter of stars drifting behind the model.Star countStar colourPointer tilt0.65How much the model turns toward the cursor.Idle spin0Constant turntable rotation (overrides pointer turn on Y).Float height0.12Float speed0.05BackgroundTransparent backgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.