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 customizationReset158 heroes · page 2 of 14

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.

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.

Gravity Grid

Perspective-tilted wireframe plane warped by metallic spheres. The grid bends around each ball like a rubber sheet, and the cursor adds a fourth distortion well.

Screenshot as Hologram Projection

Your screenshot projected from a small device as a translucent holographic panel floating in the air. Wide cyan projection cone, moving scanlines, subtle flicker, drifting dust. Built for AI, dev tools, cybersecurity, and futuristic SaaS.

Neon Glass Phone Stack

Several mobile screenshots float inside transparent neon phone frames, fanned out in a translucent stack. Outlines pulse left-to-right in a swipe-like wave and the whole stack bends gently with the cursor.

Product Exploded View

A 3D model splits into several floating layers on load, then slowly reassembles. Hovering separates the parts again — connector lines hint at the assembly path. Cinematic three-point studio lighting with HDRI reflections.

Gallery Slider

A full-bleed image gallery where each slide carries its own picture and copy. Image and text transition independently — fade, Ken-Burns zoom, push-slide, clip wipe or blur-morph for the image; fade, rise, clip-reveal or blur for the text. Autoplay, arrows, dots, counter, swipe.

Masked Text Carousel

A big heading sits behind a product image; where the image overlaps the words the text shows only its outline (or inverts, or ghosts) while the rest stays solid — the product literally masks the type. Swipeable, with a floating, pointer-reactive product and smooth slide transitions.

Launch Reveal

An editorial product-launch hero: a serif headline, a pill call-to-action and a fanned trio of device mockups that rise into place with a staggered, spring-eased reveal. Cards drift subtly with the pointer.

VHS Product Demo Screen

Your product image or video plays inside a floating retro CRT/VHS-style screen with subtle barrel curvature, scanlines, chromatic aberration, vignette and occasional tracking-noise glitch bursts. Nostalgic but polished.Page 2 of 14CrazyGL · crazygl.comProgrammable hero sections for real websites.