Hero components and templates
Explore 82 ThreeUI components, templates, backgrounds, and interactive effects tagged Hero, with previews and editable implementation source.
- Complete Shelf
The complete Working Volumes bookshelf page with all seven tools, its responsive editorial interface, and authored Three.js presentation.
- Bestsellers Book Showcase
The complete Field Manuals book showcase, preserved unchanged with its editorial layout, authored motion, interactions, and embedded media.
- Orrery
The complete Orrery studio hero, preserved unchanged with its procedural stone plinth, luminous orbital rings, drifting debris, editorial cards, and compact dock navigation.
- Cortexa
The complete Cortexa intelligence-platform hero, preserved unchanged with its procedural point-cloud bust, silhouette bloom, data haze, and pointer-following torch interaction.
- Cathode — Workstation
The complete Cathode hero UI around the owner's workstation revision: the isometric CRT cabinet, source-code screen, backlit keyboard, desk mouse, navigation, launch copy, and primary CTA.
- Cathode — Console
The complete Cathode hero UI around the living-room console variant: a side-scroller display, vented console slab, illuminated gamepad, navigation, launch copy, and primary CTA.
- Cathode — Studio
The complete Cathode hero UI around the recording-studio variant: boom microphone, pop screen, desk mixer, programme monitor, ON AIR sign, navigation, launch copy, and primary CTA.
- Cathode — Cinema
The complete Cathode hero UI around the cinema variant: tripod camera rig, matte box, monitor, panel light, slate, navigation, launch copy, and primary CTA.
- Cadence
The complete Cadence finance landing page with a responsive hero grid, an orderly bundled radial hero field, content-fit gradient pill navigation, compact dark glass CTAs, three WebGL scenes, cohesive GPT Image 2 editorial media, scroll reveals, and portfolio sequence.
- Vella Bank
A full-screen banking hero led by four procedural cards, live customer balances, restrained metallic colour, and a sharp editorial product pitch built for finance and card launches.
- Attune
The complete attune hero page, preserved unchanged with its procedural Three.js Mars, orbital telemetry, dust haze, and full-bleed product layout.
- Betawise
The complete Betawise particle-bust hero page, preserved unchanged with its Three.js point-cloud bust and pointer response. Betawise is the later full page built from the same brand.
- Tidecrest
The complete Tidecrest hero page, preserved unchanged with its Three.js terrain and the authored EffectComposer and UnrealBloom post-processing chain.
- Sylva — Living Green
The moss-root world with pale flowers, ferns, drifting pollen, the landing butterfly, and native liquid-metal controls behind the full hero layout.
- Sylva — Sakura Sunset
The same page and layout carrying the Sakura Sunset scene instead: mossy cherry boughs in open blossom over a golden cushion at dusk.
- Sylva — Maple Autumn
The same page over the Maple Autumn scene: palmate leaves crimson to gold on mossy boughs, with the dock and button plates retoned to its slate dusk.
- Sylva — Sequoia Mist
The same page over the Sequoia Mist scene: redwood sprays on fibrous cinnamon bark, with the dock and button plates carried up into its pale grove fog.
- Meridian
The complete Meridian revenue-platform page, preserved unchanged with the whole Three.js r155 module inlined into the document, so the page renders its Earth-from-orbit scene without making a single network request. The authored file is named ascend.html.
- Aster Halftone Bloom
A full-screen analytics hero built around a luminous procedural rose re-photographed as a cross-shaped halftone lattice, with petal erosion, falling dust, pointer-driven light, glass controls, and restrained editorial typography.
- Advanced Glass Material
A full-screen material showcase built around a faceted spectral glass form over an interactive water field, with two-bounce refraction, edge dispersion, studio reflections, pointer-driven orbit, direct glass impulses, and a restrained technical product interface.
- Anima
A full-screen perception platform hero with a procedural point-cloud bust and headphones, layered dust, haze, stars, bloom, an entrance that settles the figure into focus while the interface resolves out of a blur one element at a time, and a localized pointer field that parts the signal around the cursor.
- Skyfield
A full-screen carbon survey journey across procedural moss-covered terrain, with atmospheric cloud layers, scan telemetry, a day/night control, pointer parallax, and a scroll-scrubbed descent from observation to verified removal.
- ThreeUI Rings
A complete ThreeUI library hero wrapped around concentric typographic rings whose glyphs melt into dots, wire into a chaotic mesh, and carry pointer-triggered ripples through the field.
- Foldwork
A complete monochrome product-studio hero whose divided headline surrounds a sparkling procedural form inside a perspective grid, framed by precise navigation, availability, and contact details.
- Meridian Slow Matter
A monochrome applied-fluid hero where voxel wax drifts through a transparent vessel, framed by pixel typography, technical telemetry, selectable phases, and a tactile set-it-drifting control.
- Everbloom
An image-led fantasy codex hero with a blindfolded saint-knight, procedurally tooled book cases, falling blossom and smoke layers, pointer-lit candle reveal, and a four-chapter virtual descent.
- Aureon Markets
A polished blue-and-violet trading hero with a refractive liquid-metal market sculpture, draggable glass metrics, multilingual navigation, and fully local account-preview dialogs.
- Quadrix
A copper-edged HOSHI phone floating above a terminal grid, with a live tetromino simulation, five cycling display modes, bitmap typography, pointer orbit, and inertial drag rotation.
- Dark Souls Holo Card — The Ashen One
The original holographic card beside the candlelit sword shrine.
- Dark Souls Holo Card — Cindermane
A firelit monster card with layered holographic foil and pointer-reactive lighting.
- Koi Mecha
Nacre's complete sculptural koi hero, with porcelain, gold, and nocturnal finishes, editorial navigation, collection dialogs, and a tactile Three.js fish study.
- Cinder K1
A cinematic mechanical-keyboard hero with a pointer-guided lamp, responsive camera orbit, live keypress feedback, ember particles, firelit typography, and tactile pre-order controls.
- Velara Vortex
A full-screen brand-and-motion studio hero pairing precise editorial typography with a layered ring of 12 image cards that follows an authored vortex sequence and leans into pointer engagement.
- Tideform
A complete studio hero with a radial phase-field lattice, pointer-warmed crests, click-triggered ignition rings, character-level heading reactions, and restrained editorial navigation.
- Emberline
A complete GPU orchestration hero with glass navigation, restrained editorial copy, social proof, stat cards, and a pointer-reactive blue-white vortex line field.
- ASCII Field — Vortex
Rings of type stacked into a receding funnel instead of one flat plane, each ring riding up past the next as the pointer moves, with a near/far light ramp shading the depth and motes drifting in the gaps between layers.
- ASCII Field — Tide
The stack laid flat as open water: twenty bands of type bent along a sine and spread from a horizon to the foreground, each one running a beat behind the one in front so the swell travels out of the frame.
- ASCII Field — Ridge
The stack read as a range: seven ridged silhouettes with type packed under each crest and thinning into the shadow below, separated so the front range travels ten times as far as the back under an ember dusk.
- ASCII Field — Canopy
The stack grown into a tree, where one layer is one branch: every limb is a strip of type pivoting on its own foot, carrying a depth drawn at generation time, so the crown opens into a volume in a green-black wood.
- Orrery — Orrery
The authored page exactly as written: the eroded limestone plinth turning under a stone lantern, wound about by skeins of spun light and a slow spiral of tumbling debris.
- Orrery — Castle Ruin
The same bluff carrying a medieval keep, laid stone by stone against a crown profile that decides how high each wall still stands — quoined corners, arched windows, a gate arch in the curtain wall, a turret taken down on its outward side, and a fire still burning in the broken crown.
- Orrery — Labyrinth
A round table of rock carrying a polar maze carved by a depth-first walk — six rings of kerbstone with real dead ends, a hearth at the middle, and the one true route lit as a thread of light that walks itself from the mouth inward, seen from an eye lifted to read the plan.
- Orrery — Shrine
The same rock quarried into two terraces for a Japanese shrine: a vermilion torii and its laid-up straw rope on the low ground, a stair between them, a pair of lit stone lanterns, and a hall whose bark roof holds a level ridge, an eave that lifts to its four corners, and crossed chigi at the gable.
- Trochil Hummingbird — Hummingbird
The authored page's own scene: a 390,000-point hummingbird whose wings are skinned in the vertex shader into a real swept blur, hovering over a bed of trumpet blossoms, flying to a standoff from the cursor whenever the pointer moves.
- Trochil Hummingbird — Sakura
A butterfly on a cherry branch: forewings and hindwings filled by area off their own outline tables, veined and lit at the margin, settling onto a limb hung with five-petal blossoms while cut petals tumble through the frame — the ember ramp regraded plum to blossom.
- Trochil Hummingbird — Reef
A deep-bodied reef fish over a coral shelf, driven by a travelling body wave that yaws each section into its own turn, with staghorn heads, boulder coral and sea fans below and sun shafts fed into the density buffer so the light through the water carries the same dot lattice.
- Trochil Hummingbird — Abyss
Eight jellyfish rising through midnight water: one bell built once and stamped out through a per-vertex seed, each on its own contraction phase, its oral arms and tentacle veil inheriting the squeeze a stroke late — the nearest one leans its crown toward the cursor.
- Cortexa Silhouette — Silhouette
The authored page exactly as written: a measured skull and torso scanned along the view axis, so the rings crowd into a bright comb at the rim and the face stays dark.
- Cortexa Silhouette — Arcana
The same scan around a tarot card: a rounded-rectangle silhouette combed at its border, two printed rules, corner pips, a stroke-drawn numeral and name, and three inclined orbits with their riders running clean through the card's own plane.
- Cortexa Silhouette — Monitor
A cathode-ray cabinet scanned as one closed shell, so the crowding at the rim paints the bezel comb and the tube's taper in a single pass. A lit inner lip, a graticule and two traces on the glass with a raster band rolling down them, safe-area brackets in the picture corners, and a moulding seam and vented brow carrying the detail out of the chin and across the whole cabinet.
- Cortexa Silhouette — Keyboard
Seventy silhouettes instead of one: a 65 percent board laid back off the view axis, every sculpted keycap scanned by the same machinery at a twentieth the scale so each arrives wearing its own comb, over an underglow spilling from the front lip.
- Cathode Workstation — Workstation
The authored page with the owner's workstation revision: the isometric CRT cabinet wearing a 3x3 vent field, its recessed screen streaming indented source over a numbered gutter, the backlit keyboard, a mouse standing on the desk beside it, and the props behind.
- Cathode Workstation — Console
The same drawing around a living-room console: a flat panel running a side-scroller, a vented slab beside it, and a gamepad whose shell is a single blended capsule outline that rolls in at the base and domes at the crown, its buttons lit in bursts.
- Cathode Workstation — Studio
A recording booth: a counterweighted boom carrying a microphone and pop screen off the isometric grid, a desk mixer, a programme monitor standing clear of it on its own foot, and a text-free illuminated plate on the treatment panel.
- Cathode Workstation — Cinema
A camera rig: sticks turned off the grid so all three legs read, a matte box and lens on the body, a 16:9 monitor slung off the top plate on its arm, a panel light holding the key, and a slate set down clear of the legs.
- Betawise Particle Bust
Betawise's point-cloud bust isolated as a full-frame pointer-responsive background without the hero navigation, copy, actions, or CTAs.
- Tidecrest Terrain — Ridgeline
The authored field, served byte-for-byte: ridged ranges over an open swell, mirrored in the water under a cold blue horizon.
- Tidecrest Terrain — Harbour Nights
The same field as a night harbour: a low far bank carrying a lit skyline, a suspension span crossing the water in front of it, and the whole grade turned from cold blue to sodium.
- Tidecrest Terrain — Dune Reach
The ridged fractal sampled across one wind instead of every direction, so its crests comb into dunes over worked sand, under a sun that has just gone.
- Tidecrest Terrain — River Hollow
The ranges rounded off into forested hills with a meander carved through them; the wave lattice is masked to that channel, so the swell becomes a river running out of the frame.
- Nocturne Card — Midnight
The authored composition: the landscape debit card hovering inside its halo over a still midnight sea.
- Nocturne Card — Moon
A cratered gibbous moon half out of the sea, its other half given back by the water, with no halo drawn in front of it and the card stood upright and taken to cold platinum.
- Nocturne Card — Mars
Iron oxide all the way down: Mars half out of a rust sea with its dark albedo features, rift and polar cap, the halo left out, and the upright card struck in copper.
- Nocturne Card — Earth
Earth half out of the sea with its oceans, banded cloud deck, ice caps, city lights and sunlit terminator, the halo left out, and a phone whose screen carries a photograph of the same scene.
- Meridian Earth — Earth
The authored orbit: an 8K day plate read through a cubic B-spline, a cloud deck on its own shell, ice caps, city light, and one scattering integral shared by surface, deck and halo — drifting at a quarter of the rate it was authored at.
- Meridian Earth — Moon
The plates drop out and a jittered crater lattice takes their place — flat-floored basins, terraced rims and central peaks at four scales, ray systems off the youngest, and dark basalt maria carrying a third of the craters the highlands do.
- Meridian Earth — Mars
The same lattice split across the hemispheric dichotomy — old cratered south, resurfaced north — with the Tharsis shields, a four-thousand-kilometre canyon, wind streaks and spiralled polar frost, under a dust column whose scattering vector is the inverse of Earth's.
- Meridian Earth — Saturn
No ground and no halo: a zonal wind profile that drags each belt against the next and curls its edges into festoons and eddies, five octaves of cloud-top filament faded against their own screen footprint, the north polar hexagon, and a ring system of noise-built ringlets and orbital clumps cut by the Cassini, Encke and Keeler gaps — carrying the planet's shadow, laying its own back onto the disc, and holding the B-ring spokes.
- Tideform Phase Field — Phase Field
The authored field with nothing taken from it: a flat lattice of dots with a crest travelling out from the centre, warming to amber as it passes. Only the page's editorial layer is gone, so the background is the field and nothing else.
- Tideform Phase Field — Stone Ridge
The same field on a ground plane instead of a table: ridged fractal ranges in brown stone standing off behind a scree floor, with the authored crest sweeping over them and its embers turned to a low sun on rock.
- Tideform Phase Field — Pine Canopy
The same ground plane as forested hills, under a closed conifer canopy laid out in lattice space so a crown is always a few dots wide, with the accent turned from orange to the green-gold the light comes through as.
- Tideform Phase Field — Open Swell
No terrain at all: four crossed wave trains rolling back to the horizon, glitter carried in lattice space, and the authored crest expanding across the water with its accent turned to the blue the sea throws back.
- Emberline Vortex — Vortex
The authored field exactly as written: a twisted catenoid of hairline filaments flaring into a crown and splaying into roots, over a drifting blue star field.
- Emberline Vortex — Bloom
The same field closed into a flower: the curve index cut into petals and arcs, every blade fluted across its width, and a moon that lights the petals it reaches under a cool sheen while the rest fall to deep magenta.
- Emberline Vortex — Ridge
The field folded into a sunset range: one continuous surface of contours receding into a low sun, peaks and valleys sliding past each other, with a hot rim on every crest the sun can reach.
- Emberline Vortex — Tide
The field laid flat as open water: long swells running toward the viewer under a night sky, with the moon laying a glade of glints straight down the frame.
- Volta Atelier
The isolated Volta Atelier opening section: an oversized typographic frame around an eleven-card, pointer-reactive studio collage with ambient dust and producer details.
- Isometric Motion Grid — Figure Grid
The original six-figure specimen sheet: three columns of hairline product scenes, each with its own timeline and its own pointer camera.
- Isometric Motion Grid — Hero
A split hero where the headline sits opposite a field console: a console and a signal mast set apart on one deck, with the panel and the pass chip parked in their own corners of the frame.
- Isometric Motion Grid — Testimonials
Three quote columns under one rule, each carrying its own figure: a quote plate rising in place, a score settling on a dial, and three records lifting lane by lane.
- Isometric Motion Grid — Contact
A hairline contact form beside a dispatch dock, where the dock and keypad sit apart on one deck and the outgoing message and its acknowledgement park in opposite corners.
- Isometric Motion Grid — Footer
A bottom-anchored footer whose link columns sit above a full-width module rail — seven evenly gapped bays on one bar, scanned end to end on a six-second sweep.