Interactive UI components
Browse interactive UI components with polished motion, 3D details, Canvas and WebGL effects, responsive states, and copy-ready source.
- Sunset 3D Energy Chart
Sunset 3D Energy Chart extracted from Sunset 3D, preserving its Japanese solar design, authored assets, motion, and responsive layout.
- Sunseto Energy Chart
Sunseto Energy Chart extracted from Sunseto, preserving its Japanese solar design, authored assets, motion, and responsive layout.
- Sunseto Phone Card
Sunseto Phone Card extracted from Sunseto, preserving its Japanese solar design, authored assets, motion, and responsive layout.
- Sunseto Navigation
Sunseto Navigation extracted from Sunseto, preserving its Japanese solar design, authored assets, motion, and responsive layout.
- Orb Gallery
A slowly turning sphere of interface references, built from 190 non-overlapping gallery plates with hover lift, focus dimming, and inertial drag rotation.
- 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.
- Line Illustrations — Keyboard
An isometric keyboard with reactive keys and a floating command palette.
- Line Illustrations — Lighting
An orbiting light gizmo with responsive shadows and surface shading.
- Line Illustrations — Design Tools
Vector anchors, handles, live guides, snapping, and tool selection.
- Line Illustrations — Globe
A rotating wireframe globe with illuminated routes and regional markers.
- Line Illustrations — Code Tools
An isometric editor with animated completions and inline code tools.
- Line Illustrations — Codex
A stacked agent workspace with interactive task and diff motion.
- Line Illustrations — Claude Code
An isometric terminal agent with animated command rows.
- Line Illustrations — AirPods
A line-drawn charging case with interactive opening and earbuds.
- Line Illustrations — 3D Model
A procedural torus knot on a turntable with drag orbit and hover wireframe.
- Engraved Certificate
A responsive engraved certificate: plate field, dual guilloche rosettes, and a drifting harmonic pass that auto-cycles through four cam states.
- Diagnostics Panel — Layered Planes
Five floating isometric planes with a highlighted top layer and a cropped scan-line core.
- Diagnostics Panel — Node Cubes
Five synchronized wireframe cubes forming a softly animated diagnostic node cluster.
- Diagnostics Panel — Flowing Mesh
An isometric wire mesh that continuously ripples around a focused central peak.
- Skeuomorphic Toggle — Skeuomorphic
The preserved packaged export: a tactile pill with an inset track and a raised sliding thumb.
- Skeuomorphic Toggle — Modern
A flat, hairline-edged switch with a stretching knob, a check-to-dash mark, and one soft accent pool.
- Skeuomorphic Toggle — Glass
An Apple-style Three.js capsule in transmissive glass, refracting a drifting colour field around a lit core.
- Skeuomorphic Toggle — Shader
A raw-WebGL switch drawn entirely in one fragment pass: plasma interior, streaming sparks, chromatic bloom, and a pointer-lit thumb.
- Wireframe Forms — Cube
The prismatic cube study isolated as a single rotating wireframe form.
- Wireframe Forms — Cylinders
The crossed logic cylinders isolated as a single rotating wireframe form.
- Wireframe Forms — Sphere
The nested icosahedral sphere isolated as a single rotating wireframe form.
- 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.
Frequently asked questions
What are Three.js UI components for websites?
They are interface elements enhanced with Three.js, Canvas, or WebGL effects, such as interactive controls, visual feedback, navigation details, and animated product surfaces.
Are these components a WebXR or in-scene UI framework?
No. This collection focuses on website interfaces enhanced by 3D and GPU effects rather than a complete spatial interface system rendered inside a Three.js scene.
Can a Three.js UI effect remain accessible?
Yes. Keep real HTML semantics, keyboard focus, readable labels, and reduced-motion behavior, then use Three.js or WebGL as a progressive visual enhancement.
Can I use these UI components in React or Next.js?
Check each item’s runtime and source. The interaction and visual treatment can usually be integrated into a React or Next.js interface with project-specific adaptation.