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 customizationReset127 heroes · page 1 of 11

Sculpted Light Bust

A polished marble sculpture under studio lighting. The pointer orbits a single bright key light around the bust in real 3D, raking it across the stone face for hot specular highlights, cool subsurface shadows in the recesses, and a warm rim that tracks the cursor like a real museum spotlight.

Sand Typography

Your headline is built from thousands of grains of sand. The grains drift on the breeze, erode where the cursor sweeps through them, and spring back to spell the word again.

SDF Lens Blur

A single heading word, rasterised to a true signed distance field and rendered in WebGL. Where the cursor hovers, the letters dissolve into a soft luminous bokeh — a variable-radius radial blur kernel sampled in distance space, with optional chromatic aberration. Move the cursor across the word to smear it into a beam of light; move away and it snaps back to a razor-sharp typeface.

Thermal Logo

Your logo rendered as a live thermal-camera image — a flowing heat field clipped to the silhouette and mapped through a cold-to-white-hot gradient, with the cursor leaving a glowing heat trail that slowly cools.

Glass Panels

Liquid-glass panels in WebGL — half-sphere bevel, biconvex refraction (entry + exit + thickness), edge-weighted blur mix, multi-light Blinn-Phong specular, Fresnel rim, drop shadow. Drop in any background image and it gets bent through the glass.

Light Cloth Mesh

A glowing silk sheet woven from neon threads filling the frame and waving in 3D. Drag the pointer across the silk and it leaves a natural rippling wake — each touch sends an expanding wavefront, and the faster you sweep the stronger the ripples. Cyan-to-magenta threads glow on near-black.

Iridescent Gradient Typography

Your headline cast in oil-slick iridescence. Real thin-film interference shifts the surface through cyan → green → gold → pink → violet → blue as you move the pointer, just like a soap bubble or a petrol puddle catching streetlight. Three.js TextGeometry + a MeshPhysicalMaterial iridescence layer, lit by a procedural HDR studio with concentrated softboxes.

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.

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.

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.← PreviousPage 1 of 11CrazyGL · crazygl.comProgrammable hero sections for real websites.