Variants components and templates

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.

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.

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.

The complete Cathode hero UI around the cinema variant: tripod camera rig, matte box, monitor, panel light, slate, navigation, launch copy, and primary CTA.

The original holographic card beside the candlelit sword shrine.

A firelit monster card with layered holographic foil and pointer-reactive lighting.

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.

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.

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.

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.

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.

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.

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.

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.

The original horizontal wash crossed by a vertical shaft with a sliding glow.

The beam bent into a circle, with an arc of light running the circumference.

A thin border hugging the viewport edge, lit by a highlight travelling the perimeter.

Two 45° shafts crossing at the centre, their glows taking turns down each arm.

The violet predictive pixel arch with a luminous animated core.

An emerald pixel horizon with an organic breathing band.

A dark signal-particle field with soft connective pulses.

A block-by-block override grid with telemetry-orange accents.

A cyan, indigo, and purple WebGL ribbon field resolved through an animated dot matrix.

A transparent raw-WebGL void field detached from its original article composition.

A red-orange raw-WebGL flow field resolved through its authored six-pixel halftone matrix.

An animated amber-to-white Three.js point field on a dark plane.

The authored 19-row Zion boot log typing itself onto green phosphor, now resolved at the full backing resolution so the glyph cores stay crisp behind the grille.

A monotone academy leader: letterboxed frame, sweeping countdown dial, scrolling film perforations, registration marks, and a running 24 fps timecode graded to pure luminance.

A retro signal-fault panel on saturated broadcast blue, torn by shader-side transport noise: per-row jitter, a rolling dropout band, head-switching scramble, and heavy static.

An 8-bit console title screen drawn on a 320×180 grid with a hand-authored 5×7 pixel font and nearest-neighbour upscale, so every sprite, brick, and letter lands on a hard pixel edge.

The original layered FBM energy sphere with translucent rim glow and depth-aware star field.

Monotone glyph chains wander a dimensional sphere, collide with pinned stars, and respond to drag and pointer contact.

A dotted continent mesh on a luminous dusk horizon with crossing gradient routes, sparks, hover highlights, and click-launched arcs.

A refracted OpenAI mark beneath pointer-driven circular ripples, cyan depth, and soft suspended particles.

Violet fBm arcs crawl around the Anthropic contour while pointer proximity pulls the storm closer.

Noise-driven flame ribbons and rising embers lick upward from the Claude mark edge.

Transparent droplets grow, merge, fall, and resolve into soft water splash rings.

A painterly branching tree grows from warm sienna to golden tips, sways with pointer wind, and sheds soft ambient motes.

A typographic world sphere with drag rotation, wheel zoom, pointer lighting, and click-to-pin markers.

Letters trace a multi-loop outline with hover acceleration, illumination, and click-burst particles.

A paired glyph field morphs between radial silhouettes with breathing motion, scatter, and pointer repulsion.

A Verlet sheet of letters responds to pointer wind and direct grabbing while its live weave deforms every glyph.

Clicks send overlapping weighted wavefronts through a seeded 24 × 24 typographic grid.

A depth-sorted glyph sphere accelerates on hover and sheds click-hit letters before regrowing its surface.

Two drifting Canvas 2D star fields with an authored holographic pill button.

A raw-WebGL ambient field with a tactile ignition control.

A kinetic ambient field paired with a raw-WebGL induction button.

A deep-blue laboratory field with a luminous plasma control.

A fluid ambient background with a tactile raw-WebGL button.

A luminous Canvas 2D trace orbiting a softly raised blue button.

A pill-shaped shader button with raking GLSL light bands, sparse motes, a soft edge, and hover intensification.

Refractive glass capsule with flowing color, light response, and a tactile press state.

Iridescent intelligence glow with a listening state and animated voice bars.

Three.js foil material that tilts with the pointer and changes on click.

A Three.js particle swarm gathers around an interactive button and resolves on click.

Reactive Three.js orb and a press-and-hold voice control.

WebGL2 water simulation that ripples under pointer movement and presses.

Pixelated shader fill that advances while the button is held.

Warm liquid blobs shift under hover and heat up on click.

Three.js brushed gold material with responsive light and a press state.

WebGL2 fluid ink swirls inside a glass capsule as the pointer stirs it.

A lilac glass split button with a working creation menu.

A violet enamel button with a star field and animated generation state.

A polished chrome upload button with shader driven metal reflections.

A dark control with a moving lime dot matrix arrow.

A frosted download button with iridescent shader color and glass lettering.

A paired ceramic and violet primary action study.

A softly extruded service button with a recessed arrow control.

An inflated fabric button with a responsive Three.js cloth surface.

A molded day and night rocker switch with spring motion.

A forest glass capsule with optical filaments and a spring switch.

Sculpted automotive keycaps with functional airflow and heat states.

A deep charcoal glass rectangle with a softly revolving inner highlight and restrained metallic type.

A warm amber launch control with tactile depth, a soft aura, and a compact lightning icon.

A bright creation CTA framed by four corner dots and sequentially drawn dashed border segments.

A saturated blue CTA with a glass highlight and a continuous stream of floating light points.

A dark rectangle CTA whose label slides, blurs, and resolves into a crisp duplicate on hover.

A dark builder CTA with a rotating orange edge beam, drifting dot texture, and responsive glow.

A restrained metallic lesson control with a masked gradient edge, soft elevation, and arrow icon.

A glossy generate control with prismatic borders, animated lettering, and an illuminated sparkle icon.

A glass CTA with a revolving highlight, advisor portrait, and a glowing generative-action icon.

A compact graphite CTA that replaces its static edge with a rotating white border beam on hover.

A sunlit amber CTA with inset highlights, deep elevation, and a rising hover sheen.

The authored six-stop violet gradient pill with its inner highlight, cast glow, and trailing open ring.

The authored sibling pill with the same geometry, a blurred glass fill, and a hairline outline.

The selected Trochil request-access treatment: a restrained black technical rectangle with a fine lit edge and passing warm signal sheen.

The selected Attune primary action with a compact orange thermal gradient, inset highlight, grounded glow, and chevron.

The selected Tideform action: a square technical outline with tracked mono type, warm hover state, and a long directional arrow.

The selected Understory action with a violet capsule surface and an inset paper-toned circular arrow endcap.

The selected Meridian primary action rebuilt as a blue illuminated keycap with a physical base, LED, and pressed hover travel.

The selected Meridian secondary action using the same tactile keycap geometry in its graphite night-side treatment.

The selected Halvorsen action: the shared editorial arrow-pill structure recut as a bone-white capsule with a black inset arrow disc.

The compact Aster navigation action with a translucent smoke surface, masked crystalline edge, top sheen, and restrained hover lift.

The Aster primary CTA using the same glass material with a bordered inset chip and a directional arrow that advances on hover.

A tactile pre-order keycap with an ember spark, machined graphite cap, top-edge glow, bloom, price legend, and pressed hover travel.

An outlined seasonal CTA with a pale blossom edge, paired dots, pointer-positioned ink bloom, magnetic drift, and sliding duplicate label.

The Dark Glass rectangle reduced to a compact circle with its original charcoal surface, masked edge, and moving conic light.

The Launch rectangle's exact amber gradient, 4px base, soft aura, and 2px pressed state around a centered plus glyph.

The Dot Border rectangle's transparent face, blue hover fill, four moving corner dots, and sequential dashed frame around a mail glyph.

A compact icon-only play control with configurable finish, diameter, outline, and accessible label.

The original authored liquid-metal Sign up pill with its complete spectral field, bloom, pointer well, and faceted press ripple.

The exact liquid-metal WebGL field measured through a compact 56–72px circular plus control, preserving every original interaction and post-process pass.

A warm editorial card deck with framed portraits, numbered identity footers, paper grain, and a deep looping perspective rail.

A dark dimensional card wave with colored profile tiles, responsive horizontal-to-vertical motion, and orientation toggling.

A seven-thousand-point orange fibonacci shell on the authored four-second loop: it crumples and erodes into holes while eight jagged lightning arcs strike across it, and it leans out toward the pointer wherever the cursor rests.

A dendritic ember-to-gold limb structure on a nine-second turntable, eroding back from the tips while eight pulses climb from the root to a branch tip and return.

A ridged height field drifting over nine seconds, its rows drawn far-to-near so the relief reads solid, violet scree eroding off warm crests while six lava veins run down the slopes into a hazed far edge.

A six-lobe indigo and magenta cloud shearing around its own core over eight seconds, hollowing into voids while seven filament rings wind through the volume.

The packaged document, byte-for-byte: sand damier canvas over saddle-tan trim in a near-black room, holding a gunmetal card whose engine-turned field and guilloche rosette are engraved under gold foil.

The same sleeve cut in plain black calf and stood in a daylight room. No damier — a black hide has almost no albedo, so the whole read is its grain and its specular — and the card is brushed platinum: a diamond-cut rim, a champagne contact plate, and a brushing that jitters the studio per groove rather than blurring it. Swiss grotesque throughout.

Cognac bridle hide in a warm walnut room: a coarser pebble, a waxed sheen, a heavily burnished painted edge, and a pull-up that pales the raised grain. The card is brushed graphite titanium with a diamond-cut rim, polished steel engraving and a champagne contact plate, and the type is an old-style serif.

The packaged scene: fifty-five petals in five whorls furl into a bud and open again on a seventeen-second cycle, deep indigo through cornflower into a white heart, under blue light shafts and a star field.

Twelve tepals bowed into a goblet on a leafed stalk, magenta through rose into a warm lip, held against a deep spring-green field with pale green light shafts.

Five notch-tipped petals turned flat to the lens around a forty-four filament corona, pale pink into white over a plum night, the blade lit from whichever face is toward the camera.

A five-lobed toothed leaf laid flat to the lens, expanding from a furled shoot along its petiole, ember red through orange into gold with embers drifting off the blade.

The authored badge: a matte charcoal card inside a crinkled vinyl sleeve, read by a blue-to-ember thermal ramp and hung on a printed polyester lanyard.

A cloth-backed press pass: indigo cotton duck woven thread by thread, a halftone portrait screened onto the weave, saddle stitching, brass hardware, and a herringbone cotton strap.

The credential milled as a metal card: an anisotropic brushed plate, laser-etched type over an embossed account row, a contact chip and foil hologram, and an optical sleeve that mirrors the studio instead of creasing.

An injection-moulded putty badge with screw bosses, vents and moulded lettering, a screen-printed panel with a dot-matrix window and a power lamp, and a thermochromic ink that multiplies magenta into indigo where you touch it.

The authored scene, preserved unchanged: a turned wooden hourglass whose sand drains through a pinched neck, glides along the desk and tips end over end on its own rim.

A fifty-one key board in a dark walnut sandwich case on a thin honey-oak top, with a machined plate and sculpted PBT caps. It types LOADING one key at a time — each press an eighth of the capsule, a commit light out from the return key, then a wave that runs the board clear.

A low two-button mouse on a fumed-oak board, its shell one analytic surface — a rounded-rectangle section over a superellipse plan — so the curves carry no creases. Five clicks and one scroll fill the capsule; the buttons hinge on their own seam and the cord follows the body across the wood.

A saddle-stitched leather bifold lying open on a thin mahogany board, dealing the four cards terraced in its slot out into a clear row in front of it. Every card goes straight up out of the pocket before it travels, so nothing ever passes through anything; the last one lifts and turns to catch the light.

A carved timber handheld with a tinted glass screen, working face controls, a power switch, and a slow pointer-responsive turntable.

A compact wooden keyboard fitted with translucent glass keycaps, a dot-matrix readout, press feedback, and pointer orbit.

A blue translucent popsicle with monotone glass keycaps frozen into its refractive body, each square cap carrying a letter read through its own glass, over a procedurally grained wooden stick.

A turned timber side chair with five glass slats set into its raked back over one solid seat board, and a warm slat at the centre that lights and carries the press out to its neighbours.

A writing desk with a light table glazed into its top, a single drawer behind a smoked glass front that latches open on a spring, and a pulse that sweeps the panel when the glass is touched.

The original procedural moss-root world with pale flowers, ferns, drifting pollen, scan light, and a landing butterfly.

Mossy cherry boughs at close range, carrying a recursive twig network in open blossom over a golden cushion, with petals tumbling through a quiet dusk field.

The same mossy boughs turned to maple: palmate leaves running crimson to gold along every spray, a green-gold cushion, and leaves tumbling through a cold slate dusk.

The same boughs as redwood: flat sprays of scale-needle foliage on fibrous cinnamon bark, deep moss, and sprigs drifting through grove fog.

The lush authored pink cherry bough with dense moss, drifting petals, pointer wind, and a landing butterfly.

The learnme.html bough isolated from the Sentra landing page, with sharper branching, leaner moss, drifting petals, and ember-orange light.

Low amber light crossing the grass and distant ridges under the source's warm morning sky.

Clear cool daylight with the terrain, moisture colours, stones, and grass at their most legible.

The ridges and grass settle into long warm light beneath a deepening six-stop sky.

Moonlit terrain beneath 39,200 stars constrained to the landscape camera's visible band.

Rain draws in the fog, darkens the ground into puddles, and throws small splashes across the field.

A dense sideways downpour over sunset light, with close fog and multi-stroke lightning flashes.

Wind-driven snow settles across the terrain, stones, and grass while a blizzard tightens the horizon.

A stitched leather bifold standing open on its fold: two terraced card slots a side holding four drawn ID-1 cards, a leather fold lofted from both halves, a note-pocket wall, saddle stitching, and cards that ride up out of their slots on hover or click.

The authored mechanical keyboard with procedural keycaps, a CODEX row over a Voice bar and a microphone glyph, LED telemetry, and animated presses.

A wireless mouse on the keyboard's camera, environment and light rig: a crowned shell sculpted from its plan outline, hinged click plates, knurled wheel, green DPI cap, a telemetry strip flowing over the palm, and the pointer it drives clicking alongside it.

A streaming remote on the collection's isometric: a stacked sole, shell and control deck, a rocking navigation ring, sinking caps, an amber power key and green live key, and an infrared window that throws a burst of arcs every time a button bottoms out.

A compact isometric keyboard built as a pale dimensional grid with raised keycaps, a slim frame, soft grounding shadow, and damped pointer orbit.

A mechanical typewriter resolved as a stepped isometric grid study, from its key field and carriage to the paper assembly and grounded base.

An open journal translated into a dimensional isometric grid, with layered pages, a central spine, structured linework, and the collection's soft monochrome lighting.

An analytics board resolved as a dimensional isometric grid: a two-row column field, a pair of line series floating on dropped stems, and a share ring whose sectors carry their own depth, all building themselves under a travelling scan head.

A milled shift gate that routes its chrome lever between Luna, Terra, and Sol model stops and five effort levels, lighting engraved plates before Ultra rattles and throws sparks.

A wedge-shaped 48-key keyboard with pierced metal plate, backlit legends, sculpted rows, a self-typing wordmark sequence, rippling key light, and a spark-struck Enter key.

A Class III vault whose handwheel dials through its combination, withdraws six glowing bolts, swings the circular door open onto a cyan-lit cavity, then closes with a shower of sparks.

A pedestal CRT with milled bezel and knurled controls that blooms from a power-on line into boot text, colour bars, and oscilloscope graphics before collapsing back to a phosphor dot.

The original six-plane glass cube paired with a pixel-built CUBE wordmark.

A sharp triangular glass prism paired with a pixel-built TRIANGLE wordmark.

A balanced six-sided glass prism paired with a pixel-built HEXAGON wordmark.

A faceted five-sided glass prism paired with a pixel-built PENTAGON wordmark.

The authored opening envelope, card, pen, and four physics-reactive coins.

A low-profile keyboard with a seamless Apple Magic Mouse positioned on its right.

A mirrorless camera with a deep animated lens and a compact four-rotor drone holding station above it.

A condenser microphone in its yoke behind a mesh pop filter, cabled to a desk console beside a monitor speaker.

A spiral notepad whose top sheet lifts off the block, with a pencil across it and a cup of coffee steaming beside it.

A masked white particle dome drifting across a dark field.

A deep emerald shader glow rising from an organic moving horizon.

A violet particle synthesis sphere with encrypted orbital rings and luminous data nodes.

A cyan breathing dot matrix with radial depth fade and smoothed pointer drift.

A full-screen ShaderMaterial expanse isolated from its original editorial layout.

An isometric platform, illuminated logic core, and orbiting nodes.

Dimensional architecture composed from two authored ShaderMaterials.

A global-data Three.js network visual isolated from its dashboard frame.

A rotating topology graph with connected nodes and rhythmic point pulses.

An indigo FBM nebula with pointer drift, breathing light, and vignette.

A blue-violet animated fluid ShaderMaterial.

A 12,000-particle ember vortex with additive heat grading and flicker.

A blooming particle vortex with spiral filaments and post-process glow.

Orange sunburst dial reading 0–7000 r/min with a redline band, a machined oil-temperature sub-dial, and a counterweighted red needle.

0–160 km/h scale whose travelled arc fills behind the needle, with a peak-hold marker, counting digital readout, and rolling odometer.

Navy −1.0 to 1.5 bar dial that separates the vacuum half from the pressure half and flags the wastegate threshold with a pulsing overboost lamp.

Regeneration-to-power scale that fills its track from zero, with a green charge segment, kilowatt readout, and battery state-of-charge bar.

The opening chromatic ThreeUI wordmark assembly, isolated to its first authored beat.

The Shaders wordmark materializes through a seeded field of drifting dots and squares.

Animated circular audio-bar fields paired with a compact ThreeUI wordmark and icon lockup.

The authored Sable dock: a centred glass capsule whose items spring downward and widen as the pointer crosses them.

An inset modern header: wordmark on the left, the proximity dock centred on the bar’s midline, and a paired sign-in and gradient call to action on the right.

A fitted terminal strip: the menu cells own the whole bar and trade width with each other, over a WebGL noise field quantised through an 8×8 ordered dither into an eight-stop dusk palette.

A vertical glass rail whose proximity field runs down the y axis, over a Three.js bead field that refracts the backdrop in screen space with per-channel dispersion and a specular rim.

A Three.js ShaderMaterial portal with pointer-reactive fringe light.

A raw-WebGL cloud migration background isolated at its source renderer boundary.

Warm amber, gold, and coral particles trace a deterministic simplex-noise field.

A Chladni-inspired bell field with nodal metal patterns and rising foundry embers.

Three chromatically separated violet wavefronts crossing a rotated fluid field.

The preserved pointer-reactive three-way matrix junction.

A white-hot emerald blade cutting through layered procedural vapor and faint mirage rails.

Violet and amber carrier rails accelerate from a pointer-steered horizon origin.

An off-axis cyan relay where vapor resolves into an animated screen-space dot field.

The prismatic cube study isolated as a single rotating wireframe form.

The crossed logic cylinders isolated as a single rotating wireframe form.

The nested icosahedral sphere isolated as a single rotating wireframe form.

A warm radial spark burst that expands and contracts around a bright core.

An interlocking six-loop bloom traced as a rotating monochrome dot lattice.

A rounded command-prompt mark that breathes as a dimensional prompt blob.

The Cursor arrow and frame resolved in dots with a timed click ripple.

A four-point Gemini twinkle with orbiting light and a soft central pulse.

Five dot swatches morph through the familiar stacked Figma silhouette.

The folded Framer F rendered as shifting blue dot bands.

Three luminous electron ellipses orbit a bright React nucleus.

The Swift bird silhouette sweeps through a warm coral dot field.

The DesignCode monogram travels through a dense spherical dot field.

Aura's native asymmetric dot field carries an expanding halo of light.

Six tapered petals open, breathe, and rotate as a DreamCut bloom.

A paneled interface window assembles from cool blue dot segments.

A warm journey curve connects three pulsing experience nodes.

The CSS lettermark emerges as a purple scan moving through a rounded field.

The iOS wordmark is sampled into an even monochrome dot matrix.

Eight directional Neuform chevrons rotate around a precise center.

The Octocat silhouette appears as negative space inside a luminous orb.

The X mark is swept by a rotating highlight around its diagonal strokes.

The Instagram camera mark glows through a violet-to-orange dot gradient.

The Threads loop is traced by an angular highlight sweep.

The LinkedIn mark scans across a blue rounded-square field.

A dimensional dotted envelope opens and sends a traveling signal.

The original 17.2-second DreamCut sequence: dashboard panels, glowing charts, floating task cards, adjustment sliders, the inspector, an export queue, and a closing logo reveal.

An 18.7-second DesignCode product tour through its header, animated hero, course cards, footer, terminal, pricing, and final logo reveal, with dimensional panels and cinematic focus shifts.

A 28-second tour through ThreeUI's catalog, landing pages, source code, categories, component variants, and MCP workflow, ending with the Triwave mark and wordmark.

From first take to final cut: nine cinematic scenes through the editor, recording, timeline, transcripts, captions, audio, media, and export.

The supplied Serein dashboard motion study: seven scenes of analytics, momentum, details, signals, planning, and people.

The packaged document, byte-for-byte: forty seconds through three loops of orbital gauges, five labelled steps in each, converging on the React mark and its closing card.

Six seconds of the same film, cut into three two-second shots — the dial's rim sweeping in under the first node, one labelled step travelling the ring, then the three orbits around the nucleus — each carrying a statement of its own. Nothing is rebuilt between them: the scene keeps running and the camera cuts.

The exact mechanical wallet stays fully readable above one stitched mono message that tracks through the lower negative space with the lateral cadence of cards entering and leaving their slots.

The exact mechanical wallet cut into three 2-second shots: the near half's deck as a card rides out of its slot; the far half's deck under the fold; then the whole standing bifold — each shot framed on the cards actually working inside it and carrying its own statement, closing on Carry only what matters.