Three.js components
Browse reusable Three.js components with interactive 3D scenes, customizable variants, responsive behavior, and copy-ready source code.
- Pirate Ship River
A cinematic pirate ship voyage through a misty river valley, with detailed rigging, reflective water, atmospheric lighting, and an interactive camera.
- Halcyon Card — Private Reserve
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.
- Halcyon Card — Onyx
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.
- Halcyon Card — Saddle
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.
- Liquid Clock
A real-time digital clock sculpted from translucent blue liquid tubes, with luminous fluid segments, drifting particles, soft depth, bloom, and pointer-driven deformation.
- Iridis
A precision-milled Obsidian card whose embedded star field blooms into wave-optical spectral diffraction, with an analytical studio shadow and smooth pointer-driven orbit.
- Holographic Glitter Card
An Astro Blade arcade player card wrapped in pointer-reactive rainbow glitter, a drifting pixel-dissolve foil field, rippled laminate, specular sweeps, and a soft projected shadow.
- Book of Japan
A dark hardbound reader for an original seven-chapter essay on Japan, with responsive typesetting, light-ink brush plates, richly textured boards, page-edge depth, and a physically modelled paper curl.
- 3D Paper — Original
The original translucent Nocturne certificate with monochrome editorial typography, procedural glass texture, and a giant wordmark suspended behind the paper.
- 3D Paper — Site of the Year
A graphic Site of the Year award sheet with vivid lime scoring details, season XP, winner metadata, and the same tactile translucent paper motion.
- 3D Paper — Japanese
A Japanese recognition certificate with vertical display type, warm gold accents, bilingual details, procedural translucency, and direct inertial interaction.
- 3D Paper — Certificate
A formal typographic certificate edition with recipient signatures, structured award details, glass-like reflections, and the original responsive paper simulation.
- App Orbit
Fourteen sculpted app icons orbit through liquid glass, satin ceramic, and precision aluminum, with a macOS-inspired dock, direct focus, tactile hover, and inertial camera controls.
- Ashen Press
A tactile 3D art-book shelf with ten clothbound volumes, embedded illustrated plates, reflective oak furniture, a torn-paper detail reveal, and direct hover, select, flip, and drag interactions.
- 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.
- Halftone Keyboard — 60% Board
The authored scene: a backlit 60% board with procedural key legends, automatic typing, keys that light as the cursor passes them, and the pendant whose cone swings across the whole board.
- Halftone Keyboard — Journal
An open leather journal writing itself: procedural cursive laid down a word at a time on ruled paper, wet ink catching the lamp at the nib, a satin ribbon and a fountain pen that lifts as the cursor nears it, and a page that curls over on a vertex-shader hinge once the right-hand side fills.
- Halftone Keyboard — Typewriter
A portable machine three-quarters on, typing a page: fifty nickel-ringed keys in one draw call, a typebar thrown at the platen for every letter, a carriage that steps left and runs home on the return lever, and a sheet stamped one struck glyph at a time.
- Halftone Keyboard — CRT
A chunky monitor running a terminal session on a real spherical-cap tube, with scanlines, an aperture grille, barrel distortion and a shader-stamped blinking cursor — and a phosphor wash that falls back onto its own bezel and across the desk in front of it.
- Wood Icons — Gameboy
A carved timber handheld with a tinted glass screen, working face controls, a power switch, and a slow pointer-responsive turntable.
- Wood Icons — Keyboard
A compact wooden keyboard fitted with translucent glass keycaps, a dot-matrix readout, press feedback, and pointer orbit.
- Wood Icons — Popsicle
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.
- Wood Icons — Chair
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.
- Wood Icons — Desk
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.
- Sylva Living World — Living Green
The original procedural moss-root world with pale flowers, ferns, drifting pollen, scan light, and a landing butterfly.
- Sylva Living World — Sakura Sunset
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.
- Sylva Living World — Maple Autumn
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.
- Sylva Living World — Sequoia Mist
The same boughs as redwood: flat sprays of scale-needle foliage on fibrous cinnamon bark, deep moss, and sprigs drifting through grove fog.
- Sakura River Valley
Explore a real-time mountain river valley at golden hour, with sakura trees, a boat, temples, weather, and a changing day and night sky.
- Sunset Valley — Sunset
The exact authored sunset valley with its warm canyon, glowing river, smoke, dust, grass, and pointer physics.
- Sunset Valley — Forest Morning
A lush green morning with a cool misty sky, richer ground cover, and thousands of instanced river-valley trees.
- Sunset Valley — Aurora Night
A deep blue starlit night beneath five folded borealis curtains, green along their sharp lower border and violet in the crown.
- Sunset Valley — Blue Hour
The half hour after the sun has gone: an indigo sky over one ember of afterglow, the river turned to a pale mirror, and the same fern banks lit only by skylight.
- Temple Night — Temple Night
Kage’s procedural Kyoto mountain temple after dark, with the exact authored architecture, rain, mist, leaves, pointer wisps, camera composition, and bloom pipeline.
- Temple Night — Yosemite Sunset
The same world engine turned on Yosemite Valley at last light: El Capitan and Cathedral Rocks under painted alpenglow, Half Dome at the head of the valley, a giant sequoia grove, and the Merced running out of frame.
- Temple Night — Presidio Sunset
A park above the Golden Gate at the end of the day: wind-sheared Monterey cypress over a green bluff, the bridge stretched across the strait in International Orange, the Marin headlands beyond it, and fog coming in under the sun.
- Temple Night — Lake Louise
The same engine turned cold: Mount Victoria under alpenglow at the head of a glacial lake, its snowline and hanging glacier painted by the massif routine, a spruce fringe down both shores, and the peak mirrored in turquoise water.
- Sakura Branch — Sakura
The lush authored pink cherry bough with dense moss, drifting petals, pointer wind, and a landing butterfly.
- Sakura Branch — Sentra Branch
The learnme.html bough isolated from the Sentra landing page, with sharper branching, leaner moss, drifting petals, and ember-orange light.
- Landscape — Sunrise
Low amber light crossing the grass and distant ridges under the source's warm morning sky.
- Landscape — Noon
Clear cool daylight with the terrain, moisture colours, stones, and grass at their most legible.
- Landscape — Sunset
The ridges and grass settle into long warm light beneath a deepening six-stop sky.
- Landscape — Night
Moonlit terrain beneath 39,200 stars constrained to the landscape camera's visible band.
- Landscape — Rain
Rain draws in the fog, darkens the ground into puddles, and throws small splashes across the field.
- Landscape — Storm
A dense sideways downpour over sunset light, with close fog and multi-stroke lightning flashes.
- Landscape — Snow
Wind-driven snow settles across the terrain, stones, and grass while a blizzard tightens the horizon.
- Country Towers — Japan
A Japanese tenshu with an ishigaki stone base, plastered storeys, and flying tiled eaves.
- Country Towers — China
A Chinese pagoda in vermilion lacquer and green glaze beneath a gilt finial.
- Country Towers — Vietnam
A Vietnamese tháp with seven octagonal Huế lime-wash storeys and lifted tiled eaves.
- Country Towers — Thailand
A Thai prang rising from a stepped plinth into a richly detailed gold spire.
- Country Towers — Cambodia
A Khmer prasat on laterite terraces with a redented sanctuary and diminishing sandstone tiers.
- Country Towers — Turkey
An Ottoman mosque with limestone ashlar, İznik tile, a lead dome, and twin pencil minarets.
- Bookshelf
The exact seven-volume Bookshelf collection with its authored room, carousel shelf, individual cover artwork, foil, pages, inspection, opening, and page-turn system.
- Wallet — Wallet
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.
- Wallet — Keyboard
The authored mechanical keyboard with procedural keycaps, a CODEX row over a Voice bar and a microphone glyph, LED telemetry, and animated presses.
- Wallet — Mouse
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.
- Wallet — Remote
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.
- Grid Illustrations — Keyboard
A compact isometric keyboard built as a pale dimensional grid with raised keycaps, a slim frame, soft grounding shadow, and damped pointer orbit.
- Grid Illustrations — Typewriter
A mechanical typewriter resolved as a stepped isometric grid study, from its key field and carriage to the paper assembly and grounded base.
- Grid Illustrations — Journal
An open journal translated into a dimensional isometric grid, with layered pages, a central spine, structured linework, and the collection's soft monochrome lighting.
- Grid Illustrations — Charts
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.
- Retro Metallic — Agent Selector
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.
- Retro Metallic — Type-48 Keyboard
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.
- Retro Metallic — Vault-01
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.
- Retro Metallic — CRT-14
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.
- 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.
- Isometric Illustration — Keyboard
A minimal 24-key deck on the dock's pad: caps that strike and light one at a time, an indicator lamp answering every stroke, and a floating plate that fills with typed words before clearing.
- Isometric Illustration — Search
A lit horizontal search bar seated on a two-tier plinth, with a magnifier puck sweeping through three stops while the groove fills behind it and each tick strikes — every mark bounded inside the bar's own outline.
- Isometric Illustration — Phone
A phone whose lit glass inverts the drawing to dark ink on light: twenty app tiles standing proud of the screen ride a diagonal lift wave while the dynamic island opens and hands off a floating notification.
- Isometric Illustration — Browser
A window standing where the dock's lid did: a load bar sweeps its divider, content pops in block by block, and a pointer walks to the call to action and presses it while the mouse on the pad travels with it.
- Isometric Illustration — Wallet
A saddle-stitched leather bifold with a pocket wall, and three lit cards that fan up out of it in sequence — each spreading its own contact shadow as it climbs — before settling back flush.
- 365 Shapes — Cube
The original six-plane glass cube paired with a pixel-built CUBE wordmark.
- 365 Shapes — Triangle
A sharp triangular glass prism paired with a pixel-built TRIANGLE wordmark.
- 365 Shapes — Hexagon
A balanced six-sided glass prism paired with a pixel-built HEXAGON wordmark.
- 365 Shapes — Pentagon
A faceted five-sided glass prism paired with a pixel-built PENTAGON wordmark.
- Isometric Mail Light Shafts — Mail
The authored opening envelope, card, pen, and four physics-reactive coins.
- Isometric Mail Light Shafts — Keyboard + Mouse
A low-profile keyboard with a seamless Apple Magic Mouse positioned on its right.
- Isometric Mail Light Shafts — Camera + Drone
A mirrorless camera with a deep animated lens and a compact four-rotor drone holding station above it.
- Isometric Mail Light Shafts — Microphone
A condenser microphone in its yoke behind a mesh pop filter, cabled to a desk console beside a monitor speaker.
- Isometric Mail Light Shafts — Notepad
A spiral notepad whose top sheet lifts off the block, with a pencil across it and a cup of coffee steaming beside it.
- Scalability Bricks
An interactive isometric brick massif with falling illuminated pieces, physics-driven collisions, five accent palettes, three material styles, and adaptive light and dark surfaces.
- Structure Flow — Structure Flow
A masked white particle dome drifting across a dark field.
- Structure Flow — Emerald Horizon
A deep emerald shader glow rising from an organic moving horizon.
- Structure Flow — Orbital Sphere
A violet particle synthesis sphere with encrypted orbital rings and luminous data nodes.
- Structure Flow — Dot Matrix
A cyan breathing dot matrix with radial depth fade and smoothed pointer drift.
- Structure Flow — Expanse Field
A full-screen ShaderMaterial expanse isolated from its original editorial layout.
- Structure Flow — Logic Core
An isometric platform, illuminated logic core, and orbiting nodes.
- Structure Flow — Dimensional Field
Dimensional architecture composed from two authored ShaderMaterials.
- Structure Flow — Data Field
A global-data Three.js network visual isolated from its dashboard frame.
- Structure Flow — Topology Field
A rotating topology graph with connected nodes and rhythmic point pulses.
- Structure Flow — Nebula
An indigo FBM nebula with pointer drift, breathing light, and vignette.
- Structure Flow — Fluid Field
A blue-violet animated fluid ShaderMaterial.
- Structure Flow — Ember Storm
A 12,000-particle ember vortex with additive heat grading and flicker.
- Structure Flow — Flux Vortex
A blooming particle vortex with spiral filaments and post-process glow.
- Warp Field — Warp Field
The original hero warp: 400 emerald streaks and 40 luminous tiles through deep-space fog.
- Warp Field — Letter Storm
160 tumbling glyphs wandering off the rails while the streak field keeps the corridor moving.
- Warp Field — Keycap Drift
72 lit mechanical keycaps tumbling through a 900-spark particle wake.
- Warp Field — Hyperspace
1,200 ice-blue streaks stretched down a scrolling tunnel toward a pulsing jump core.
- 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.
Frequently asked questions
What is a Three.js component?
A Three.js component is a reusable 3D scene, interaction, or visual effect packaged so it can be adapted and added to a website without rebuilding the idea from scratch.
Do ThreeUI components require React?
Each item identifies its runtime and implementation source. Many can be adapted for React, Next.js, or vanilla JavaScript rather than locking the visual idea to one stack.
Can I customize the Three.js source code?
Yes. You can change scene parameters, materials, lighting, camera behavior, motion, responsive rules, and the surrounding interface to suit your project.
Which Three.js components are free?
Community components can be explored without Pro access. Premium items are marked Pro in the gallery so the access level is clear before you open one.