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 customizationReset190 heroes · page 15 of 16

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.

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.

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.

Reveal Text Scroll

A heading revealed by a directional wipe — one of eight angles — with an optional layered effect: a blur-in, a colour morph from start to end, or a chromatic-aberration split that resolves as the reveal completes.

Animated Text Gradient

A heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed.

Motion Colour Text

Heading filled with a constantly drifting multi-stop conic gradient — like aurora moving through the letterforms.

Card Expand Reveal

Horizontal accordion of cards — the active card stretches to reveal an inner story, others compress to vertical labels. Auto-cycles on idle.

Pro Text Type Effect

A pro-grade typewriter: cycles through multiple strings with variable per-character speed, fluid font sizing (clamp), per-line gradient fills, and a choice of cursor characters from block to slug to bar.

On Scroll Typography

A headline whose transform is driven by scroll progress through the viewport — pick an animation flavour (scale / rotate / slide / blur / combo), tune the scroll window, and the headline does the rest.Page 15 of 16CrazyGL · crazygl.comProgrammable hero sections for real websites.