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 2 of 24

Collection Carousel

Product cards float in a curved 3D carousel. The center card is large and sharp; cards rotating toward the sides shrink, dim and blur into depth. Auto-rotates slowly, drag to spin with momentum, click a side card to bring it to center.

Draggable Portfolio Cards

Portfolio cards float behind the headline and can be dragged with momentum, making the hero feel tactile and playful.

Floating Dust in Spotlight

A dim cinematic room with a hard-edged spotlight cone. Thousands of dust motes drift through the beam and twinkle as they cross the light.

Old Internet Portal

A surreal 3D old-web desktop. Floating Windows 98 / classic Mac OS panels in CSS-3D, a pixel cursor trail, dotted retro wallpaper. Drag windows around by their title bars. Nostalgic browser chaos rendered as a premium composed tribute.

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.

Chrome Y2K Wordmark

A huge mirror-chrome headline floating over a retro-future neon perspective grid. Star glints travel across the letters, gradient reflections shift with the pointer, and the whole thing reads as a Y2K poster you'd screenshot for your moodboard.

Liquid Metal Typography

Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.

Floating Screen Recording

A product demo screenshot or video floats on a screen panel with an animated cursor, a glowing motion trail, expanding click ripples, and a zoom-lens magnifier that highlights UI moments.

Glass Typography

A headline cast in transparent optical glass: Three.js TextGeometry extruded into a real 3D object, rendered with MeshPhysicalMaterial (transmission, IOR, dispersion, clearcoat) so it visibly refracts the moving gradient behind it. Pointer parallax tilts the camera and CTA hover sweeps a bright edge highlight across the letters.

Window Lens

A draggable OS-style window is a sharp 'lens' over an image or video: crisp inside the window, processed outside — pixelate, blur, black-&-white dither, ASCII, or none. Use a separate custom image for the processed outside region, and pick any of four chrome styles (classic Mac, modern Mac, Windows XP, Windows 95).

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

Orbiting Word System

A bold centered headline anchors a 3D system of keyword satellites. Each orbit word travels its own tilted ellipse around the center; hover pulls a word forward and lights up the rest of the constellation.Page 2 of 24CrazyGL · crazygl.comProgrammable hero sections for real websites.