React hero section components
Full-width openers for a landing page — headline, supporting copy and a primary action, often paired with generative or animated backdrops. Reach for one when a page needs a first screen that states what it is before anything else loads.
75 components
Arc Ladder Climb
A full-bleed section-divider background modelled on a Jacob's ladder: two rails diverge from a narrow base gap, a bright plasma arc strikes there, climbs the widening gap as it burns, dies near the top, and a fresh arc restrikes at the base almost immediately. This runs continuously, at a re-randomized ~1.6-2.2s cadence.
Aspheric Turn Spiral
A full-bleed hero of a lens blank mid single-point diamond turning, a spiral groove cutting from center to rim with pitch that tightens toward the edge the way a real aspheric surface curves.
Brinicle Descent
A full-bleed underwater backdrop modelled on brinicles: dense, sub-zero brine sinking off newly formed sea ice freezes a hollow ice sheath around itself as it descends, flashes an expanding freeze halo where it touches bottom, then breaks free and drifts off while a fresh tip nucleates elsewhere. Several overlapping lifecycles running at once so the pane is never empty.
EDM Crater Field
A full-bleed metal plate eroded by electrical discharge machining: sparks continuously pit the surface with small raised-rim craters that fade back to base as later discharges erode the recast layer, holding the plate at a steady simmer of pockmarks rather than ever saturating.
Foam Drain Coarsen
A full-bleed weighted-Voronoi (Laguerre) foam mesh that coarsens under von Neumann's law (cells with more than six sides grow, fewer shrink and vanish) while its Plateau-border stroke width drains from hairline at the top to thick at the base, slowly re-wetting from below on a repeating 40s cycle.
Interlace Field Comb
A full-bleed background reproducing analog interlaced video's defining artifact: two temporally-offset fields drawn a beat apart, disagreeing on a moving diagonal edge and serrating it into a comb, then periodically re-weaving into one clean frame.
Kymograph Smoke Trace
A full-bleed hero built on a subtractive recording mechanic: a soot-coated drum turns beneath a fixed stylus that scratches a bright, permanent trace through the dark coating, while a resmoking brush at the trailing edge repaints the outgoing soot fresh so the drum recirculates forever.
Mailbag Hook Exchange
A full-bleed ambient background reproducing the Railway Post Office catcher-crane mail exchange: a trackside crane holds an outgoing mailbag on a hook, swaying between passes, while a train sweeps through on a fixed cadence, its catcher arm snagging the bag and kicking a replacement onto the trackside net without ever stopping.
Orb Web Construction
A full-bleed hero background where a web builds in the real orb-weaver sequence: bridge, frame, radii laid hub-outward, a dashed scaffold spiral hub-outward, then a solid capture spiral laid outside-back-to-hub that visibly replaces the scaffold turn by turn. It then rests, tears a random sector, and rebuilds only that sector before resting again.
Pancake Lap
A full-bleed ambient background modeling real pancake sea-ice formation: circular ice pans nucleate, grow, and drift on open water, and roughly every two seconds one pan's edge visibly rides up over a neighbour's raised rim, crosses, and welds into a permanently thicker doubled floe.
Photostat Reverse
A full-bleed hero headline reproduced like a photostat camera: each exposure flips the field between a negative and a positive generation, a little softer and thicker than the one before, until a fresh crisp exposure resets the drift.
Plasma Filament Wander
A full-bleed hero background modelled on a plasma globe: filaments reach from a center point to a faint outer ring, each retracting and regrowing toward a new point on its own staggered 1.2-2.6s cadence, with pointer proximity biasing where a filament next reroutes, never when.
Ripple Migrate Slip
A full-bleed dune-ripple field built on real aeolian bedform migration: each ripple's gentle windward face keeps piling higher until it crosses the angle of repose, its steep lee face avalanches, and the crest kicks one step downwind. Many ripples do this on independent, staggered clocks, so the whole train visibly creeps at rest with no two slips in sync.
Roast First Crack
A full-bleed ambient background modeling first crack in a rotating coffee-roaster drum: beans tumble continuously (carried up the wall by rotation, then cascading back down once they pass their repose angle), and individual beans intermittently crack open at an irregular, clustered cadence, each releasing a fleck of chaff that curls off the fissure edge and drifts free while the bean settles back into the tumble.
Rotor Window Bank
Full-bleed hero backdrop modeled on a rotor cipher machine's stepping mechanism: three letter-wheel windows where the right wheel ticks steadily, kicks the middle wheel once per revolution, and the middle wheel occasionally double-steps, moving twice in one beat and dragging the left wheel with it, the real Enigma-family stepping anomaly compressed to a 9-position ring so it recurs roughly every minute instead of every eleven.
Stack Step Carousel
A full-bleed background modelling vacuum thin-film deposition on a planetary carrier: 8 mirror/lens blanks each orbit a fixed 30-degree source arc every 3.5s, each pass stepping that blank's reflectance up a notch along a real quarter-wave-stack recursion, staggered swaps keeping the batch permanently mid-cycle while a slower 14s armature ring turns underneath.
Tricone Bit Teeth
A full-bleed rock face worked by a rotary tricone bit: three cone cutters orbit the bit centre in a fixed 120-degree pattern, each tooth row stamping a crater cluster into the face that heals back to flat before the next pass, so the surface reads as a ring being continuously worked rather than a diffuse pockmarked plate.
Winnow Chaff Drift
A full-bleed hero built on a real grain-cleaning mechanic: winnowing. A mixed charge of grain and chaff falls through a steady crosswind: heavy grain's momentum wins over drag and it drops in a tight, near-vertical column, while light chaff loses to the wind and fans out laterally before it lands. The separation reads entirely from trajectory and softness, never colour.
Bed Fluidize
A full-bleed ambient background modeling a gas-fluidized particle bed: voids nucleate at the distributor plate, grow with height (the Darton bubble-growth relation), coalesce when they touch, and burst at the surface with a ballistic spray of ejected particles, while the surrounding bed circulates downward in each bubble's wake. A standing boil with no saturated end state.
Film Gate Weave
A full-bleed ambient background modeling projector gate weave and bounce: a rigid, never-displaced aperture mask against an academy-leader test-pattern frame that drifts on two non-resonant sinusoids and snaps on a real critically-damped-ish spring every claw-pull interval, never sitting flush with the fixed edge.
Hero Beam Glyph
A full-bleed hero wordmark drawn as a genuine stroke-based vector font, the way an XY vector CRT (Asteroids/Tempest/Vectrex-class arcade hardware, oscilloscope character generators) actually traced text: brightness at every point comes from simulated inverse beam speed, so corners and stroke endpoints glow while long straight runs stay dim, retraced 36 times a second with a short phosphor trail and a low-frequency deflection-coil jitter that never lets two frames land pixel-identical.
Rolling Shutter Skew
A full-bleed ambient background modeling CMOS rolling shutter: a vertical rule grid bends into a shifting parallelogram because each virtual sensor row captures the simulated pan at a slightly later instant than the row above it, the readout period accumulating into more displacement toward the bottom of the frame.
Background Capillary Wick
A full-bleed ambient background modeling paper chromatography: ink fronts wick along a fixed fibre-vein lattice, decelerating per the Washburn capillary-rise law as they climb, stalling at every junction, and re-igniting a subset of the node's dry outgoing edges before evaporating back to dry to make room for the next front.
Hero 404 Quadrant Occlusion
A full-bleed 404 hero where the numerals and an orbiting occluding disc are rendered from one shared silhouette at half-cell precision using Unicode quadrant/half-block glyphs (▘▝▖▗▚▞▛▜▙▟█▀▄▌▐), so the disc's curved edge stays crisp instead of stair-stepping at one glyph per cell.
Hero Faraday Wave Cell
Full-bleed hero background reproducing Faraday's 1831 discovery: a fluid layer vibrated vertically above a critical amplitude breaks into standing surface waves oscillating at half the driving frequency, tessellating into stripe, square and hexagonal cells that keep reorganizing rather than settling.
Hero Glyph Silhouette Pack
A full-bleed hero where a cloud of monospace glyph particles is packed to fill an arbitrary vector silhouette, breathing and repelling from the pointer at rest, and re-solving on its own into a fresh silhouette on a timer as particles migrate to their new slots.
Hero Slice Comb
A full-bleed hero background: a tri-axial superellipsoid sliced by camera-fixed depth planes and spun continuously beneath them, where uniform-spacing slices pile into a bright rim wherever the surface turns tangent to the camera and spread into a dark, sparse interior wherever it faces the camera head-on.
Hero Text Ring Funnel
A full-bleed hero where readable running text is the geometry itself: seven concentric rings of real words, laid out once by rotating and translating the 2D context per character rather than quantizing to a fixed grid, tapering in true single-point perspective and spinning at differential speeds so the growing phase lag between rings reads as depth.
Auxin Canal
Full-bleed hero whose vein network grows by space colonisation through whatever negative space the copy leaves empty: sources scattered around measured content boxes, tips advancing toward and consuming them, widths thickened by Murray's law, then a slow drain to background and a fresh scatter begins.
Cambium Lay
A tree cross-section accreting live in SVG: a cambium ring lays wood outward year by year, each year closing with a thin dense latewood band, the section slightly lobed and drifting off-centre like a leaning trunk, and a scar event pinching a few rings before growth heals around it.
Floret Pack
A full-bleed phyllotactic hero background where primordia are birthed one at a time at a central meristem, golden-angle sequenced and locally relaxed as they advect outward, so the 34/55 parastichy spirals emerge from genuine growth rather than a closed-form layout.
Polyp Bud
A coral colony that accretes inward from one edge, budding new polyps only where five shadow rays against the colony's own skeleton clear a 0.55 exposure threshold, thickening every ancestor segment 0.4 units per bud, leaning as its light direction drifts, and occasionally bleaching a branch pale before it recovers or dies bare.
Tendril Cast
Two or three climbing-tendril shoots circumnutate out from the pane's bottom edge in live SVG, searching a widening helix until a growing tip actually touches a measured support rect, then switch to a tightening spiral coil with a chirality-flipping perversion kink before stiffening and budding again elsewhere.
Forage Vein
A hero background where a Physarum-style plasmodium forages the page's own content boxes: trail-following agents flood out from the headline, CTA and logo row, fat veins form where deposition keeps outpacing decay, and starved or moved food sources visibly retract and regrow with no scripted path underneath.
Murmur Shear
A dusk hero of ~1500 starlings running true boid separation/alignment/cohesion over their 7 nearest topological neighbours; on a slow clock an invisible falcon makes one pass, and the escape turn it triggers propagates bird-to-bird faster than the flock drifts, shearing a dark density band across the murmuration.
Thallus Siege
A full-bleed pane of crustose lichen: a dozen colonies grow lobed radial fronts across a shared occupancy lattice, stall on contact, occasionally creep over a markedly slower rival, and senesce from the centre outward to reopen ground the mosaic keeps renegotiating on a scale of minutes, not frames.
Sand Lock
A full-bleed Chladni plate: forty thousand grains of sand storm across a vibrating steel field and collapse onto the nodal lines of a real plate mode every time the sweeping drive frequency lands on a resonance, then break apart into a different figure as it leaves.
Rime Creep
A full-bleed pane of window frost growing in real time: dendritic ice ferns advance from nucleation points on a fixed 60-degree lattice, sprout side branches, thicken behind their own tips and stop dead where two grains collide, leaving the clear glass between them slowly closing over before the whole pane thaws and seeds again.
Weir Crest
A full-bleed pricing surface built as a spillway: three plans stand in one rising reservoir as dams of different crest heights, and the volume slider raises a single shared water level until a plan's crest is overtopped and pours, which is exactly the moment its overage starts costing money.
Ping Shadow
A full-bleed acoustic image of a seabed drawn by a sector beam that sweeps the frame: grazing-lit sand ripples, boulders with shadows stretching radially away from the transducer, range-growing speckle, and a persistence gradient trailing the wedge.
Granule Churn
A full-bleed stellar photosphere: bright convection cells packed edge to edge, born, swelling against their neighbours, splitting and dying, with the cooled material draining back down the dark intergranular lanes between them and bright flecks flaring in the strongest downdrafts.
Edge Yield
A full-bleed scanning electron micrograph: a packed micro-landscape of spore grains, rod crystals and draped filaments imaged by a detector simulation rather than a lighting model, so steep facets bloom into glowing rims, crevices fall into hard shadow, and the whole frame is crisp at once under a live scan with shot noise and a descending sweep line.
Shear Billow
A full-bleed Kelvin-Helmholtz shear layer: two stratified layers slide past each other, the interface between them ripples, steepens, curls into a train of spiral billows and shreds into turbulence downstream, regenerating continuously with no input at all.
Flyback Tear
A full-bleed dead-broadcast CRT: a live monoscope test signal scanned onto a phosphor face by a timebase that keeps losing its grip, with rolling vertical hold, tear bands, snow and real phosphor persistence.
Dye Whorl
A full-bleed tank of ink diffusing in water: a real GPU fluid solver whose coarse velocity field transports a fine dye field, so plumes billow with dense cores, sheets thin as they stretch, tendrils shear off the shoulders and everything dissipates into haze. Drifting injectors, falling drops and interface buoyancy keep it blooming with nobody touching it; the pointer stirs the fluid and presses drop a fresh bead.
Weld Pool
A full-bleed liquid-metal hero whose headline is summed into the shader's height field rather than layered over it, so the letterforms are lit, warped and dented by the same molten surface they sit in.
Lenticule Swing
A hero H1 lockup printed twice behind vertical lenticular slats (the problem statement and the product promise coexisting at once) that shimmers between both at rest and snaps cleanly to the promise as it scrolls out of view.
Rosensweig Crest
A flat pool of ASCII glyphs that erupts into a hexagonal lattice of sharp spikes wherever the pointer's field crosses a critical threshold, tracking the cursor with a stiff-up, overdamped-down viscous lag. The Rosensweig instability rendered as a deformable surface, not particles.
Hero ASCII Lichtenberg
A full-bleed ASCII hero of dielectric breakdown: a Lichtenberg figure grows site by site up the Laplace potential field, always branching to where the local field is strongest, holds its finished form, then fades as the next strike begins from a new seed.
Hero ASCII Reaction Front
A full-bleed ASCII hero driven by a live Gray-Scott reaction-diffusion sim, inking only the migrating chemical fronts (the gradient ridge of the V species), so self-organising worm-like fronts crawl as thin bright lines across an otherwise empty field, with the pointer injecting fresh reagent that nucleates new fronts.
Hero ASCII Schlieren
A full-bleed ASCII hero built as a real schlieren rig: a rising thermal plume's refractive-index gradient is cut by a hard knife edge, so only the steep density boundaries survive as thin bright and dark bands while the uniform bulk air stays completely blank.
Hero ASCII Shock Diamonds
A full-bleed ASCII hero of a supersonic jet plume: a repeating train of oblique shocks reflecting off the jet boundary draws the classic X-crossed Mach diamonds as thin bright lines in an otherwise empty exhaust, with the pointer acting as the throttle that stretches and compresses the shock-cell spacing.
Hero Burin Hatch
A copperplate engraving that relights itself: a sphere rendered only as meridian hatch lines whose stroke WIDTH swells with shadow and vanishes to blank paper in the light, with a second cross-hatch pass appearing solely in the dark, and the pointer moving the light source.
Hero Penrose Inflate
A hero backdrop of a true Penrose P3 rhomb quasicrystal built by Robinson-triangle substitution, drifting through a seamless golden-ratio infinite zoom, with the pointer acting as an inflation lens that resolves the tiling one substitution level finer under the cursor.
Hero String Envelope
A hero whose backdrop is pure string art: a few hundred straight chords across a circle under the map i → k*i, whose envelope is an epicycloid caustic that the chords draw without any curve ever being plotted; the pointer's horizontal position continuously morphs k, so cusps split and merge under the cursor.
Hero ASCII Eclipse
A full-bleed ASCII hero built around an occlusion event: a dark glyph disc transits a bright sun disc over a fixed starfield, the pointer dragging the transit, and a corona blooms at the rim only as the two centers nearly align, the way a real solar corona is only visible near totality.
Hero ASCII Rainfall
A full-bleed ASCII precipitation hero: every column runs its own independent falling drop with a fixed rows/sec speed and trail length, and the pointer bends nearby streams sideways like wind gusting through rain instead of painting or warping cells directly.
Hero Recursive Type
A recursive-type hero: a giant wordmark rasterized through a block font, with every lit letterform cell subdivided and filled with real readable filler text, so the word is legible from across the room and made of smaller words up close. The pointer acts as a lens, scaling and brightening the interior text where it hovers.
Hero Oscilloscope
A full-width oscilloscope hero: a summed three-harmonic waveform drawn as one continuous box-drawing trace inside a box-drawing frame with a live amplitude/frequency readout, where the pointer injects energy into a real damped wave simulation that rings outward from the touched column and settles back over about a second.
Hero ASCII Terrain
A full-bleed ASCII landscape hero: five ridgelines of deterministic value noise recede toward a horizon, each layer stepping up in frequency, height and ink density the nearer it sits, with the pointer driving parallax so the terrain slides past like a window on a moving vehicle.
Hero ASCII Tunnel
A full-bleed ASCII perspective-corridor hero: sixteen squircle rings advance toward the viewer on a continuous loop, shaded through a density ramp so depth reads from character weight alone, with the pointer steering the shared vanishing point and the whole corridor tilting to follow it.
Hero ASCII Wordmark
Hero wordmark rendered as ASCII block-letters, lit by the pointer like a torch over a density ramp.
Background Gradient Shader
Full-bleed animated gradient background: a WebGL shader drifts three theme-derived colors through a domain-warped noise flow field into a simple 3-stop ramp, reading as a calm moving current of color rather than a shader demo.
Reveal Cloth Unfurl
Media reveal that unrolls an image like a bolt of cloth: ~24 vertical strips fan open left-to-right off a rotateY hinge, curled strips converge into a shaded cylinder at the roll's leading edge, and one staggered settle ripple (plus a sheen sweep) crosses the surface once fully unrolled.
Hero Cloth Type
Cloth-like kinetic type: a headline rasterized once to an offscreen canvas is re-drawn every frame through a warped mesh of spring-loaded nodes, so the cursor drags the type like fabric and release springs it back with damping.
Hero Vortex Street
Cursor fluid: moving the pointer through a full-bleed dark field sheds a von Karman vortex street of alternating-sign vortices that drift downstream and decay, revealed by ~600 velocity-aligned tracer streaks; clicking drops a counter-rotating vortex pair that stirs the field for exactly 3 seconds.
Hero Letterpress Lockup
A letterpress hero whose identity is a terminal lock-up event. Headline glyphs slide in as metal sorts on individually sprung composing rails, then the quoin tightens in one mechanical clunk: letter-spacing compresses, a hairline chase snaps to fit, and an impression flash prints the subhead beneath.
Hero Chart Recorder
A chart-recorder hero: ruled paper feeds left at fixed px/s while a mechanical pen chases the live value through a deliberately underdamped spring, so a spike overshoots, quivers, and settles. That tremor is stamped permanently into the trace.
Hero Isobar Contours
Hero background of drifting, breathing isobar-like contour lines whose density bunches tightly around the primary CTA and whose whole field leans toward the pointer, so the layout physically reads as a live pressure system centered on the one action that matters.
Hero Dipole Field
Full-bleed hero where the headline exists twice: crisp DOM type above, and beneath it a canvas field of iron-filing strokes solved from a two-pole dipole field, so the type visibly iron-files into existence as the cursor approaches and CTA hover bends the whole field toward the button.
Scroll Story Strata
Pinned scroll story: the viewport becomes a geological core cross-section and scroll drives a drill bit descending through procedurally banded strata, with content panels crossfading per band and a mono HUD ticking depth.
Hero Long Exposure
Hero card whose canvas behaves like a long-exposure photograph: cursor movement burns light streaks that never clear per frame, only decay on a 4s half-life, accumulating a light painting of the session.
Scroll Defrost
Scroll-scrubbed defroster: a pinned full-bleed image behind rippled shower glass anneals from heavy frost with chromatic fringing to optical clarity, sealed by a specular sweep.
Hero Gravity Well
Headline as a monochrome particle cloud: the cursor is a gravity well that eats letters into an orbital accretion ring, then releases them to spring back into typeset.
Hero Particles WEBGL
Full-viewport hero with a cursor-reactive WebGL particle field and staggered text reveal.