Animated components and templates
Explore 136 ThreeUI components, templates, backgrounds, and interactive effects tagged Animated, with previews and editable implementation source.
- Predictive Arc — Predictive Arc
The violet predictive pixel arch with a luminous animated core.
- Predictive Arc — Data Pixel Arc
An emerald pixel horizon with an organic breathing band.
- Predictive Arc — Signal Particles
A dark signal-particle field with soft connective pulses.
- Predictive Arc — Override Grid
A block-by-block override grid with telemetry-orange accents.
- Predictive Arc — Ribbon Field
A cyan, indigo, and purple WebGL ribbon field resolved through an animated dot matrix.
- Predictive Arc — Void Field
A transparent raw-WebGL void field detached from its original article composition.
- Predictive Arc — Halftone Flow
A red-orange raw-WebGL flow field resolved through its authored six-pixel halftone matrix.
- Predictive Arc — Amber Halftone
An animated amber-to-white Three.js point field on a dark plane.
- Globe — Energy Orb
The original layered FBM energy sphere with translucent rim glow and depth-aware star field.
- Globe — Tangled Constellations
Monotone glyph chains wander a dimensional sphere, collide with pinned stars, and respond to drag and pointer contact.
- Globe — Network Globe
A dotted continent mesh on a luminous dusk horizon with crossing gradient routes, sparks, hover highlights, and click-launched arcs.
- Shader Buttons — Star Portal
Two drifting Canvas 2D star fields with an authored holographic pill button.
- Shader Buttons — Ignition
A raw-WebGL ambient field with a tactile ignition control.
- Shader Buttons — Induction
A kinetic ambient field paired with a raw-WebGL induction button.
- Shader Buttons — Plasma
A deep-blue laboratory field with a luminous plasma control.
- Shader Buttons — Tactile
A fluid ambient background with a tactile raw-WebGL button.
- Shader Buttons — Thinking
A luminous Canvas 2D trace orbiting a softly raised blue button.
- Shader Buttons — Raking Light Pill
A pill-shaped shader button with raking GLSL light bands, sparse motes, a soft edge, and hover intensification.
- Shader Buttons — Liquid Glass
Refractive glass capsule with flowing color, light response, and a tactile press state.
- Shader Buttons — Intelligence Glow
Iridescent intelligence glow with a listening state and animated voice bars.
- Shader Buttons — Holographic Foil
Three.js foil material that tilts with the pointer and changes on click.
- Shader Buttons — Particle Swarm
A Three.js particle swarm gathers around an interactive button and resolves on click.
- Shader Buttons — Voice Orb
Reactive Three.js orb and a press-and-hold voice control.
- Shader Buttons — Water Ripple
WebGL2 water simulation that ripples under pointer movement and presses.
- Shader Buttons — Dithered Hold
Pixelated shader fill that advances while the button is held.
- Shader Buttons — Lava Lamp
Warm liquid blobs shift under hover and heat up on click.
- Shader Buttons — Brushed Gold
Three.js brushed gold material with responsive light and a press state.
- Shader Buttons — Ink in Water
WebGL2 fluid ink swirls inside a glass capsule as the pointer stirs it.
- Shader Buttons — Glassy Split
A lilac glass split button with a working creation menu.
- Shader Buttons — Generate Site
A violet enamel button with a star field and animated generation state.
- Shader Buttons — Chrome Upload
A polished chrome upload button with shader driven metal reflections.
- Shader Buttons — Book a Demo
A dark control with a moving lime dot matrix arrow.
- Shader Buttons — Iridescent Glass
A frosted download button with iridescent shader color and glass lettering.
- Shader Buttons — Create & Get Started
A paired ceramic and violet primary action study.
- Shader Buttons — Soft Surface
A softly extruded service button with a recessed arrow control.
- Shader Buttons — Balloon
An inflated fabric button with a responsive Three.js cloth surface.
- Shader Buttons — Light Switch
A molded day and night rocker switch with spring motion.
- Shader Buttons — Start Growing
A forest glass capsule with optical filaments and a spring switch.
- Shader Buttons — Car Controls
Sculpted automotive keycaps with functional airflow and heat states.
- Rectangle Buttons — Dark Glass
A deep charcoal glass rectangle with a softly revolving inner highlight and restrained metallic type.
- Rectangle Buttons — Launch Button
A warm amber launch control with tactile depth, a soft aura, and a compact lightning icon.
- Rectangle Buttons — Dot Border Button
A bright creation CTA framed by four corner dots and sequentially drawn dashed border segments.
- Rectangle Buttons — Floating Dots CTA
A saturated blue CTA with a glass highlight and a continuous stream of floating light points.
- Rectangle Buttons — Sliding Text CTA
A dark rectangle CTA whose label slides, blurs, and resolves into a crisp duplicate on hover.
- Rectangle Buttons — Gradient Beam CTA
A dark builder CTA with a rotating orange edge beam, drifting dot texture, and responsive glow.
- Rectangle Buttons — Gradient Pill Button
A restrained metallic lesson control with a masked gradient edge, soft elevation, and arrow icon.
- Rectangle Buttons — Generate Button
A glossy generate control with prismatic borders, animated lettering, and an illuminated sparkle icon.
- Rectangle Buttons — Glassmorphism CTA
A glass CTA with a revolving highlight, advisor portrait, and a glowing generative-action icon.
- Rectangle Buttons — Spinning Border Button
A compact graphite CTA that replaces its static edge with a rotating white border beam on hover.
- Rectangle Buttons — Gradient CTA
A sunlit amber CTA with inset highlights, deep elevation, and a rising hover sheen.
- Rectangle Buttons — Lumen CTA
The authored six-stop violet gradient pill with its inner highlight, cast glow, and trailing open ring.
- Rectangle Buttons — Lumen CTA Ghost
The authored sibling pill with the same geometry, a blurred glass fill, and a hairline outline.
- Rectangle Buttons — Trochil Signal
The selected Trochil request-access treatment: a restrained black technical rectangle with a fine lit edge and passing warm signal sheen.
- Rectangle Buttons — Attune Thermal
The selected Attune primary action with a compact orange thermal gradient, inset highlight, grounded glow, and chevron.
- Rectangle Buttons — Tideform Outline
The selected Tideform action: a square technical outline with tracked mono type, warm hover state, and a long directional arrow.
- Rectangle Buttons — Understory Arrow Pill
The selected Understory action with a violet capsule surface and an inset paper-toned circular arrow endcap.
- Rectangle Buttons — Meridian Keycap Primary
The selected Meridian primary action rebuilt as a blue illuminated keycap with a physical base, LED, and pressed hover travel.
- Rectangle Buttons — Meridian Keycap Secondary
The selected Meridian secondary action using the same tactile keycap geometry in its graphite night-side treatment.
- Rectangle Buttons — Halvorsen Arrow Pill
The selected Halvorsen action: the shared editorial arrow-pill structure recut as a bone-white capsule with a black inset arrow disc.
- Rectangle Buttons — Aster Glass Access
The compact Aster navigation action with a translucent smoke surface, masked crystalline edge, top sheen, and restrained hover lift.
- Rectangle Buttons — Aster Glass Arrow
The Aster primary CTA using the same glass material with a bordered inset chip and a directional arrow that advances on hover.
- Rectangle Buttons — Ember Keycap
A tactile pre-order keycap with an ember spark, machined graphite cap, top-edge glow, bloom, price legend, and pressed hover travel.
- Rectangle Buttons — Bloom Outline Button
An outlined seasonal CTA with a pale blossom edge, paired dots, pointer-positioned ink bloom, magnetic drift, and sliding duplicate label.
- Circle Buttons — Play
The Dark Glass rectangle reduced to a compact circle with its original charcoal surface, masked edge, and moving conic light.
- Circle Buttons — Plus
The Launch rectangle's exact amber gradient, 4px base, soft aura, and 2px pressed state around a centered plus glyph.
- Circle Buttons — Mail
The Dot Border rectangle's transparent face, blue hover fill, four moving corner dots, and sequential dashed frame around a mail glyph.
- Character Carousel — Filmstrip
A warm editorial card deck with framed portraits, numbered identity footers, paper grain, and a deep looping perspective rail.
- Character Carousel — Wave
A dark dimensional card wave with colored profile tiles, responsive horizontal-to-vertical motion, and orientation toggling.
- Gallery
The isolated Vantrix hero image ribbon: sixteen curved editorial panels orbiting a vertical cylindrical rail on a quiet paper grid.
- 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.
- Purple Desert
A cinematic dune flight under violet twilight, with procedural sand ridges, a layered distant range, wind-blown haze, pointer-guided orbit, and a smooth night-to-day lighting dissolve.
- Orbital Dust
A luminous dust planet suspended in a black star field, with a tilted particle axis, a responsive orbital ring, pointer attraction, and click-triggered shockwaves that scatter across the globe.
- Noema Bloom — Bloom
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.
- Noema Bloom — Tulip
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.
- Noema Bloom — Sakura
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.
- Noema Bloom — Maple
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.
- Heatmap Badge — Vinyl
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.
- Heatmap Badge — Field Canvas
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.
- Heatmap Badge — Titanium
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.
- Heatmap Badge — Retro Plastic
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.
- Hourglass Loader — Hourglass
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.
- Hourglass Loader — Keyboard
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.
- Hourglass Loader — Mouse
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.
- Hourglass Loader — Wallet
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.
- Woven Cloth — Woven Cloth
The packaged Neuform export, untouched: an ivory banner with a crimson hem and the Woven Cloth wordmark printed into the weave, pinned along its top edge.
- Woven Cloth — Iridescent Silk
A five-harness satin under a painted studio environment: a thin-film interference layer whose thickness sweeps one full order across the width, so the colour travels over the folds while the wordmark stays a tone-on-tone jacquard.
- Woven Cloth — Atelier Flag
The same sheet cut and sewn: three linen panels joined by flat-felled seams and topstitching, an indigo heading tape on the hoist with brass grommets and a mast, hemmed at the fly, and a woven label tacked on at the corner.
- Woven Cloth — Washi Noren
An indigo-dyed kozo noren on a wooden rod, backlit through a shoji: laid and chain lines from the papermaking screen, a torn deckle edge cut by an alpha mask, and slits that free three panels to sway on their own.
- Performance Gauges — Tachometer
Orange sunburst dial reading 0–7000 r/min with a redline band, a machined oil-temperature sub-dial, and a counterweighted red needle.
- Performance Gauges — Speedometer
0–160 km/h scale whose travelled arc fills behind the needle, with a peak-hold marker, counting digital readout, and rolling odometer.
- Performance Gauges — Turbo Boost
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.
- Performance Gauges — EV Power
Regeneration-to-power scale that fills its track from zero, with a green charge segment, kilowatt readout, and battery state-of-charge bar.
- Uplink Loader
A cinematic secure-uplink loader with stepped progress, illuminated telemetry ticks, neon readouts, technical corner markers, mirrored side rails, scanlines, and procedural grain.
- Koi Studies
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.
- Article Headings — Intro Text
The opening chromatic ThreeUI wordmark assembly, isolated to its first authored beat.
- Article Headings — Particle Wordmark
The Shaders wordmark materializes through a seeded field of drifting dots and squares.
- Article Headings — Audio Wordmark
Animated circular audio-bar fields paired with a compact ThreeUI wordmark and icon lockup.
- Animated Top Dock — Sable Dock
The authored Sable dock: a centred glass capsule whose items spring downward and widen as the pointer crosses them.
- Animated Top Dock — Command Bar
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.
- Animated Top Dock — Pixel Terminal
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.
- Animated Top Dock — Liquid Glass
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.
- Constellation Field — Constellation Field
A drifting particle constellation network with tunable link stroke width over a deep night field.
- Constellation Field — Particle Drift
A soft particle drift field lifted from a compute-network hero stage.
- Constellation Field — Particle Network
A sharp, thin-stroke particle network field with crisp retina trails.
- Constellation Field — Gateway Flow
A black-stage flow canvas with streaming gateway trajectories.
- Constellation Field — Connectivity Graph
A light-mode connectivity graph canvas with animated node links.
- Constellation Field — Interface Lines
A faint interface line-field background for dense system UI stages.
- Constellation Field — Defense Lines
A crimson defense-line canvas field behind a high-contrast hero stage.
- Constellation Field — Topo Field
A raw-WebGL topography field with flowing elevation bands.
- Laser — Matrix Junction
The preserved pointer-reactive three-way matrix junction.
- Laser — Atmospheric Blade
A white-hot emerald blade cutting through layered procedural vapor and faint mirage rails.
- Laser — Vanishing Array
Violet and amber carrier rails accelerate from a pointer-steered horizon origin.
- Laser — Halftone Relay
An off-axis cyan relay where vapor resolves into an animated screen-space dot field.
- Brand Orbs — Claude Code
A warm radial spark burst that expands and contracts around a bright core.
- Brand Orbs — OpenAI
An interlocking six-loop bloom traced as a rotating monochrome dot lattice.
- Brand Orbs — Codex
A rounded command-prompt mark that breathes as a dimensional prompt blob.
- Brand Orbs — Cursor
The Cursor arrow and frame resolved in dots with a timed click ripple.
- Brand Orbs — Gemini
A four-point Gemini twinkle with orbiting light and a soft central pulse.
- Brand Orbs — Figma
Five dot swatches morph through the familiar stacked Figma silhouette.
- Brand Orbs — Framer
The folded Framer F rendered as shifting blue dot bands.
- Brand Orbs — React
Three luminous electron ellipses orbit a bright React nucleus.
- Brand Orbs — Swift
The Swift bird silhouette sweeps through a warm coral dot field.
- Brand Orbs — DesignCode
The DesignCode monogram travels through a dense spherical dot field.
- Brand Orbs — Aura
Aura's native asymmetric dot field carries an expanding halo of light.
- Brand Orbs — DreamCut
Six tapered petals open, breathe, and rotate as a DreamCut bloom.
- Brand Orbs — UI
A paneled interface window assembles from cool blue dot segments.
- Brand Orbs — UX
A warm journey curve connects three pulsing experience nodes.
- Brand Orbs — CSS
The CSS lettermark emerges as a purple scan moving through a rounded field.
- Brand Orbs — iOS
The iOS wordmark is sampled into an even monochrome dot matrix.
- Brand Orbs — Neuform
Eight directional Neuform chevrons rotate around a precise center.
- Brand Orbs — GitHub
The Octocat silhouette appears as negative space inside a luminous orb.
- Brand Orbs — X
The X mark is swept by a rotating highlight around its diagonal strokes.
- Brand Orbs — Instagram
The Instagram camera mark glows through a violet-to-orange dot gradient.
- Brand Orbs — Threads
The Threads loop is traced by an angular highlight sweep.
- Brand Orbs — LinkedIn
The LinkedIn mark scans across a blue rounded-square field.
- Brand Orbs — Email
A dimensional dotted envelope opens and sends a traveling signal.