CrazyGLCrazyGLHomeExploreGitHubBrowse heroes

280+ interactive heroes.
Ready for your next launch.

CrazyGL gives you polished WebGL, canvas, and interactive typography effects you can customize and ship.

Explore the library
Featured

The shelf,
this season.

Hand-picked heroes from the catalogue.

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.

Magnetic Field Lines

Thousands of particles stream along smooth, divergence-free flow lines — a live visualisation of an invisible magnetic field. The pointer drops a new magnetic pole into the field; lines visibly bend, swirl, and repel around the cursor.

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.Explore all heroes →Why CrazyGL

Built for production.
Tuned for you.

Every hero is shaped around the things you actually need on a real landing page: it has to be tweakable, fast, and quiet to integrate.

01 / Highly customizable

Make it yours
in seconds.

Every hero exposes its sliders, colors, typography, and content controls. Open the customizer, dial in the brand, copy a single prop list out.

02 / Lightweight

Add one hero.
Not a framework.

Heroes are standalone packages. You install only what you render, so your bundle stays small and your build stays quick.

03 / Flexible content

Heading.
Two columns.
Or your own JSX.

Drop in a headline + subhead, two columns of rich text, or compose something custom. Swap between content shapes without rewriting the hero.

04 / CSS first

WebGL only
when it pays.

Heroes prefer plain CSS when it suffices, escalate to canvas or WebGL when there's real visual benefit, and pause when offscreen. Performance is the default, not an option.

05 / React, SSR-safe

Drops into
your stack.

One default export per package. Works in Next.js, Remix, React Router v7 — anywhere SSR matters. No hydration warnings, no special bundler config.

06 / Accessible by default

Respects motion.
Honors contrast.

Reads prefers-reduced-motion, keeps content readable on top of busy backgrounds, and ships with sensible focus styles out of the box.

Install

One hero
at a time.

Every hero is a standalone package — add only what you need and keep your bundle tight.

hero.tsx
// add a hero
// $ npm i @crazygl/hero-bubbles

import Bubbles from '@crazygl/hero-bubbles';

export default function Landing() {
  return <Bubbles heading="Say hi." subheading="Your new hero." />;
}
CrazyGL · crazygl.comProgrammable hero sections for real websites.