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 customizationReset275 heroes · page 19 of 23

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.

Scroll Reveal Pro

Multi-line heading where each line is masked and rises into view as the visitor scrolls — staggered, eased, with a small blur dropoff.

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.Page 19 of 23CrazyGL · crazygl.comProgrammable hero sections for real websites.