Hero Section templates
Animated hero sections for the top of a landing page: 3D scenes, shaders, particles and kinetic type.
Each one is a single prompt an AI coding agent rebuilds from: rebuild-tested with Claude Code, written for Cursor, Codex and Gemini CLI.
Monolith
Hero SectionA floating hexagonal basalt monolith split by glowing cyan fissures, with drifting debris, a light shaft, and pointer parallax. Procedural GLSL stone — no textures, no models, no network.
Kinetics
Hero SectionA dark SaaS hero where giant type slides with scroll inertia, glass stat cards tick like a live dashboard, and a frosted dock magnifies under the pointer. Pure DOM and Framer Motion — no canvas, no images.
Refract
Hero SectionAn aurora of violet, cyan, and pink light flows behind frosted glass cards whose rims bend it like a lens. One raw WebGL2 shader, no three.js, and the glass follows whatever the DOM lays out.
Flux
Hero SectionSixty thousand ember particles flow from a sphere into a spiral galaxy, then spell your brand, and scatter from the pointer. One custom shader on a single Points cloud: no models, no textures, no simulation pass.
Halftone
Hero SectionA dark devtool hero whose artwork is printed live by a shader: a 3D object rendered as 1-bit dither, halftone dots or ASCII, with a wipe between modes and light that follows the pointer. Two tones and one accent, no purple. No images, no video.