Hero made by @ybouane.

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

Demo

Typography as Terrain

Install

npm install @crazygl/hero-typography-as-terrain

Usage

import TypographyAsTerrain from '@crazygl/hero-typography-as-terrain';

export default function Hero() {
  return (
    <TypographyAsTerrain
      heading="HORIZONS"
      extrudeHeight={0.54}
      cameraElevation={40}
    />
  );
}

The terrain is built entirely from the word you type — no separate texture or art to supply — and honours your selected heading font and weight.

Customise

• Content — heading (ALL-CAPS, 5–10 chars reads best), subheading, ctaLabel, onCTAClick (URL or function).
• Terrain — extrudeHeight, heightmapBlur (edge softness), duneBaseSpread (dune skirt width), terrainSize, and base-hill baseTerrainAmplitude/Scale/Octaves.
• Camera — cameraElevation, cameraAzimuth, cameraDistance, parallaxStrength.
• Material — lowColor, midColor, highColor (elevation bands).
• Lighting — sunAngleX/Y, sunIntensity, fogColor, fogDensity, ambientMotion.
• Typography — headingFontFamily, headingFontWeight.

Best for

• Creative studios and design agencies.
• Portfolio, "about", and editorial headers carried by one confident word.
• Conference and festival landing pages.

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.