# Heroes

> Above-the-fold landing sections with headline, copy and calls to action.

- [Eclipse Hero](https://www.assembli.design/components/eclipse-hero.md): Night-black hero over a total solar eclipse drawn in a shader: corona streamers, flames off the limb, looping prominences and embers. The moon slides in from a crescent, then edges away from the pointer so a diamond-ring bead breaks out on the side facing it. Member sites circle inside the rim, beside a claim-your-name field. Raw WebGL.
- [Sleepy Plush Hero](https://www.assembli.design/components/sleepy-plush-hero.md): Bedtime-brand hero with a knitted lilac bear raymarched in WebGL, hugging a puffy crescent moon on a midnight page. Its glossy eyes follow the cursor and it blinks and leans toward the pointer. Leave it alone and it gets drowsy: lids droop, the head nods and Zs drift up. Move the cursor and it startles awake. Press it for a squeeze. Script logo between two text columns.
- [Payment Terminal Hero](https://www.assembli.design/components/payment-terminal-hero.md): Fintech hero with a glossy plastic card terminal raymarched in WebGL, floating in an exploded still life with a coiled cord, a coin stack and a cursor. The keypad taps out each amount, the card dips, the screen approves and a printed receipt tape feeds out. Floating nav card, big headline and gradient CTAs on the left.
- [Plush Mascot Hero](https://www.assembli.design/components/plush-mascot-hero.md): Studio hero with a knitted plush mascot raymarched in WebGL: a mint gumdrop creature hugging a puffy star, with V-stitch knit, fuzzy silhouette and glossy eyes that follow the cursor. It blinks, leans toward the pointer, lifts its brows as you get close and squishes when pressed. Script logo between two text columns.
- [Resonance Field Hero](https://www.assembli.design/components/resonance-field-hero.md): Studio hero over a sheet of thousands of lit ceramic spheres rippling in perspective. Each project slide morphs the field into its own wave (standing wave, two-source interference, slow swell), the cursor raises a swell under it, and a rotating badge pauses the motion. WebGL2 sprites, no three.js.
- [Specimen Bloom Hero](https://www.assembli.design/components/specimen-bloom-hero.md): Split hero styled as a botanical plate. A wireframe lotus grows in from the stem, then blooms layer by layer. Callouts with leader lines track the moving mesh and light up the part they name, either in turn or on hover. Drag to turn the specimen. Ink on paper in light mode, a glowing wire bloom in dark mode. Canvas 2D, no three.js.
- [Grass Arc Hero](https://www.assembli.design/components/grass-arc-hero.md): Airy hero where a furry grass hillside rises in an arc across a blue sky and fills the bottom of the frame, dotted with daisies. Over 200,000 instanced blades lean, sway in the wind and lie down wherever the pointer brushes them, then slowly stand back up. Italic serif over a tight sans headline, a glass pill nav, and a moonlit version in dark mode. Raw WebGL, no three.js.
- [Holo Cloth Hero](https://www.assembli.design/components/holo-cloth-hero.md): Studio hero with a holographic cloth you can grab. A Verlet cloth ripples in a soft breeze; drag any point and it pinches, crumples and follows the pointer, then flutters back to its pose on a spring. The print is violet foil silk with a chrome anemone raised from a height map and your own words in condensed type, under an iridescent sheen and a soft cast shadow. Raw WebGL, no three.js.
- [Dither Hero](https://www.assembli.design/components/dither-hero.md): A flowing, domain-warped field rendered as 1-bit ordered dither on a tiny pixelated canvas. Switch between Bayer, halftone-dot and scanline threshold matrices live, push the field with your cursor and click to send a ring through it. Theme-aware ink with an accent highlight.
- [Life Type Hero](https://www.assembli.design/components/life-type-hero.md): The headline is a Game of Life seed. Pixel letters hold for a beat, then shatter into gliders and oscillators under Conway's rules before snapping back into the words. Hover to seed new cells, click to rewind instantly. Newborn cells glow in the accent colour; ink follows the theme.
- [Rain on Glass Hero](https://www.assembli.design/components/rain-on-glass-hero.md): A fogged-up window on a neon city at night. Drag a finger across the glass to wipe a clear trail that slowly re-fogs, while raindrops swell, merge and slide down, each one a tiny upside-down lens of the street behind. Canvas 2D, no libraries beyond motion.
- [Brilliant Hero](https://www.assembli.design/components/brilliant-hero.md): Luxury hero with a raymarched round brilliant diamond: real facets, light traced through the stone per color channel with total internal reflection, so dispersion and fire emerge on their own. It turns slowly in a studio of softboxes, tilts toward the cursor, throws rainbow caustics and twinkles with four-point flares. Raw WebGL, no three.js.
- [Event Horizon Hero](https://www.assembli.design/components/event-horizon-hero.md): A black hole integrated per pixel: rays bend around it so the accretion disk wraps over and under the shadow, with a photon ring and Doppler-bright approaching side. Light mode lenses a celestial grid on paper; dark mode lenses a starfield. The cursor orbits the camera. Raw WebGL, no three.js.
- [Floating Isle Hero](https://www.assembli.design/components/floating-isle-hero.md): Game-style hero with a raymarched floating island: grassy hills on a fluted rock spire, trees, a cottage, a pond spilling over the edge as a waterfall and rocks in orbit, under drifting CSS clouds. Sunlit with soft shadows by day; in dark mode it is moonlit, windows glow and fireflies drift. The cursor turns the island. Raw WebGL, no three.js.
- [Jelly Garden Hero](https://www.assembli.design/components/jelly-garden-hero.md): Playful hero over a raymarched row of gummies on an endless floor that fogs into the page. Thin edges glow, floor shadows take the color of the jelly that cast them, and brushing or clicking a jelly sets it wobbling on its own spring. In dark mode they glow and pool colored light. Raw WebGL, no three.js.
- [Koi Pond Hero](https://www.assembli.design/components/koi-pond-hero.md): Calm full-bleed hero over a living koi pond: a GPU wave simulation refracts a pebble floor with caustics, koi drawn in shader swim, school and cast shadows, and lily pads with blooms ride the swell. The cursor trails ripples and a tap drops food the koi race for. Moonlit in dark mode. WebGL2, no three.js.
- [Minted Coin Hero](https://www.assembli.design/components/minted-coin-hero.md): Centered fintech hero with a raymarched coin rising from the bottom of the frame: raised rim, bead ring, an embossed planet emblem, lathe-turned field and a reeded edge, lit by a procedural studio of softboxes. Seven small coins tumble in orbit around it, it tilts toward the cursor, and it flips on a spring every few seconds or on click. The metal color is a prop. Raw WebGL, no three.js.
- [Shadow Study Hero](https://www.assembli.design/components/shadow-study-hero.md): Full-bleed raymarched still life: a plaster arch, sphere, column, stair and hoop on an endless floor that fogs into the page background. The cursor moves the sun, sweeping soft raymarched shadows across the floor, with a live time-of-day readout. Light mode is sunlit plaster, dark mode a moonlit stage. Raw WebGL, no three.js.
- [Soap Bubble Hero](https://www.assembli.design/components/soap-bubble-hero.md): Airy centered hero with drifting soap bubbles shaded by real thin-film interference: film thickness drains and swirls, so gold and magenta bands slide around and the crown thins to black. Bubbles show front and back films with window reflections, shy away from the cursor and pop into droplets on click. Raw WebGL, no three.js.
- [Swallowtail Hero](https://www.assembli.design/components/swallowtail-hero.md): Centered hero with a swarm of CSS 3D swallowtail butterflies that share one 3D context with the headline, so they fly both in front of and behind it. SVG wings flap in bursts and glides, bodies bank into turns, the cursor startles nearby ones and a click scatters the swarm. It bursts out from the center on load. No WebGL.
- [Tide Hero](https://www.assembli.design/components/tide-hero.md): Cinematic hero over a raymarched open ocean: wind-dragged crests, Fresnel reflections and a sun glitter path that follows the cursor along the horizon, under golden-hour cloud. The sky fades into the page so copy sits on it. In dark mode it is moonlit and starry, and a lighthouse sweeps a volumetric beam. Raw WebGL, no three.js.
- [Beam Hero](https://www.assembli.design/components/beam-hero.md): Centered hero above a flow diagram: source nodes connect to a central hub through curved SVG paths that draw in on load. Gradient light beams travel along each path in sequence; the hub flares as they arrive, then fires beams out to the destinations. Inputs, outputs and logo are configurable.
- [Brutalist Hero](https://www.assembli.design/components/brutalist-hero.md): Neo-brutalist hero: oversized uppercase headline with a highlighter word (BrutalistMark) and hand-drawn underline (BrutalistScribble), thick borders and hard offset shadows that press flat on hover, draggable stickers (spinning text badge, starburst, smiley) and a tilted ticker tape along the bottom.
- [Depth Stack Hero](https://www.assembli.design/components/depth-stack-hero.md): Split product hero with a 3D stack of live UI cards (revenue chart, deploy progress, payment toast) in real perspective. The stack tilts toward the cursor on springs and its layers separate in Z when hovered; bars grow and the deploy bar loops.
- [Dot Field Hero](https://www.assembli.design/components/dot-field-hero.md): Interactive canvas hero: a grid of dots springs away from the cursor, grows and glows in the accent color. Ripple waves roll out from random points or wherever you click. Colors follow the theme, and animation pauses offscreen and switches off for reduced motion.
- [Keycap Hero](https://www.assembli.design/components/keycap-hero.md): Keyboard-first hero: two rows of 3D keycaps tilted in perspective play shortcut combos in turn, glowing in the accent color as each key goes down, with a caption naming each shortcut. Pressing keys on your own keyboard lights up the matching keycaps.
- [Kinetic Type Hero](https://www.assembli.design/components/kinetic-hero.md): Oversized typographic hero: lead words rise from clipping masks, then a serif italic word cycles letter by letter through 3D blur, the line reflows smoothly, a stroke redraws beneath it, and story-style progress pills let you jump between words. A violet dot spotlight trails the cursor.
- [Orbit Hero](https://www.assembli.design/components/orbit-hero.md): Integrations hero: icon tiles circle a central mark on three counter-rotating dashed rings and stay upright as they travel. A conic radar sweep passes over the rings, ripples pulse from the hub, and hovering pauses the orbit and shows labels. Rings and logo are configurable.
- [Parallax Floating](https://www.assembli.design/components/parallax-floating.md): Hero where floating cards sit at different depths and drift against the pointer with spring easing, while a slow idle bob keeps the scene alive. Depth drives size, blur and speed.
- [Perspective Product Hero](https://www.assembli.design/components/perspective-product-hero.md): Left-aligned product hero above a full app window (an issue tracker mockup by default, or your own via children) tilted back in 3D. The window flattens and lifts as the hero scrolls away, with a rim of light on its top edge and a fade to the background at the bottom.
- [Prism Hero](https://www.assembli.design/components/prism-hero.md): Infrastructure hero: a beam of light draws in from the left, strikes a glass prism and fans out into an eight-color spectrum that fades across the page and gently shimmers, over a fading grid. Built entirely in SVG; works in light and dark.
- [Prompt Hero](https://www.assembli.design/components/prompt-hero.md): AI-builder hero in the style of today's app generators: a large prompt box types example prompts letter by letter, deletes them and moves on, over a warm sunrise glow on the bottom edge with film grain. Suggestion chips fill the prompt in one click, Enter submits, and an onSubmit callback receives the text.
- [Release Shelf Hero](https://www.assembli.design/components/release-shelf-hero.md): Release archive hero styled like a record shelf. Square cover art drops onto two lit shelves. Hovering or focusing a cover lifts it out of its slight tilt and reveals Open and Details links, and a year/season timeline underneath highlights the matching cover. The current release wears a holographic "Now playing" sticker.
- [Skew Gradient Hero](https://www.assembli.design/components/skew-gradient-hero.md): Payments-style hero: five blurred color blobs drift inside a band skewed downhill across the top, behind a bold deep-navy headline. A floating checkout card and an animated revenue chip sit on the right (replaceable via children). Mesh colors are configurable.
- [Tilted Wall Hero](https://www.assembli.design/components/tilted-wall-hero.md): Centered hero over an isometric wall of UI tiles (charts, toggles, avatars, stats, gradient swatches) tilted in 3D. Alternate columns scroll endlessly in opposite directions, and a radial vignette keeps the headline readable. The wall settles in from a slight zoom on load.
- [Editorial Hero](https://www.assembli.design/components/editorial-hero.md): Magazine-cover hero: masthead rules, an oversized serif headline that rises line by line out of clipping masks, a drop-cap deck, credits row and a rotating circular 'read the story' stamp.
- [Globe Hero](https://www.assembli.design/components/globe-hero.md): Split hero with a rotating dotted globe: a Fibonacci-lattice sphere drawn on canvas with depth shading, and great-circle routes between cities that draw in, hold and retract with pulsing endpoints.
- [Terminal Hero](https://www.assembli.design/components/terminal-hero.md): Developer-tool hero pairing a headline and copyable install command with a dark terminal that types commands at human speed and streams colored output once scrolled into view.
- [Gradient Hero](https://www.assembli.design/components/gradient-hero.md): Centered landing hero with a fading grid, soft conic gradient glow, eyebrow pill and primary/secondary actions.
- [Scroll Tilt Showcase](https://www.assembli.design/components/scroll-tilt-showcase.md): Hero showcase whose device frame starts tipped back in 3D and settles flat as you scroll, inside a sticky stage, while the heading drifts away and a glare fades out. Static for reduced motion.

Back to [all components](https://www.assembli.design/components.md).