CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/topographic-binary

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.

ReactWebGLInteractiveFont#3d#webgl#topographic#terrain#matrix#rain#glyphs#katakana#data#green

Usage

import TopographicBinary from '@crazygl/hero-topographic-binary';

export default function Hero() {
  return (
    <TopographicBinary
      heading="Topographic Signal"
      subheading="A living relief of falling code."
      charset="katakana"
      digitColor="#5dffa0"
    />
  );
}

Customise

  • Content — heading, subheading, textColor, headingFont, headingAlign, plus showHud / hudLabel.
  • Terrain — gridWidth, gridDepth, relief, featureScale, flowSpeed (how fast the FBM surface reshapes).
  • Position — posX / posY / posZ place the slab in the frame.
  • Glyphs — charset (binary / ascii / katakana / custom), customChars, rainDensity, fallSpeed, streakLength, tailSpread, tailLength, glyphSize, glow, flicker.
  • Camera — autoSpin, pointerSpin, tilt, fov.
  • Colours — digitColor, lineColor, bgTop, bgBottom.

Best for

  • Data, AI, and security products wanting a "live signal" centrepiece.
  • Developer platforms and infra brands with a terminal / Matrix aesthetic.
  • Launch pages that need a featured, motion-rich 3D hero.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-topographic-binary
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 TopographicBinary from '@crazygl/hero-topographic-binary';

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

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

Data Rain 3D

Characters, digits and small symbols fall through a real 3D perspective volume. Near glyphs are large and bright, far ones shrink and dissolve into depth fog. Move the cursor and the falling stream curves around it, like rain hitting an invisible umbrella.

ASCII Rain Repulsion

Elegant columns of falling ASCII glyphs on a near-black field — pale, premium, and readable behind text. The pointer opens a circular force field that pushes the characters outward into a clean tunnel of empty space, which smoothly refills as the cursor moves on.

Digital Rain Curtain

Depth-stacked vertical streams of glowing glyphs cascade downward — abstract characters at different focal layers, with parallax and a soft head glow on each leading character.

Data Rain Product Reveal

Elegant colored data streams fall behind a central product screenshot in four refined tints, with a few drops drifting in front for parallax depth. Cyberpunk but refined.

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).

Liquid Data Core

A glowing ray-marched glass sphere with refracted, dispersed inner orbits of data points — a living analytics engine that reacts to the cursor.Live customizer

Topographic Binary

Grid width46Columns across (also the number of contour lines).Grid depth40Columns front-to-back.Relief height0.9How tall the mountains rise.Feature scale0.6Size of the ridges — small for rolling, large for jagged.Morph speed0.03How fast the terrain slowly reshapes.Horizontal1.1Vertical1.35Depth0.45Push the object toward or away from the camera.Glyph setGlyph rows25Number of glyph rows down each wall.Fall speed0.6How fast the glyphs drip downward.Trail length14How far a glyph stays lit as it falls.Tail spread2.3How aggressively the spacing fans apart toward the bottom (exponential).Tail length1.4Overall length of the falling glyph tail.Glyph size1.15Glow1Brightness and bloom of the lines and glyphs.Flicker0.5Spin speed0.07rad/sPointer nudge0.3Camera tilt0.67How far the camera looks down onto the terrain.Field of view70°Glyph colourLine colourBackground topBackground bottomInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.