Glass components and templates

A cinematic Codex workshop page with a snowy alpine hero, a glass ring and crystal course markers, a scroll-driven mountain ascent, illustrated chapters, and a crystalline globe.

The Understory layout and its procedural Three.js glass hands recut as a dark monotone designer portfolio: one neutral grey ramp, a halo-lit headline carried over the lit marble, desaturated photography, and inline SVG work artefacts.

An experimental studio landing page with a kinetic chrome-and-glass sculpture, architectural typography, an interactive object gallery, and a scroll-driven physics playground.

A cinematic wallet landing page with sculptural blue glass, dimensional serif typography, a guided payment walkthrough, floating cards, a currency calculator, testimonials, and a complete mobile app story.

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.

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.

A complete GPU orchestration hero with glass navigation, restrained editorial copy, social proof, stat cards, and a pointer-reactive blue-white vortex line field.

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.

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.

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.

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.

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 real-time digital clock sculpted from translucent blue liquid tubes, with luminous fluid segments, drifting particles, soft depth, bloom, and pointer-driven deformation.

The original translucent Nocturne certificate with monochrome editorial typography, procedural glass texture, and a giant wordmark suspended behind the paper.

A graphic Site of the Year award sheet with vivid lime scoring details, season XP, winner metadata, and the same tactile translucent paper motion.

A Japanese recognition certificate with vertical display type, warm gold accents, bilingual details, procedural translucency, and direct inertial interaction.

A formal typographic certificate edition with recipient signatures, structured award details, glass-like reflections, and the original responsive paper simulation.

Inner Circle padlock extracted from Tandem with its original geometry and materials.

Encore vinyl record extracted from Tandem with its original geometry and materials.

Hideout room extracted from Tandem with its original geometry and materials.

Airwave microphone extracted from Tandem with its original geometry and materials.

Sparkplug bolt extracted from Tandem with its original geometry and materials.

Doorway magnet extracted from Tandem with its original geometry and materials.

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 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 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 translucent glass AI button with a deep-blue galaxy orb, luminous GPT 6 Sol lettering, a traced brain icon, and a particle burst on activation.

A sculpted dark sign-up button with a glass potion orb, rising green bubbles, an opening envelope, a spinning ring, and fading procedural fingerprint marks after each press.

A botanical atelier in blue and blush, with a refractive glass sculpture holding flowers, drifting petals, editorial practice cards, garden notes, and collectible editions.

A brushed-metal thermometer button with a glass weather orb, spring-driven capillary liquid, glowing temperature ticks, and four animated conditions: clear, cloudy, rain, and snow.

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 statement lands beside the block as it turns once, then both leave to a clean loop seam.