Hero made by @ybouane.

@crazygl/hero-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).

Demo

Morph Astronaut

Install

npm install @crazygl/hero-morph-astronaut

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.

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.