CrazyGLCrazyGLHomeExploreGitHubBrowse heroes
The gallery

Every hero.
One catalogue.

Search by name, tag, or capability. Each hero is installable as a standalone NPM package.

★ FeaturedWebGLCanvas3DImage supportInteractiveFont customization278 heroes · page 19 of 24

ASCII Video Displacement

A looping video converted live into ASCII art — each cell's brightness picks a glyph from a long density ramp so the moving footage reads as live ASCII. The pointer is a clarity lens: under the cursor the cells resolve into the real, sharp footage, so the image reads genuinely clearer exactly where you point.

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.

Text Start Indent

Editorial-style paragraph with the first line indented and a giant drop-cap that overhangs into the margin — magazine-grade typography out of the box.

Blend Text

A heading with CSS mix-blend-mode applied so it changes appearance against whatever sits behind it — picks the inverse colour of the backdrop pixel, like ink on a poster.

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.

Typography Shadows

Abstract letterforms floating at different depths behind the hero, with dramatic shadows and pointer-driven parallax.

Aurora Plane

A pure-CSS animated aurora hero. Cheap, calm, and responsive — a great default when CSS is enough.

Text Doodles

Heading marked up with hand-drawn doodle annotations — circle one word, scribble under another, arrow into a third. Reads like a designer's notebook.

Image Masked Text

A heading whose letterforms are filled with a photograph. Uses native CSS background-clip:text so the wordmark stays selectable and crisp at any zoom, with cover, contain, or custom-percent fit modes.

Text Split Reveal

Heading splits into two halves that slide apart to reveal a secondary line between them — the curtain-pull pattern.

Text Hover Reveal

Each item shows a default heading; on hover the heading scrolls up and a secondary line scrolls in from below — list-of-services interaction.

Sonic Text

Heading paired with a procedurally simulated audio waveform — bars rise and fall in time-correlated bands and the text stretches subtly with the loudest beats.Page 19 of 24CrazyGL · crazygl.comProgrammable hero sections for real websites.