CSS components and templates

Oblo Wipe Pill with its original authored interaction.

Oblo Showreel Wipe with its original authored interaction.

The complete RenderLab motion-house page, preserved unchanged with its ruled column overlay, tracking cursor label, scroll progress bar, light and dark toggle, marquee bands, and the twenty remote stills and one remote loop the original page references.

The complete Aurello beverage page with its can and its oranges rebuilt as real-time Three.js geometry — a lathed can traced from the product render's own silhouette and wrapped with a cylindrically un-projected label, and lit half-oranges whose cut face is un-projected from the fruit photograph — carried by the authored GSAP ScrollTrigger choreography, the pinned journey can, and the original stills as the no-WebGL fallback.

A complete interactive keyboard product story that rebuilds every key in DOM and CSS, moving from an oversized typing hero through construction, lineage, feature, voice, finish, and final product chapters.

A customizable Codex wordmark that draws a viscous particle organism toward its letters, illuminating the text as the network searches and reconnects.

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 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.

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 responsive engraved certificate: plate field, dual guilloche rosettes, and a drifting harmonic pass that auto-cycles through four cam states.

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.

A cinematic secure-uplink loader with stepped progress, illuminated telemetry ticks, neon readouts, technical corner markers, mirrored side rails, scanlines, and procedural grain.

A tactile stack of three Japanese koi studies with CSS 3D depth, pointer tilt, drag and keyboard navigation, pixel-mask reveals, and animated halftone imagery.

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.

The exact Singapore paper sketchbook with nested-strip page curls, direct dragging, tilt, zoom, a movable magnifying glass, and its complete authored plate set.

The preserved packaged export: a tactile pill with an inset track and a raised sliding thumb.

A flat, hairline-edged switch with a stretching knob, a check-to-dash mark, and one soft accent pool.

An Apple-style Three.js capsule in transmissive glass, refracting a drifting colour field around a lit core.

A raw-WebGL switch drawn entirely in one fragment pass: plasma interior, streaming sparks, chromatic bloom, and a pointer-lit thumb.

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.