# CrazyGL > A collection of studio-grade React hero sections you can drop into any landing page — kinetic typography, scroll-driven choreography, WebGL surfaces, physically-simulated 3D. Each hero is its own npm package with a built-in customizer. Every hero is identified by a stable `slug` (e.g. `text-cycler`) and ships as the npm package `@crazygl/hero-`. Slugs are URL-safe and stable across versions — they are the canonical identifier you should use when referring to a hero. ## How to use this site - **Browse the gallery (humans):** https://crazygl.com/explore - **Single hero detail page (humans):** https://crazygl.com/hero/ — interactive preview, customizer, install snippet, README, similar heroes. - **Single hero spec (agents):** https://crazygl.com/hero/.md — markdown describing the hero with install command, props, and example usage. Fetch this when you need to generate code for a specific hero. - **Headless preview (browser/render):** https://crazygl.com/render/ — bare hero render with no chrome, useful as an iframe embed or for screenshotting. - **Open-Graph banner image:** https://crazygl.com/hero-banner/.png - **Sitemap:** https://crazygl.com/sitemap.xml — XML index of every public page on the site, including one entry per hero. ## How to install a hero Each hero is a standalone npm package. Pick a slug from the catalogue below (or from `/sitemap.xml`), then: ```bash npm install @crazygl/hero- @crazygl/core react react-dom ``` Import the default export and render it. Every hero accepts a props object whose keys match the customizer fields in the hero's metadata — fetch `/hero/.md` to discover them: ```tsx import Hero from '@crazygl/hero-'; export default function Landing() { return ; } ``` You also need the hero's stylesheet. Most bundlers pick it up automatically through the package's side-effect imports; if yours does not, add `import '@crazygl/hero-/style.css'` at the top of the file. ## Catalogue One entry per shipped hero. The link is the per-hero markdown spec — fetch it to get install command, props, and example code for that hero. ### 3D - [Morph Astronaut](https://crazygl.com/hero/morph-astronaut.md) (featured) — 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). - [Topographic Binary](https://crazygl.com/hero/topographic-binary.md) (featured) — 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. ### Atmospheric - [Aurora Plane](https://crazygl.com/hero/aurora-plane.md) (featured) — A pure-CSS animated aurora hero. Cheap, calm, and responsive — a great default when CSS is enough. - [Breathing Gradient Landscape](https://crazygl.com/hero/breathing-landscape.md) (featured) — A product screenshot floats above an abstract gradient terrain that slowly breathes through stacked low-frequency FBM noise. Warm peach peaks fade into soft sage valleys; motes drift up; the camera pans across a 30-second loop with a hint of bob. - [Liquid Aurora Gradient](https://crazygl.com/hero/liquid-aurora-gradient.md) (featured) — A full-bleed liquid gradient: large organic blobs of electric blue and warm orange bleed and morph across a near-black field, driven by domain-warped FBM in a single WebGL2 fragment shader. Slow lava-lamp / aurora flow with deep black negative space; the pointer gently pulls the fluid toward the cursor. - [Prism Cloud](https://crazygl.com/hero/prism-cloud.md) (featured) — A luminous chromatic cloud hero built with GLSL. Responds to scroll and pointer with refracted color light. - [Filament Ribbon](https://crazygl.com/hero/filament-ribbon.md) — A silk ribbon woven from hundreds of fine luminous strands undulates across the lower third of a dark hero, while teal and amber light travels along it and glowing beads ride the filaments. Faint blueprint grid, centered copy, CTA. - [Ink Flow Field](https://crazygl.com/hero/ink-flow-field.md) — On a near-white page, thousands of very thin charcoal lines drift along a divergence-free curl-noise flow field, leaving long curved trails that layer into delicate spirograph and flower-like ink patterns. Minimal, monochrome, calm. ### Backgrounds - [Dither Gradient](https://crazygl.com/hero/dither-gradient.md) (featured) — A dark editorial hero lit by a single grainy warm gradient that ramps along one animated sine contour (no mirrored band). The contour breathes with a pseudo-random amplitude, and the giant wordmark is rendered into the same shader so it is revealed by the light — bright where the gradient washes over it, sinking into near-black shadow elsewhere. Quantised, dithered and grained for a retro/print texture. ### Cinematic - [Film Strip Product Journey](https://crazygl.com/hero/film-strip-journey.md) — A product demo broken into frames along a 3D film strip that curves through the hero, with sprocket holes, drifting light leaks and grain, and a CTA where the strip ends. ### Editorial - [Exhibition Poster Hero](https://crazygl.com/hero/exhibition-poster.md) (featured) — A single campaign image becomes a 3D museum poster with soft paper folds, a slow specular light sweep across the surface, and a film-grade animated grain. Slow camera drift and pointer parallax keep it breathing. - [Glitch Hero Poster](https://crazygl.com/hero/glitch-poster.md) (featured) — A cyberpunk poster: any screenshot or photograph is overlaid with RGB channel splitting, horizontal slice glitches, soft CRT scanlines, and digital grain. The pointer ramps the chaos up — perfect for launch campaigns, agencies, gaming, and music. - [Collage in Zero Gravity](https://crazygl.com/hero/collage-zero-gravity.md) — Images, textures, and product screens float together in a controlled zero-gravity collage around the hero copy. - [Magazine Cover Product Hero](https://crazygl.com/hero/magazine-cover-product.md) — A product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth. - [Torn Poster Hero](https://crazygl.com/hero/torn-poster.md) — Layered torn posters build a premium campaign collage with depth, shadows, and a subtle peel-away motion. ### Experimental - [Melting Typography](https://crazygl.com/hero/melting-typography.md) (featured) — Headline cast in soft wax that drips slowly downward — vertices stretch into icicle-like extensions while letters stay readable. Hovering speeds up the melt; moving away lets the letters re-form. Glossy droplets fall from the bottoms. - [Typography as Terrain](https://crazygl.com/hero/typography-as-terrain.md) (featured) — A bold headline is rasterised into a heightmap and extruded into a 3D landscape — the letters rise out of the ground as carved plateaus and ridges, lit by a low sun with drifting cloud shadows and atmospheric haze. A fixed aerial-oblique camera keeps the word readable, and the pointer orbits the terrain for parallax. ### Interactive - [Window Lens](https://crazygl.com/hero/window-lens.md) (featured) — 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). - [Touch Dot Matrix](https://crazygl.com/hero/touch-dot-matrix.md) — A flat blueprint grid of dim plus-markers on near-black. Move or tap and the markers around your touch bloom into glowing cyan dots — spreading with a soft ripple, trailing behind your path, and fading back to quiet crosses. ### Media - [Gallery Slider](https://crazygl.com/hero/gallery-slider.md) (featured) — 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. - [Scroll Video](https://crazygl.com/hero/scroll-video.md) (featured) — A muted video that scrubs frame-by-frame as the page scrolls past — frames are pre-decoded on load so scrubbing is instant even when the clip isn't keyframe-dense. Scroll up and down to move through the shot. ### Objects - [Bouncing Light](https://crazygl.com/hero/bouncing-light.md) — A lantern of stacked discs floating in the dark. Every few seconds a warm light bounces into it — the whole stack squashes on impact, glows cream-to-ember from within, wobbles, then fades back to charcoal. Click to bounce it yourself. ### Organic - [Living Brand Seed](https://crazygl.com/hero/living-brand-seed.md) (featured) — 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. ### Particle - [Firework Logo Reveal](https://crazygl.com/hero/firework-logo-reveal.md) (featured) — The hero starts dark. A burst of particles explodes outward, then curves back inward and assembles into your logo. Three-phase lifecycle, additive bloom, short trails, subtle camera shake during the burst. Once the logo is assembled, move the cursor across the hero to spawn micro-firework bursts that fan out and fade. The default still capture lands mid-re-assembly — the most photogenic frame. ### Particles - [Ember Mesh](https://crazygl.com/hero/ember-mesh.md) — A warm particle-network hero. Particles drift and connect with glowing ember edges that follow the pointer. ### Playful - [Bouncy Logo Mascot](https://crazygl.com/hero/bouncy-logo-mascot.md) (featured) — The uploaded logo becomes a soft mascot-like 3D toy that drops in with snappy spring physics, reacts to the cursor like a squashy character, and pops into a colorful confetti burst when clicked — then drops in again. - [Carousel of Product Toys](https://crazygl.com/hero/carousel-of-product-toys.md) (featured) — A slowly turning toy shelf — 5–8 chunky plastic-toy product icons rotate around the headline like collectibles on a display stand. Hover a toy to bring it forward; click to navigate. - [Chrome Mascot Logo](https://crazygl.com/hero/chrome-mascot-logo.md) (featured) — Your logo or mascot reborn as a chunky Y2K chrome object floating over a sunset gradient with twinkling stars and slow anamorphic lens flares. Real PBR mirror metal lit by a procedural HDR environment. - [Feature Blocks Playground](https://crazygl.com/hero/feature-blocks-playground.md) (featured) — Each selling point is a colourful, chunky 3D block. The blocks fall from above, bounce into a deliberate stacked composition, and respond to hover and click — your product benefits, rendered as playful building blocks. - [Inflatable Balloon Typography](https://crazygl.com/hero/inflatable-balloon-typography.md) (featured) — Your headline becomes a row of soft, puffy balloon letters. Each glyph is inflated outward along its surface normal, floats gently with its own bobbing rhythm, squashes elastically when your cursor gets close, and ripples in a bounce wave when you click anywhere on the canvas. ### Portfolio - [Cinematic Contact Sheet](https://crazygl.com/hero/cinematic-contact-sheet.md) — Multiple frames behave like a cinematic contact sheet, bending through depth and holding a warm editorial mood. - [Draggable Portfolio Cards](https://crazygl.com/hero/draggable-portfolio-cards.md) — Portfolio cards float behind the headline and can be dragged with momentum, making the hero feel tactile and playful. ### Premium - [AI Console Portal](https://crazygl.com/hero/ai-console-portal.md) (featured) — A glowing torus portal opens onto an AI console screenshot stepping forward into the scene, surrounded by orbiting prompt and output cards and a stream of particles slipping past the ring toward the camera. - [API Network Map](https://crazygl.com/hero/api-network-map.md) (featured) — A polished, three-dimensional graph of API services connected by glowing lines, with pulses of light traveling along each connection like requests in flight. Built for developer-tools, API-platforms, and infrastructure landing pages. - [Artwork Lens](https://crazygl.com/hero/artwork-lens.md) (featured) — A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it. - [ASCII Nebula](https://crazygl.com/hero/ascii-nebula.md) (featured) — The whole background is a grid of ASCII glyphs that, from afar, reads as a soft drifting nebula — dense glyphs where the cloud is thick, sparse where it thins. The pointer locally reveals hidden structure: nearby glyphs grow larger, rotate slightly, and switch to denser symbols. - [ASCII Rain Repulsion](https://crazygl.com/hero/ascii-rain-repulsion.md) (featured) — Elegant columns of falling ASCII glyphs on a near-black field — pale, premium, and readable behind text. The pointer opens a circular force field that pushes the characters outward into a clean tunnel of empty space, which smoothly refills as the cursor moves on. - [ASCII Video Displacement](https://crazygl.com/hero/ascii-video-displace.md) (featured) — A looping video converted live into ASCII art — each cell's brightness picks a glyph from a long density ramp so the moving footage reads as live ASCII. The pointer is a clarity lens: under the cursor the cells resolve into the real, sharp footage, so the image reads genuinely clearer exactly where you point. - [Aurora Borealis](https://crazygl.com/hero/aurora-borealis.md) (featured) — Northern lights — three volumetric ribbon curtains driven by FBM noise, with parallax on pointer/scroll, additive blending, and a starfield behind. - [Black Glass Product Reveal](https://crazygl.com/hero/black-glass-reveal.md) (featured) — An almost-black canvas. A slow horizontal light sweeps left to right, revealing a glossy product screenshot inside a ceramic black-glass frame. Cinematic reveal for luxury SaaS, fintech, and premium B2B tools. - [Black Hole Lens](https://crazygl.com/hero/black-hole-lens.md) (featured) — Gravitational lensing of a star field, dust motes, and the deep nebula behind a singularity. A Doppler-shifted accretion disk burns in the equatorial plane — bluer where it rushes toward you, redder where it falls away. - [Bubble Universe](https://crazygl.com/hero/bubble-universe.md) (featured) — Iridescent soap bubbles drift upward, each refracting the bg and showing a thin-film rainbow rim. The cursor wobbles nearby bubbles. - [Build Pipeline Conveyor](https://crazygl.com/hero/build-pipeline-conveyor.md) (featured) — A diagonal 3D conveyor belt ferries labelled packages through install / test / build / deploy arches. Each stage lights up and emits a particle puff as a package passes; the final cube emerges glowing 'deployed.' Built for high-end CI/CD platform landing pages. - [Caustic Pool Light](https://crazygl.com/hero/caustic-pool.md) (featured) — Light dancing at the bottom of a swimming pool — animated caustic networks refracted through gentle surface waves, FBM-warped so the pattern never repeats. - [Chrome Y2K Wordmark](https://crazygl.com/hero/chrome-y2k-wordmark.md) (featured) — 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. - [Cloth Wave](https://crazygl.com/hero/cloth-wave.md) (featured) — A large piece of silk fills the screen, undulating in wind with anisotropic highlights along its fibre direction. Pointer presses dent the fabric and slowly relax back. - [Cloud Flythrough](https://crazygl.com/hero/cloud-flythrough.md) (featured) — Raymarched volumetric clouds. The camera flies forward through layered FBM density; sunlight scatters through every step and god-rays peek through breaks. - [Constellation Network](https://crazygl.com/hero/constellation.md) (featured) — Nodes float in 2-D space and connect to their nearest neighbours with glowing lines. The cursor attracts nearby nodes, redrawing the graph as you move. - [Cosmic Marble](https://crazygl.com/hero/cosmic-marble.md) (featured) — A procedurally-textured planet fills the background — swirling FBM clouds, atmosphere scattering at the rim, slow rotation, scattered stars. - [Data Rain 3D](https://crazygl.com/hero/data-rain-3d.md) (featured) — Characters, digits and small symbols fall through a real 3D perspective volume. Near glyphs are large and bright, far ones shrink and dissolve into depth fog. Move the cursor and the falling stream curves around it, like rain hitting an invisible umbrella. - [Digital Rain Curtain](https://crazygl.com/hero/digital-rain.md) (featured) — Depth-stacked vertical streams of glowing glyphs cascade downward — abstract characters at different focal layers, with parallax and a soft head glow on each leading character. - [Energy Core Reactor](https://crazygl.com/hero/energy-core.md) (featured) — A glowing reactor core suspended in space — rotating orbital rings, procedural plasma arcs lashing inward, and emissive bloom. - [Extruded 3D Headline Sculpture](https://crazygl.com/hero/extruded-3d-headline-sculpture.md) (featured) — Your headline as a thick, bevelled 3D sculpture floating under three-point studio lighting. Each letter has glossy bevelled edges, the camera parallaxes with your pointer so the depth reads from every angle, a soft contact shadow + AO strip ground it, and a real mirrored reflection fades into the glossy floor. A CTA button hover sends a sweep of light across the letters. - [Extruded Logo Monolith](https://crazygl.com/hero/extruded-logo-monolith.md) (featured) — Drop in a transparent SVG (or PNG) logo and it becomes a glossy black 3D sculpture with bevelled edges, studio HDRI reflections, a mirror floor, and an animated rim-light sweep. Premium product-shot look for SaaS, agencies, and AI tools. - [Fireflies](https://crazygl.com/hero/fireflies.md) (featured) — Glowing fireflies drift over a stylised mountain horizon. The cursor attracts the swarm and makes them flare bright. - [Floating Dust in Spotlight](https://crazygl.com/hero/floating-dust.md) (featured) — 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. - [Floating Ink](https://crazygl.com/hero/floating-ink.md) (featured) — Ink clouds drifting through water — domain-warped FBM noise, layered with transparency, slowly evolving so the silhouettes never repeat. - [Floating Monolith](https://crazygl.com/hero/floating-monolith.md) (featured) — A glossy obsidian monolith floats on screen, rotating slowly, sampling a procedural HDRI for genuine mirror reflections. Emissive light strips travel down its faces in a hypnotic loop. - [Floating Neon Logo Sign](https://crazygl.com/hero/floating-neon-logo-sign.md) (featured) — 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. - [Floating Origami](https://crazygl.com/hero/origami.md) (featured) — Paper polygons fold and unfold as they drift across soft directional light. Each shape has its own crease line and fold cycle. - [Frosted CTA Panel](https://crazygl.com/hero/frosted-cta-panel.md) (featured) — Your product screenshot drifts softly behind a frosted glass panel that holds the heading copy. Real transmission frost in the body, a sharp dispersive rim, two drifting light leaks, and layered parallax that separates the panel from the screenshot. - [Frosted Typography](https://crazygl.com/hero/frosted-typography.md) (featured) — Crystalline frost grows across the headline like ice forming on glass; the cursor acts as warmth, melting frost where it passes. - [Galaxy Tunnel](https://crazygl.com/hero/galaxy-tunnel.md) (featured) — A cinematic flythrough — thousands of glowing particles streaming past a virtual camera with velocity trails, bloom, and chromatic vignette. - [Glass Cube Maze](https://crazygl.com/hero/glass-cube-maze.md) (featured) — Raymarched lattice of transparent glass cubes drifting in 3D space. The cursor orbits the camera, and chromatic dispersion paints rainbow rims along the hits. - [Glass Logo Sculpture](https://crazygl.com/hero/glass-logo-sculpture.md) (featured) — Upload a logo (SVG / PNG / GLB) and watch it become a real 3D glass paperweight: Three.js MeshPhysicalMaterial with true volumetric transmission, per-wavelength dispersion, clearcoat, Beer-Lambert attenuation, ContactShadows, an HDRI-lit studio rig and pointer-driven parallax orbit that visibly bends the photographic background through the body. - [Glass Panels](https://crazygl.com/hero/glass-panels.md) (featured) — 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. - [Glass Tile Logo](https://crazygl.com/hero/glass-tile-logo.md) (featured) — The logo is reconstructed from a grid of small glass blocks. Each tile floats apart, refracts the background through real MeshPhysicalMaterial transmission, then assembles into the silhouette on load. Hover separates the tiles slightly. Built with Three.js InstancedMesh + HDRI reflections + soft contact shadows. - [Glass Typography](https://crazygl.com/hero/glass-typography.md) (featured) — 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. - [Gravitational Particles](https://crazygl.com/hero/gravitational-particles.md) (featured) — Hundreds of particles orbit invisible gravity wells. The cursor adds a temporary attractor that bends nearby paths into fresh orbits. - [Gravity Grid](https://crazygl.com/hero/gravity-grid.md) (featured) — 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. - [Halftone Field](https://crazygl.com/hero/halftone-field.md) (featured) — A full-bleed AM halftone screen — thousands of ink dots on an aspect-corrected grid whose size is driven by a slow, domain-warped noise field sampled at each cell's centre. Dark zones grow fat dots, light zones shrink to pinpricks, and the field visibly evolves over time so the dot sizes breathe. Dot contrast intensifies toward the frame edges while the centre stays calm so the heading reads. Bold, graphic, editorial. - [Halftone Video](https://crazygl.com/hero/halftone-video.md) (featured) — A looping video rendered as a living halftone print — a grid of ink dots whose size tracks the footage's local brightness, so the moving image reads as a newspaper press plate that's somehow in motion. The pointer is a clarity lens: under the cursor the screen resolves finer and the raw footage sharpens through, so the image reads clearer exactly where you point. Bold, editorial, premium. - [Holographic Dashboard Grid](https://crazygl.com/hero/holo-dashboard-grid.md) (featured) — Your dashboard rendered as a translucent hologram floating above a glowing cyan grid floor that recedes to the horizon. Scanlines, slight flicker, secondary feature panels drifting at depth. Built for analytics, cybersecurity, AI monitoring, and any sci-fi interface aesthetic. - [Holographic Terrain](https://crazygl.com/hero/holographic-terrain.md) (featured) — Low-poly wireframe terrain stretching to the horizon. Real vertex displacement (no faked depth), barycentric wireframe AA, distance fog, height-driven emissive on the peaks. Camera scrolls forward. - [Ice Encased Logo](https://crazygl.com/hero/ice-encased-logo.md) (featured) — 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. - [Ice Surface](https://crazygl.com/hero/ice-surface.md) (featured) — A glassy frozen pane fills the frame. Tap or drag to spread fresh cracks; old fractures slowly heal. - [Iridescent Gradient Typography](https://crazygl.com/hero/iridescent-gradient-typography.md) (featured) — 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. - [Iridescent Membrane](https://crazygl.com/hero/iridescent-membrane.md) (featured) — The whole background is a thin soap-bubble film — a translucent holographic membrane rendered with physically-based thin-film interference. Slow domain-warped flow drives the film thickness, so restrained pastel rainbows drift across the surface. The pointer presses on the membrane: the film stretches under the cursor and sends out concentric tension waves — single-wavefront ripples that perturb the thickness and shift the colour as they expand. Elegant, futuristic, premium. - [Lava Lamp Blobs](https://crazygl.com/hero/lava-lamp.md) (featured) — Raymarched metaballs drifting through space and merging smoothly via SDF smin. Glossy + subsurface-style shading gives them a thick, viscous look. - [Lens Flare Machine](https://crazygl.com/hero/lens-flare.md) (featured) — A cinematic light source moves across the frame, throwing anamorphic streaks, hex aperture ghosts, glowing rings, and chromatic glares. - [Light Cloth Mesh](https://crazygl.com/hero/light-cloth-mesh.md) (featured) — 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. - [Lightning Storm](https://crazygl.com/hero/lightning-storm.md) (featured) — Branching procedural arcs jag across animated stormclouds. Each strike pulses a bright halo across the sky, dimming back into the dark in a few hundred ms. - [Liquid Chrome Waves](https://crazygl.com/hero/chrome-waves.md) (featured) — An undulating ocean of liquid chrome. Six dispersive waves displace a mirror surface; a procedural studio HDRI stretches and warps across every crest. - [Liquid Data Core](https://crazygl.com/hero/liquid-data-core.md) (featured) — A glowing ray-marched glass sphere with refracted, dispersed inner orbits of data points — a living analytics engine that reacts to the cursor. - [Liquid Glass Badge Logo](https://crazygl.com/hero/liquid-glass-badge-logo.md) (featured) — Your logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior reads as frosted glass, and a 4-light Blinn-Phong studio rig sells the volume. Falls back to a rotating gradient backdrop when no image is supplied. - [Liquid Metal Orb](https://crazygl.com/hero/liquid-metal-orb.md) (featured) — A floating mercury sphere ray-marched in real time, sampling a real environment image (or a procedural studio HDRI) for genuine mirror-like reflections. Drop in a photo to see it bend across the surface. Three layouts: orb centered or content beside it. - [Liquid Metal Typography](https://crazygl.com/hero/liquid-metal-typography.md) (featured) — 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. - [Logo Edge Glow](https://crazygl.com/hero/logo-edge-glow.md) (featured) — Upload an SVG or transparent PNG logo and light it with a neon inner glow — a bright, radial-gradient rim clipped to the silhouette that fades to a dark core, and intensifies toward your cursor as it approaches. - [Logo Inside a Crystal](https://crazygl.com/hero/crystal-logo-prism.md) (featured) — A slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into rainbow seams; caustic highlights pool on the virtual floor; soft bloom on the inner emission. - [Logo Reflected in Water](https://crazygl.com/hero/logo-water-reflection.md) (featured) — A glowing brand mark floats above a real 3D water plane. Perspective foreshortening, fog-attenuated distant reflection, and Schlick Fresnel sell the scene as photographic. Stacked Gerstner waves drive the surface; pointer wake rings and a continuous finger-press depression carve into the mirror. - [Logo Sand Formation](https://crazygl.com/hero/logo-sand-formation.md) (featured) — Thousands of glowing sand grains drift on a warm desert current and re-form the supplied logo. Pointer movement scatters them in a Gaussian shockwave; springs and damping pull each grain back into the silhouette. - [Magnetic Dot Cloud](https://crazygl.com/hero/magnetic-dot-cloud.md) (featured) — Thousands of floating 3D points settle into a soft sphere of light. Wherever you point, a gravity well opens — nearby dots erupt radially outward from the sphere's centre, bulging the cloud like a living particle sculpture. A critically-damped spring eases every swell in and out; idle, the whole field drifts and turns. - [Magnetic Field Lines](https://crazygl.com/hero/magnetic-field-lines.md) (featured) — 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. - [Magnetic Logo Field](https://crazygl.com/hero/magnetic-logo.md) (featured) — 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. - [Mechanical Orrery](https://crazygl.com/hero/orrery.md) (featured) — Tilted-projection brass orrery — concentric orbit rings, planets at parametric positions, slow shadows. The cursor tilts the assembly. - [Multi-Screen Orbital Carousel](https://crazygl.com/hero/orbital-carousel.md) (featured) — A ring of product screenshots orbits slowly around the hero in 3D space. The front card faces the camera and pops larger; the others recede into a depth-fogged background. Drag to spin, then let the ring glide back to its idle rotation. - [Neon Fluid](https://crazygl.com/hero/neon-fluid.md) (featured) — GPU Eulerian fluid simulation (Stam 1999). Advected dye + velocity ping-pong textures with a Jacobi pressure solve give true divergence-free flow. Drag to inject momentum and colour; additive bloom on the dye field paints glowing smoke through the void. - [Neon Orbital Integrations](https://crazygl.com/hero/neon-orbital.md) (featured) — A dashboard screenshot at the centre with integration chips orbiting around it on an inclined plane, linked to the dashboard by glowing neon lines that pulse with travelling beads of light. Drag to spin the ring with momentum. - [Neon Tube Typography](https://crazygl.com/hero/neon-tube-typography.md) (featured) — A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus stacked blurred copies for true additive bloom. - [Neon Tubes](https://crazygl.com/hero/neon-tubes.md) (featured) — Flexible neon tubes float and bend through space, forming abstract loops. Each tube glows with its own colour and bloom. - [Ocean Above](https://crazygl.com/hero/ocean-above.md) (featured) — Top-down stylised ocean. Wave height-field via FBM, foam crests on the sharpest gradients, sun glints across the highest peaks. Pointer pushes the water. - [Orbiting Word System](https://crazygl.com/hero/orbiting-word-system.md) (featured) — 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. - [Package Galaxy](https://crazygl.com/hero/package-galaxy.md) (featured) — An infinite 3D galaxy of npm package stars clustered by ecosystem, with glowing comets streaking through the field. Seamless on every axis, fog-baked depth, soft nebula clouds in the deep background. - [Paint Strokes](https://crazygl.com/hero/paint-strokes.md) (featured) — Thick glossy paint strokes sweep across the hero in slow motion. Each stroke has its own colour and gloss highlight. - [Particle Slider](https://crazygl.com/hero/particle-slider.md) (featured) — A cinematic auto-playing slider built on one shared particle engine. Each slide picks a visualization — magnetic sphere, spiral galaxy, liquid wave field, vortex portal, image-to-particle, particle text, neural cloud, cube lattice, orbital rings, terrain — and the thousands of particles MORPH from one formation into the next instead of resetting. The field reacts to the pointer (repel / attract / magnetic). Per-slide heading, subheading, CTA, text transition and layout. Dark, premium, developer-grade. - [Particle Typography](https://crazygl.com/hero/particle-typography.md) (featured) — A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze. - [Product Inside a Glass Capsule](https://crazygl.com/hero/glass-capsule-product.md) (featured) — A product floats inside a transmissive glass capsule, like a luxury museum object or futuristic sample container — refraction through the shell, a frosted inner layer, a band of condensation, slow rotation and a soft pedestal glow. - [Rain on Glass](https://crazygl.com/hero/rain-on-glass.md) (featured) — Looking through a glass pane in the rain — droplets refract the background, slide down with gravity, and leave thin trails. - [Reactive Gradient Silk](https://crazygl.com/hero/gradient-silk.md) (featured) — A background of folded silk made of light — very smooth gradients with broad flowing folds drifting in slow, elegant fabric motion. The folds carry deep desaturated jewel tones and catch a soft specular sheen along each crease. The pointer presses a gentle indentation into the cloth: the folds bend around the cursor and the highlights and shadows shift with it. - [Screenshot as a 3D Card Stack](https://crazygl.com/hero/card-stack.md) (featured) — Your main product screenshot sits on top of a stack of secondary UI cards. The front card swoops up and over to the back at a configurable interval, autonomously cycling through every screen. Soft drop shadows, a cyan edge glow on the top card, cursor parallax tilt. - [Screenshot as Hologram Projection](https://crazygl.com/hero/hologram-projection.md) (featured) — 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. - [Screenshot in a Floating Metal Frame](https://crazygl.com/hero/floating-metal-frame.md) (featured) — Your product screenshot held inside a brushed-metal frame, lit like a physical product photograph. The frame sits at an adjustable static angle, tilts with the pointer for parallax, and optionally rotates to catch studio highlights. - [Screenshot Reflected in Chrome Waves](https://crazygl.com/hero/screenshot-chrome-waves.md) (featured) — A product screenshot floats above a slow liquid-chrome ocean. Stacked Gerstner waves stretch its reflection across the surface while specular highlights migrate with the crests; pointer movement emits single-wavefront wake rings that distort the mirror in real time. - [Screenshot Torn Into Layers](https://crazygl.com/hero/torn-layers.md) (featured) — A background screenshot plus up to five overlay images, each placed on its own depth plane with X / Y / Z / scale controls. On load each layer slides in from depth with a staggered easeOutBack overshoot; hover spreads them further apart along Z. - [Screenshot with Animated Data Flow](https://crazygl.com/hero/data-flow.md) (featured) — Glowing particles and connection lines stream out from a tilted product screenshot, suggesting live data moving through the UI. Built for analytics, CRM, automation, AI agents and database products. - [Sculpted Light Bust](https://crazygl.com/hero/sculpted-light-bust.md) (featured) — 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. - [SDF Lens Blur](https://crazygl.com/hero/sdf-lens-blur.md) (featured) — 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. - [Shader Playground](https://crazygl.com/hero/shader-playground-hero.md) (featured) — A live, full-bleed procedural shader background — domain-warped fractal Brownian motion mixed through an iridescent fresnel palette, with the headline and CTA layered cleanly on top. The pointer subtly steers the flow. - [Slow Glitch Fabric](https://crazygl.com/hero/glitch-fabric.md) (featured) — An elegant, controlled digital-signal background: deep moody bands drift like a damaged broadcast, always carrying a tasteful base glitch — blocky horizontal tears and red/cyan channel splits. Move the cursor and the glitch concentrates around its position, intensifying the tears and chromatic split right where you point, then eases back out when you leave. - [Soft Volumetric Particle Fog](https://crazygl.com/hero/volumetric-particle-fog.md) (featured) — Thousands of tiny semi-transparent dust motes drift in depth inside a soft beam of light. Curl-noise keeps them floating naturally; depth fog reads volumetric; the pointer stirs a slow vortex that swirls particles away and leaves a fading wake, like moving a hand through mist. - [Sphere Field](https://crazygl.com/hero/sphere-field.md) (featured) — Many soft translucent gradient spheres drift in 3-D depth, blending into one another like abstract glass bubbles. Depth-of-field softens the back layers. - [Starfield Warp](https://crazygl.com/hero/starfield-warp.md) (featured) — Deep parallax star field. The cursor bends space around it — stars near the pointer pull into curved trails toward the lens centre. - [Thermal Logo](https://crazygl.com/hero/thermal-logo.md) (featured) — 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. - [Touch Sparkle Grid](https://crazygl.com/hero/touch-sparkle-grid.md) (featured) — A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests. - [Typographic 3D Transformer](https://crazygl.com/hero/typographic-3d-transformer.md) (featured) — A single extruded 3D word sits in the centre of the stage with a glassy candy finish under a RoomEnvironment studio. Move the cursor horizontally and the whole word rotates to face you; move vertically and each letter individually leans toward the cursor — closer letters bend more. - [Typographic Black Hole](https://crazygl.com/hero/typographic-black-hole.md) (featured) — A headline warped by a glowing gravitational center. The cursor moves the singularity — letters bend, chromatic-aberrate, and pour toward the event horizon while a starfield lenses behind it. - [Typographic Fluid Simulation](https://crazygl.com/hero/typographic-fluid-simulation.md) (featured) — A bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the background stays minimal. Move the cursor to inject velocity and color into the letters. - [Typography In Portal](https://crazygl.com/hero/typography-in-portal.md) (featured) — Your headline rendered inside a glowing circular portal — text drifts across the opening, the rim glows and ripples with noise, and the pointer bends the portal in real time. Built as a single fullscreen WebGL shader that samples a canvas-rendered text texture with chromatic aberration. - [Typography Shadows](https://crazygl.com/hero/typography-shadows.md) (featured) — Abstract letterforms floating at different depths behind the hero, with dramatic shadows and pointer-driven parallax. - [Typography Through Rainy Glass](https://crazygl.com/hero/rainy-glass-typography.md) (featured) — A large bright headline sits behind a fogged glass pane covered in sliding water droplets. The drops refract the type; the cursor wipes a clear arc as you move. - [Vertical Phone Screenshot With 3D Depth](https://crazygl.com/hero/phone-mockup.md) (featured) — A mobile screenshot floats inside a realistic 3D phone mockup. The phone rotates with the cursor and the screen pulses with subtle app glow. Perfect for app launch pages. - [Volumetric Beam Logo](https://crazygl.com/hero/volumetric-beam-logo.md) (featured) — Your logo floats inside a vertical museum-grade beam of light. Ray-marched volumetric cone reveals drifting dust around the brand, an emissive ring lights the logo, and a soft floor shadow grounds the scene. Premium SaaS / personal-branding / product-launch aesthetic. - [Vortex Particle Sphere](https://crazygl.com/hero/vortex-particle-sphere.md) (featured) — Thousands of small white dots are spread evenly over a sphere with a Fibonacci spiral, then a vortex field swirls and pulls them toward a focal point — they spiral, streak, and bunch up like matter falling into an accretion disc. Crisp, monochrome, and scientific on pure black. - [WALL-E](https://crazygl.com/hero/wall-e.md) (featured) — An animated 3D WALL-E that watches your cursor. His binocular head tracks the pointer with a soft, critically-damped spring — he idles, blinks, leans, and trundles a little on his treads to keep you in view, then perks up and bobs excitedly when you hover the call-to-action. Robot on the left, copy and CTA on the right. Premium, characterful, alive. - [Water Ripple Headline](https://crazygl.com/hero/water-ripple-headline.md) (featured) — A bold headline printed on a moonlit pool. Stacked Gerstner waves and pointer-driven Gaussian wakes bend the letters in real time, and the CTA fires a circular wavefront across the surface. Reflective night water with soft moon highlights and a low cinematic camera. - [Water Surface](https://crazygl.com/hero/water-surface.md) (featured) — A dark reflective water plane. Stacked Gerstner waves animate the surface and the cursor leaves a continuous wake of expanding Gaussian wavefronts plus a live finger-press depression directly under the pointer. Sky, sun, and horizon refract through every displaced normal. - [Waving Flag Headline](https://crazygl.com/hero/waving-flag-headline.md) (featured) — Your headline printed on a slow-waving cloth flag. The fabric ripples in 3D with soft cinematic lighting; the cursor pushes the cloth like a gust of wind. - [AI Video Generation Portal](https://crazygl.com/hero/ai-video-portal.md) — A floating prompt card streams a current of energy particles across to a glowing portal ring, through which the generated video or image materializes with a shimmer-dissolve reveal. - [Audio-Reactive Hero](https://crazygl.com/hero/audio-reactive.md) — A central logo or preview image framed by a reactive visualizer — a radial frequency-bar ring and waveform that pulse with glow blooms on every beat. Alive without sound, with optional mic or file audio. - [Cinematic Before / After Slider](https://crazygl.com/hero/before-after-slider.md) — Two images or videos blended in 3D across a glowing, draggable glass divider. The split refracts the scene with a chromatic edge, the whole plane tilts on pointer parallax, and corner labels call out before and after — a transformation showcase for AI enhancement, photo and video editing, design tools, and beauty tech. - [Collection Carousel](https://crazygl.com/hero/collection-carousel.md) — 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. - [Command Center Stage](https://crazygl.com/hero/command-center.md) — Your product UI floats as a giant screen at the centre of a dark 3D command room, smaller procedural panels orbit around it, and volumetric spotlights sweep through floor fog while a slow camera dolly breathes life into the scene. - [Crystal Refraction Field](https://crazygl.com/hero/crystal-refraction.md) — Six raymarched octahedral crystals drift across the screen, refracting the background through each face with per-channel chromatic dispersion at the rim. - [Dashboard Eclipse](https://crazygl.com/hero/dashboard-eclipse.md) — Your dashboard screenshot sits low in the frame, partially hidden behind a glowing eclipse horizon, a vertical beam of light rising from it like the product itself is powering the scene. - [Data Rain Product Reveal](https://crazygl.com/hero/data-rain-reveal.md) — Elegant colored data streams fall behind a central product screenshot in four refined tints, with a few drops drifting in front for parallax depth. Cyberpunk but refined. - [Depth Wave Field](https://crazygl.com/hero/depth-wave-field.md) — A perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling waves ripple through the field; crests glow electric violet, troughs and far rows sink into deep indigo. The pointer pushes a ripple toward the cursor. - [Energy Beam CTA](https://crazygl.com/hero/energy-beam-cta.md) — A conversion-focused hero: the main CTA button emits a glowing vertical beam that connects to a tilted product dashboard, making the button feel like it activates the product. Hover the CTA to brighten the beam, burst particles, and ripple a wake across the dashboard. - [Floating Dashboard With Light Beam Reveal](https://crazygl.com/hero/dashboard-light-beam.md) — Your product dashboard, tilted in 3D space, scanned into existence by a soft blue-purple light beam. A glowing uplight underneath and a subtle floor reflection complete the look. - [Floating Metrics City](https://crazygl.com/hero/metrics-city.md) — Your KPIs become tall glowing 3D towers in a dark abstract city. The dashboard screenshot floats above the skyline like a control layer, with FogExp2 atmospheric perspective fading distant towers into deep blue-black. - [Interactive Orb](https://crazygl.com/hero/interactive-orb.md) — A fluid iridescent marble floating in the dark. Domain-warped aurora currents — deep navy lobes, cyan pools, hot white folds — swirl across the sphere and flow toward your cursor, with fine contour ripples and filmic grain. - [Neon CTA Dock](https://crazygl.com/hero/neon-cta-dock.md) — A cyberpunk control-dock hero: 1-3 CTA buttons rendered as thick glowing physical panels on a floating console, with periodic light pulses, hover halos, and click bursts. Real, clickable DOM buttons with a custom-painted WebGL glow under each one. - [Notification Storm](https://crazygl.com/hero/notification-storm.md) — Tiny notification, message, alert and success cards stream from deep space toward a tilted product dashboard, curving inward under a magnetic pull and brightening on arrival. Hover anywhere to slow the storm to a crawl. - [Product UI in Zero Gravity](https://crazygl.com/hero/zero-gravity-ui.md) — Five product screens drift weightlessly in a dark space. The main screen sits in focus at the front; four secondary feature screens float at varying depths behind it, with soft shadows and depth fog selling the void. - [Vertical Video Feed Spiral](https://crazygl.com/hero/video-feed-spiral.md) — Vertical videos or mobile screenshots wrap around a slowly rotating 3D cylinder, climbing in their own upward-scrolling lanes. Front tiles read sharp and bright; back tiles dim and blur with depth. Tiles spawn offscreen below and despawn offscreen above with a soft edge fade. Hover a tile to pause and focus it. ### Product - [Code to Product Transformation](https://crazygl.com/hero/code-to-product-transformation.md) (featured) — A panel of live syntax-highlighted source code dissolves into a stream of glowing character particles that stream across the canvas and reassemble into a polished product UI screenshot. A continuous 'code becomes product' loop for developer-tool and SaaS landing pages. - [Cyber Terminal](https://crazygl.com/hero/cyber-terminal.md) (featured) — A terminal/code-editor screenshot floats at the centre, surrounded by drifting command fragments, glowing syntax particles and a pointer-driven matrix-green cursor trail. - [Floating Ceramic UI](https://crazygl.com/hero/floating-ceramic-ui.md) (featured) — A matte ceramic-like tablet panel with rounded edges presents your dashboard screenshot under soft studio lighting. The slab breathes through a slow yaw oscillation with subtle pointer-driven tilt; ambient occlusion sells the screen-to-bezel seam. - [Floating Movie Scene](https://crazygl.com/hero/floating-movie-scene.md) (featured) — Your product demo presented like a launch trailer: a floating screen drifts on a dark 3D stage while volumetric spotlights sweep across it, dust hangs in the beams, and a soft reflection pools on the floor. Slow cinematic camera drift; scroll pushes the camera in. - [Floating Product](https://crazygl.com/hero/floating-product.md) (featured) — A 3D product model drifts and slowly turns in a quiet studio atmosphere. The model wears its own PBR textures; soft dust particles drift through the air around it. - [Hero Video on Curved LED Wall](https://crazygl.com/hero/led-wall.md) (featured) — Your image or video plays across the inner concave surface of a large, cinematic curved LED wall, lit like a virtual production stage with a subtle LED-pixel grid, floor reflection, and pointer parallax. - [Launch Reveal](https://crazygl.com/hero/launch-reveal.md) (featured) — 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. - [Masked Text Carousel](https://crazygl.com/hero/masked-text-carousel.md) (featured) — 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. - [Neon Glass Phone Stack](https://crazygl.com/hero/neon-phone-stack.md) (featured) — 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. - [Paper and Shadow](https://crazygl.com/hero/paper-shadow-hero.md) (featured) — Your product screenshot, printed on a softly curled sheet of paper resting under warm window light. Leaves drift overhead and cast slow, dappled shadows across the page. - [Product Carousel](https://crazygl.com/hero/product-carousel.md) (featured) — A centred showcase carousel for transparent product PNGs — the active product sits front and large while the previous and next peek in from the sides, dimmed and scaled. Swipe, drag, arrows or dots; products swing into frame with captions that animate in. - [Product Exploded View](https://crazygl.com/hero/product-exploded-view.md) (featured) — 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. - [Product in Liquid](https://crazygl.com/hero/product-in-liquid.md) (featured) — A product floats suspended inside a thick, slowly churning liquid blob that genuinely refracts it. Tinted glass, chromatic dispersion, drifting bubbles and crawling caustics give a sensual, premium feel. - [Product Pedestal](https://crazygl.com/hero/product-pedestal.md) (featured) — A 3D product model rests on a minimal floating pedestal under studio HDRI lighting. Slow turntable rotation, soft contact shadow, drifting dust, subtle mouse parallax, and press-and-drag to free-spin the product. - [Retro-Future Product Tunnel](https://crazygl.com/hero/retro-tunnel.md) (featured) — Your screenshot or video sits at the centre of an 80s sci-fi tunnel — stacked rings of glowing colour flow toward the camera against deep black. Energetic, fun, memorable. - [Stage Screen](https://crazygl.com/hero/stage-screen.md) (featured) — A keynote-stage hero: your product screenshot lives on a massive floating screen, lit by sweeping volumetric spotlights through a low-lying carpet of theatre fog. - [VHS Product Demo Screen](https://crazygl.com/hero/vhs-product-screen.md) (featured) — 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. - [Video Wall Hero](https://crazygl.com/hero/video-wall.md) (featured) — A cinematic cluster of floating media panels at staggered depths. The center panel carries your main demo — large and sharp — while the panels behind recede smaller, dimmer, and depth-blurred. Slow ambient drift, pointer parallax, and hover focus that pulls any panel forward. - [White Infinity Studio](https://crazygl.com/hero/white-infinity-studio.md) (featured) — A 3D product GLB floats in a bright seamless infinity studio — the floor sweeps continuously up into the back wall with no visible seam. Three-point softbox lighting, a soft floor reflection, and a very subtle camera dolly sell the look of a premium catalogue photoshoot. - [App Screenshot Fan Stack](https://crazygl.com/hero/app-screenshot-fan-stack.md) — Your product screenshots pop up from below and arrange in a soft fan — every few seconds the lead card drifts away and the next slides forward in a smooth, looping reveal. - [Calm Cloud Interface](https://crazygl.com/hero/calm-cloud-interface.md) — A SaaS dashboard floats among soft cloud sprites under a friendly cream-to-sky-blue sky. Pointer drift parallaxes both the camera and the layered clouds for a light, approachable, effortless mood. - [Floating Screen Recording](https://crazygl.com/hero/floating-screen-recording.md) — 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. - [Product in Elemental Scene](https://crazygl.com/hero/product-elemental-scene.md) — A 3D product floats inside a stylised elemental world chosen from its benefit — water, fire, ice, cloud, earth or light. A custom environmental shader and an instanced particle system surround the product and tint its lighting to match the element. - [Product Turntable Studio](https://crazygl.com/hero/product-turntable-studio.md) — A 3D product model rotates on a premium polished turntable disc beside the hero copy. Studio HDRI lighting, warm key and cool fill softboxes, drag to free-spin, and pointer hover-zoom — a high-end product launch in code. - [Scroll-to-Assemble Product](https://crazygl.com/hero/scroll-assemble-product.md) — A 3D product begins disassembled and clicks together as you scroll the page. Once whole, the camera eases in and benefit labels fade in around it. Cinematic three-point studio lighting with HDRI reflections. ### Retro - [Vaporwave Dashboard Sunset](https://crazygl.com/hero/vaporwave-sunset.md) — Your product screenshot floats over a magenta perspective grid floor, with a slatted retro sun glowing on the horizon and a wet-neon reflection underneath. 80s/90s vaporwave SaaS hero. ### Reveal - [Debugging X-Ray](https://crazygl.com/hero/debugging-xray-hero.md) (featured) — A polished product screenshot scanned by an animated x-ray band that reveals the underlying component structure as glowing devtools-style bboxes and accessibility outlines. Drag the pointer, or let it auto-sweep — exactly the feeling of opening the inspector on production. - [Pixel to 3D Reveal](https://crazygl.com/hero/pixel-to-3d-reveal.md) — An image is sampled into a cloud of chunky pixel cubes scattered through 3D space. They fly to their home positions and refine from low-res chunks to crisp pixels — a pixel mosaic that assembles itself in front of a glowing grid floor. Three.js InstancedMesh, image-as-particle-source. ### Surreal - [Old Internet Portal](https://crazygl.com/hero/old-internet-portal.md) (featured) — 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. ### Technical - [Database Core](https://crazygl.com/hero/database-core.md) (featured) — A central 3D database core — a stack of slowly rotating cylindrical disks with glowing seams. Query pulses radiate across the floor and flash through the core's seams; configurable satellite shapes orbit around it. Built for data platforms, ORMs, and infrastructure landing pages. - [Infrastructure Stack Tower](https://crazygl.com/hero/infrastructure-stack-tower.md) (featured) — A 3D tower of translucent labelled slabs — CDN, Edge, API, Services, Database, Storage — that assemble tier-by-tier from the ground up, each slab settling with a soft physics-ish bounce. Thin glowing seams, real PhysicalMaterial transmission, PMREM HDRI lighting, pointer parallax. For high-end cloud / platform / infra-as-code landing pages. ### Typography - [Animated Text Gradient](https://crazygl.com/hero/animated-text-gradient.md) (featured) — A heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed. - [Animated Text Reveal](https://crazygl.com/hero/animated-text-reveal.md) (featured) — A paragraph that unblurs and fades in word by word as the viewer scrolls — with an initial blur and initial opacity that mean even the un-revealed words sit softly on the page rather than disappearing. - [Blend Text](https://crazygl.com/hero/blend-text.md) (featured) — 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. - [Card Expand Reveal](https://crazygl.com/hero/card-expand-reveal.md) (featured) — Horizontal accordion of cards — the active card stretches to reveal an inner story, others compress to vertical labels. Auto-cycles on idle. - [Cursor Reveal Text](https://crazygl.com/hero/cursor-reveal-text.md) (featured) — Two stacked paragraphs — a primary line shown in the surface colour, and a secret reveal line shown only inside a cursor-following spotlight that grows on hover. - [Cyberpunk Text](https://crazygl.com/hero/cyberpunk-text.md) (featured) — Neon-lit cyberpunk heading with magenta + cyan glow, periodic flicker, and faint scanlines — Night City wall poster vibes. - [Digit Up](https://crazygl.com/hero/digit-up.md) (featured) — A large number that counts from a start value up to an end value with configurable easing, decimals, prefix and suffix — the classic stats / numbers section, but as a full hero. - [Flicker Text](https://crazygl.com/hero/flicker-text.md) (featured) — A heading that flickers character by character like a broken neon sign, an LED panel, a retro CRT or an electric arc — with three patterns and four style presets. - [Highlight Text](https://crazygl.com/hero/highlighttext.md) (featured) — A heading with marker-highlighter strokes drawn behind specific words — like a printed page someone marked up. Words wrapped in *asterisks* get highlighted with the accent colour. - [Hover Text Highlight](https://crazygl.com/hero/hover-text-highlight.md) (featured) — A heading whose words light up on hover — a coloured backdrop wipes in from one side, and out the other when the cursor leaves. Pick Background (full bleed) or Underline (band only). - [Image Masked Text](https://crazygl.com/hero/image-masked-text.md) (featured) — 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. - [Kinetic Split Typography](https://crazygl.com/hero/kinetic-split-typography.md) (featured) — A bold grotesk headline is split into horizontal slices that fly in from alternating sides, settle into alignment, and then parallax against the pointer at different depths. - [Kinetic Text Motion](https://crazygl.com/hero/kinetic-text-motion.md) (featured) — Words cycle through, each one wiping in and out as 40 horizontal stripes that scale staggered across a WebGL surface. Optional per-fragment blur, distortion or ripple effect. - [Letter Morph](https://crazygl.com/hero/lettermorph.md) (featured) — Heading where each letter cross-fades and morphs through the next phrase — letters that match stay, letters that don't blur-swap. - [Magnetic Letter Field](https://crazygl.com/hero/magnetic-letter-field.md) (featured) — Every character of the headline is an individual physical object. The cursor projects an invisible magnetic field — letters lean toward it, push back, and lift away. Hover a word and its letters float upward like iron filings rising from a sheet of paper. - [Motion Colour Text](https://crazygl.com/hero/motion-colour-text.md) (featured) — Heading filled with a constantly drifting multi-stop conic gradient — like aurora moving through the letterforms. - [On Scroll Typography](https://crazygl.com/hero/on-scroll-typography.md) (featured) — A headline whose transform is driven by scroll progress through the viewport — pick an animation flavour (scale / rotate / slide / blur / combo), tune the scroll window, and the headline does the rest. - [Parallax Marquee](https://crazygl.com/hero/parallax-marquee.md) (featured) — 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. - [Path Text Reveal](https://crazygl.com/hero/path-text-reveal.md) (featured) — Multi-line heading where each line wipes in via a CSS clip-path from top, bottom, left, right, or centre — with a configurable stagger between lines. - [Pro Text Type Effect](https://crazygl.com/hero/pro-text-type-effect.md) (featured) — A pro-grade typewriter: cycles through multiple strings with variable per-character speed, fluid font sizing (clamp), per-line gradient fills, and a choice of cursor characters from block to slug to bar. - [Progressive Blur Text](https://crazygl.com/hero/progressive-blur-text.md) (featured) — A giant display word that is razor-sharp at the top and melts into a progressively heavier blur toward the bottom — a true variable-radius blur per row, not a gradient-masked copy. Bold, editorial, fully recolourable. - [Reveal Text Scroll](https://crazygl.com/hero/reveal-text-scroll.md) (featured) — A heading revealed by a directional wipe — one of eight angles — with an optional layered effect: a blur-in, a colour morph from start to end, or a chromatic-aberration split that resolves as the reveal completes. - [Rolling Text](https://crazygl.com/hero/rolling-text.md) (featured) — Each character rolls through a vertical stack of duplicate copies of itself in a continuous loop, with a blur pulse mid-roll and a per-character stagger. - [Sand Typography](https://crazygl.com/hero/sand-typography.md) (featured) — 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. - [Scattered Sentence](https://crazygl.com/hero/scattered-sentence.md) (featured) — Words start scattered across the canvas at random positions and angles, then converge into a single readable sentence — chaos resolving into order. - [Smart Typewriter Pro](https://crazygl.com/hero/smart-typewriter-pro.md) (featured) — Typewriter that only deletes the diverging tail between phrases — keeps shared prefixes intact and types only the new ending, like a writer correcting themselves. - [Sonic Text](https://crazygl.com/hero/sonic-text.md) (featured) — Heading paired with a procedurally simulated audio waveform — bars rise and fall in time-correlated bands and the text stretches subtly with the loudest beats. - [Text Cycler](https://crazygl.com/hero/text-cycler.md) (featured) — A wordmark that cycles between several words or phrases, each one entering with a character-, word-, or line-staggered fade — pick the stagger order from first / last / center / random. - [Text Flow](https://crazygl.com/hero/text-flow.md) (featured) — A wordmark assembled out of thousands of soft particles, each parked at a sampled pixel of the rasterised text. Move the cursor through it and the particles flee from your hand, then spring back to their target positions. - [Text Glow Hover](https://crazygl.com/hero/text-glow-hover.md) (featured) — A heading with a stack of layered, blurred shadow copies that fan out in the direction of the cursor — like a tracer of light pouring out of the wordmark. On hover-end the stack relaxes back to a resting diagonal trail. - [Text Illuminate](https://crazygl.com/hero/text-illuminate.md) (featured) — A spotlight follows the cursor across the heading — letters under the beam glow and brighten, the rest fall into shadow. - [Text Image Cursor](https://crazygl.com/hero/text-image-cursor.md) (featured) — A list of items where hovering each row reveals a thumbnail that follows the cursor — case-study index pattern, magazine-grade. - [Text Masking](https://crazygl.com/hero/text-masking.md) (featured) — Headline acts as a window onto a slowly drifting photograph — large letterforms, the photograph showing through them, a clean colored hero around the cut-out. - [Text Pressure](https://crazygl.com/hero/text-pressure.md) (featured) — A heading rendered in the Compressa variable font that warps each letter's weight, width, italic, and alpha axes based on cursor proximity. Push your cursor toward a letter and it expands; pull away and it contracts. - [Text Reveal Lens](https://crazygl.com/hero/text-reveal-lens.md) (featured) — A cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the revealed text. - [Text Rotation](https://crazygl.com/hero/text-rotation.md) (featured) — A static prefix with a vertical slot-machine rotator behind it — each word slides up, settles, and the next one rises into place. - [Text Scrambler](https://crazygl.com/hero/textscrambler.md) (featured) — Heading that scrambles into glyph soup and resolves left-to-right into the target phrase — a hacker-decode reveal that rotates through several phrases. - [Text Video Mask](https://crazygl.com/hero/text-video-mask.md) (featured) — 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. - [TextFluxUnveil](https://crazygl.com/hero/textfluxunveil.md) (featured) — A paragraph whose first N words start fully revealed (setting up context) and the rest fade in as the viewer scrolls — perfect for 'context → reveal' headlines. - [Type Writer Custom](https://crazygl.com/hero/type-writer-custom.md) (featured) — A typewriter with fully customisable per-step sequencing: type N chars, pause, delete M chars, type more, then loop. - [Typewriter Effect](https://crazygl.com/hero/typewriter-effect.md) (featured) — A cycling wordmark that types itself out character by character, pauses, deletes, and rolls to the next word — with a blinking block cursor that glows softly against a layered atmospheric backdrop. - [Ultimate Scroll Text](https://crazygl.com/hero/ultimate-scroll-text.md) (featured) — A long paragraph that reveals as the viewer scrolls — word-by-word, letter-by-letter, or line-by-line — with a soft ghost copy underneath that hints at the next words just before they arrive. - [Unblur Text Reveal](https://crazygl.com/hero/unblur-text-reveal.md) (featured) — A paragraph that resolves word-by-word as the viewer scrolls, with a choice of six animation styles — blur, slide-up, scale, rotate, wave, or glow — and a colour transition from an initial muted hue to the final readable colour. - [3D Depth Text](https://crazygl.com/hero/3d-depth-text-effect.md) — Heading extruded with stacked text-shadow layers — a faux-3D effect with a slow camera-style tilt that follows the cursor. - [Animated 404](https://crazygl.com/hero/animated-404.md) — Oversized 404 hero with the middle 0 swapped for an idle-orbiting glowing eye — the kind of error page people actually screenshot. - [Animated Flow Text](https://crazygl.com/hero/animated-flow-text.md) — Each word rides its own sine wave with a per-letter phase offset — the line reads like a banner caught in a slow current. - [Auto Cover](https://crazygl.com/hero/autocover.md) — Magazine-style cover that auto-cycles through a stack — large title, issue number, vertical spine text, with a pointer-driven tilt, a per-cover link, six entrance modes, and an optional pause-on-cover-hover. - [Bad Handwriting](https://crazygl.com/hero/bad-handwriting.md) — A heading scribbled like a real human — wobbly per-letter rotation, baseline jitter, varied ink weight, with an underline scribbled in as the line lands. - [Blurry Text FX](https://crazygl.com/hero/blurrytextfx.md) — Each word starts heavily blurred and resolves into focus on a stagger. Plays once on load or loops with a configurable hold. - [Circular Text Pro](https://crazygl.com/hero/circular-text-pro.md) — Three concentric rings of text spinning at independent speeds, with a centred wordmark and accent dots — a fully composed badge. - [Clip Type Stagger](https://crazygl.com/hero/clip-type-stagger.md) — Each character is clipped from below and rises into place on a stagger — like setting movable type one piece at a time. Plays once on load or loops with a configurable hold. - [Colorful Type Motion](https://crazygl.com/hero/colorful-typemotion.md) — Each letter cycles through a hue palette on a phase offset — moving colour without a moving gradient. Pick from eight curated palettes spanning soft pastels to electric neon. - [Cursor Shadow Text](https://crazygl.com/hero/cursor-shadow-text.md) — The heading casts a real drop shadow whose direction tracks the cursor — like a single fixed light moving across the room. - [Drop Cap](https://crazygl.com/hero/dropcap.md) — Editorial paragraph with a single, oversized serif drop-cap that overhangs the leading margin — drop straight into a magazine layout. - [Dynamic Fill Nav](https://crazygl.com/hero/dynamic-fill-nav.md) — A nav bar where each link reveals a coloured fill on hover — left-to-right wipe behind a flat-coloured label. - [Font Changer](https://crazygl.com/hero/font-changer.md) — Heading cycles through a curated stack of Google Fonts on a timer — each crossfade preserves the line so the words stay readable while the personality changes. Per-font scale is auto-normalised so display, mono, and handwriting faces all read at the same visual size. Prefix and suffix stay in a fixed font when you only want part of the line to flip. - [Glitch Title](https://crazygl.com/hero/glitch-title.md) — Massive title with horizontal slice glitches, RGB drift and faint scanlines — the classic broken-broadcast hero. - [Gradient Text](https://crazygl.com/hero/gradient-text.md) — Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation. - [Highlight Cycling](https://crazygl.com/hero/highlight-cycling.md) — A coloured highlighter sweeps across the line one word at a time — like a presenter underlining the key word as they speak it. - [Hover Text Link](https://crazygl.com/hero/hovertext-link.md) — A list of inline links with an animated underline-fill on hover — the text gets a coloured wipe that grows from left. - [Hover Text Reveal](https://crazygl.com/hero/hover-text-reveal.md) — A row of phrases where hovering one expands a stagger-typed paragraph beside it — the kind of FAQ heading-list interaction premium SaaS sites use. - [Jumpy Text FX](https://crazygl.com/hero/jumpytextfx.md) — Each letter bounces in independently with spring-damped physics, then idles with a subtle hover-bounce — text that feels alive. - [Keyboard Keys](https://crazygl.com/hero/keyboard-keys.md) — Phrase rendered as physical keyboard keys — each cap presses down on a stagger like someone typing it out for you. - [Kinetic Text](https://crazygl.com/hero/kinetic-text.md) — Stacked lines where each word is timed independently — bounce in, rotate, scale, on a choreographed sequence. Pick whether the show plays on load, follows scroll, or loops forever. - [Local Live Timer](https://crazygl.com/hero/local-live-timer.md) — A live countdown to a target date — DD : HH : MM : SS with tabular numerals, smooth digit flip, and customisable label. - [Long Shadow Text](https://crazygl.com/hero/long-shadow-text.md) — Pure CSS long-shadow heading — letters cast a diagonal ramp shadow that gradient-fades into the bg, like classic flat-design posters. - [Magnet Text](https://crazygl.com/hero/magnet-text.md) — Letters are pulled toward the cursor with falloff — close letters attract strongly, distant letters barely tug. Springs return them to the line. - [Mask Text Reveal](https://crazygl.com/hero/mask-text-reveal.md) — Text revealed as a moving circular mask sweeps across — the headline appears only where the image-shaped mask uncovers it. - [Mouse Wave Text](https://crazygl.com/hero/mousewavetext.md) — A wave travels along the heading following the cursor — each letter pops up as the wave passes, then settles back. Switch to auto mode for a hands-off demo. - [Pillflow Action Menu](https://crazygl.com/hero/pillflow-action-menu.md) — A row of pill-shaped action buttons where each pill expands its label on hover — Apple-tab-bar grade affordance. - [Proximity Text FX](https://crazygl.com/hero/proximitytextfx.md) — Letters near the cursor scale up and brighten; letters further away dim and shrink — an inverse-distance attention effect. - [Reflective Text](https://crazygl.com/hero/reflectivetext.md) — Heading with a soft, gradient-faded reflection below it. The reflection extends out across a tilted floor, and lightly tracks the pointer — the bottom skews under the cursor, the top stays anchored to the heading. - [Rotate Text FX](https://crazygl.com/hero/rotatetextfx.md) — Each letter rotates independently with offset phase. Trigger the rotation as a one-shot entrance on load, or let it spin forever. - [Rotating Headline](https://crazygl.com/hero/rotatingheadline.md) — A static two-line headline with one slot that rotates through a list of words — the prefix and suffix stay put, the rotating word cycles. - [Rotating Text Badge](https://crazygl.com/hero/rotating-text-badge.md) — A self-contained rotating sticker badge — text on the rim of a circle, an icon (or your own word) in the middle, next to a heading. - [Rotating Text Pro](https://crazygl.com/hero/rotating-text-pro.md) — Slot machine with a 3D flip in X — the rotating word flips over a horizontal axis like a split-flap board. - [Scramble Shuffle Text](https://crazygl.com/hero/scrambleshuffle-text.md) — A hybrid: letters first scramble into random glyphs, then physically shuffle position, then settle into their target — two effects in one timeline. - [Scrambly Text](https://crazygl.com/hero/scrambly-text.md) — Heading scrambled into random glyphs that resolve in a non-left-to-right order — characters lock in scattered across the word. - [Scroll Flow Text FX](https://crazygl.com/hero/scrollflowtextfx.md) — Stacked rows of large text drift left/right at offset speeds as the visitor scrolls — like a marquee orchestrated by the page itself. - [Scroll Reveal Pro](https://crazygl.com/hero/scrollreveal-pro.md) — Multi-line heading where each line is masked and rises into view as the visitor scrolls — staggered, eased, with a small blur dropoff. - [Scroll Synced Text](https://crazygl.com/hero/scrollsyncedtext.md) — A series of statements that swap one at a time as the user scrolls — the heading is pinned at viewport-centre and the next statement crossfades in as you scroll through the hero's 200vh of vertical space. - [Scroll Text Color](https://crazygl.com/hero/scrolltextcolor.md) — A heading whose colour sweeps from start to end as the user scrolls — uses background-clip:text for crisp gradient handover. - [Scroll Text Fade](https://crazygl.com/hero/scroll-text-fade.md) — A long block of copy that fades word-by-word as the visitor scrolls — early words go dim, current words pop, future words sit faded. - [Scroll Text FX](https://crazygl.com/hero/scrolltextfx.md) — Each letter scales, rotates and brightens as it passes the scroll midpoint — an editorial mid-line emphasis effect. - [Selection Color](https://crazygl.com/hero/selection-color.md) — A long-form heading + body with a styled `::selection` — drag your cursor across it and the highlight is part of the brand. The demo auto-cycles a synthetic selection. - [Shine Text](https://crazygl.com/hero/shine-text.md) — Premium chrome-style shine — silver gradient face, soft wide highlight with iridescent tint leading the sweep, and a pulsing glow halo that breathes in sync. - [Spin Text Circle FX](https://crazygl.com/hero/spintextcirclefx.md) — Up to three concentric rings of text spinning around an optional centre badge or image. Each ring has its own text, colour and speed (negative speed reverses direction); the radii pack inward automatically based on font sizes. - [Text Doodles](https://crazygl.com/hero/textdoodles.md) — Heading marked up with hand-drawn doodle annotations — circle one word, scribble under another, arrow into a third. Reads like a designer's notebook. - [Text Fill](https://crazygl.com/hero/textfill.md) — Headline that fills bottom-up with a progress colour — like a loading bar disguised as type. The fill loops 0 → 100% on a configurable cycle. - [Text Glitch Hover](https://crazygl.com/hero/text-glitch-hover.md) — Heading sits calm until you hover, then snaps into an RGB-split glitch. Stops cleanly on leave — restraint with a payoff. - [Text Hover Icon](https://crazygl.com/hero/text-hover-icon.md) — A sentence where designated keywords morph into a glyph on hover and bounce back to text on leave — the words become controls. - [Text Hover Reveal](https://crazygl.com/hero/text-hover-reveal.md) — Each item shows a default heading; on hover the heading scrolls up and a secondary line scrolls in from below — list-of-services interaction. - [Text Reveal](https://crazygl.com/hero/text-reveal.md) — Heading wiped in from a single direction via a hard clip-path mask, with a small per-letter delay — the foundational reveal everyone needs. - [Text Split Reveal](https://crazygl.com/hero/textsplitreveal.md) — Heading splits into two halves that slide apart to reveal a secondary line between them — the curtain-pull pattern. - [Text Start Indent](https://crazygl.com/hero/text-start-indent.md) — Editorial-style paragraph with the first line indented and a giant drop-cap that overhangs into the margin — magazine-grade typography out of the box. - [Text Swap Animation](https://crazygl.com/hero/text-swap-animation.md) — Phrases swap with a clean two-layer flip — old rises and fades, new rises in from below. The cleanest possible rotator. - [Word Blur](https://crazygl.com/hero/word-blur.md) — Heading that comes in word-by-word — each word lifts out of a deep blur and slides into focus on a small stagger. - [Word Tunnel](https://crazygl.com/hero/word-tunnel.md) — Rows of bold black-and-white typography wrapped into a rotating cylinder. The camera drifts between reading the folded text wall and staring straight down the vortex, with the far wall ghosting through the gaps. Feed it your own manifesto lines. ## Notes for agents - The slug is the source of truth. `/hero/.md` and `npm install @crazygl/hero-` use exactly the same identifier. - Customizer fields in the markdown spec list each prop's `id`, `type`, `default`, and (where available) a human-readable description. Pass them as React props on the hero component. - Heroes that declare `interactivity: "scroll"` work best when the page below them is actually scrollable — embed them in a real route, not a 100vh modal. - Heroes that declare `pointerTracking: true` or `interactivity: "pointer"` need to live inside a hoverable container with no `pointer-events: none` ancestors.