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 customizationReset106 heroes · page 9 of 9

Text Video Mask

A wordmark rendered as a window into a looping video (or a still photograph), with the rest of the canvas filled by a solid backdrop colour. The text IS the visible footage.

Text Image Cursor

A list of items where hovering each row reveals a thumbnail that follows the cursor — case-study index pattern, magazine-grade.

Magnetic Logo Field

An image-driven particle field. Drop in a logo and the particles drift around then snap into its silhouette in waves. Cursor magnetically pulls or repels the swarm. Sample by alpha, luminosity, or transparency.

Magazine Cover Product Hero

A product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth.

Living Brand Seed

Your logo grows from delicate organic contour lines — like roots reaching across paper — then settles into its solid form beside the heading. Warm cream backdrop, drifting amber pollen, and a cursor-driven breeze keep the scene quietly alive.

Ice Encased Logo

Your logo is frozen inside a chunky beveled cube of real refractive ice. Three.js MeshPhysicalMaterial with IOR 1.31, clearcoat, Beer-Lambert blue attenuation and chromatic dispersion bends the studio HDRI around the brand. Frost on the front face melts on load to reveal the logo inside a clear ice-cube body.

Floating Neon Logo Sign

The logo becomes a 3D neon tube sign floating in a dark cinematic scene. Segments flicker on during boot, then settle into a gentle pulse. Smoke drifts behind; hovering brightens the tubes.

Parallax Marquee

A horizontally-scrolling strip of image cards at different depths. Each card has its own depth, vertical offset, and speed multiplier — closer cards scroll faster, distant ones drift past slowly, creating a layered 3D parallax read.

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.

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