A massive, production-grade collection of 100 interactive 3D web components and UI elements engineered for a tactile, physical feel. Built with React, Tailwind CSS, and Framer Motion, every component achieves 100% hardware-accelerated 60FPS performance — zero WebGL required.
🏆 The largest open-source collection of spatial, physics-based web UI elements on GitHub.
- ✨ Key Features
- 🛠️ Tech Stack
- 📂 Full Component Directory (1–100)
- 🎨 Design Philosophy
- 🚀 Quick Start
- ❓ FAQ
- 🤝 Contributing
- 📄 License
| Feature | Description |
|---|---|
| 🎯 100% Tactile | Every interaction has weight, inertia, and physical momentum via spring physics. |
| ⚡ Zero WebGL | Runs entirely on the DOM using translate3d, scale3d, and rotate — locked at 60FPS. |
| 🌈 Modern Aesthetics | Glassmorphism, iridescent gradients, procedural noise, and chromatic aberration. |
| 🚀 ESM Ready | No build step. Imports React & Framer Motion directly from ESM CDNs. |
| 📦 Self-Contained | Each component is a single .html file. Copy, paste, and ship. |
| 🖥️ Laptop Friendly | Optimized for 8GB RAM machines using will-change and GPU compositing. |
| # | Component | Description |
|---|---|---|
| 01 | 3D Button | Physical depth button with shadow layers and press animation. |
| 02 | Elastic Toggle | Squishy ON/OFF switch with spring overshoot. |
| 03 | Morphing Input | Input field that physically shifts shape on focus. |
| 04 | Magnetic Card | Hover-reactive card with 3D tilt tracking. |
| 05 | Sculpted Progress | 3D extruded progress bar with depth shading. |
| 06 | Notification Block | Stacked 3D notification toasts. |
| 07 | Curved Menu | Radial context menu with arc positioning. |
| 08 | Pressure Rating | Star rating with squeeze-pressure physics. |
| 09 | Product Showcase | 3D product viewer with orbit controls. |
| 10 | Glassmorphism Shapes | Frosted glass geometric primitives. |
| # | Component | Description |
|---|---|---|
| 11 | Cyber Globe | Rotating wireframe earth with data points. |
| 12 | Liquid Distortion | Mouse-reactive liquid ripple image effect. |
| 13 | Auth Flip | 3D card flip between login and signup. |
| 14 | Infinite Tunnel | Procedural infinite depth tunnel. |
| 15 | Magnetic Buttons | Buttons that magnetically snap to cursor. |
| 16 | Particle Text | Text formed from thousands of particles. |
| 17 | Carousel Slider | 3D coverflow-style image carousel. |
| 18 | Holographic Ticket | Prismatic hologram boarding pass. |
| 19 | Snow | Realistic particle snowfall system. |
| 20 | Origami Menu | Paper-fold navigation menu. |
| # | Component | Description |
|---|---|---|
| 21 | Fluid Aurora | Animated aurora borealis background. |
| 22 | Gooey Cursor | SVG filter gooey trail cursor. |
| 23 | Zen Garden | Interactive CSS zen garden scene. |
| 24 | Voxel Loader | 3D voxel-based loading animation. |
| 25 | Spotlight Reveal | Mouse-following spotlight content reveal. |
| 26 | Matrix Rain | Canvas-rendered digital rain. |
| 27 | Kinetic Typography | Animated text with physics. |
| 28 | Bento Grid | Masonry-style responsive bento layout. |
| 29 | Interactive Timeline | Scroll-driven 3D timeline. |
| 30 | Morphing Blob | Organic shape-shifting blob. |
| # | Component | Description |
|---|---|---|
| 31 | Looking Glass | Magnifying lens with depth layers. |
| 32 | FAQ Accordion | Clickable 3D expanding FAQ cards. |
| 33 | Conversion Funnel | 3D bar chart conversion visualization. |
| 34 | Form Tracker | Multi-step checkout flow tracker. |
| 35 | Architecture Layers | Exploded 3D tech stack diagram. |
| 36 | Rolodex Testimonials | Rotating 3D testimonial cards. |
| 37 | Blackhole 404 | Gravitational 404 error page. |
| 38 | Magnetic Navbar | Navigation with magnetic hover physics. |
| 39 | Cylinder Tabs | Rotating cylindrical tab switcher. |
| 40 | Ribbon Dropdown | Unfurling ribbon-style dropdown. |
| # | Component | Description |
|---|---|---|
| 41 | Cryptex Datepicker | Mechanical rotating date selector. |
| 42 | Physics Multiselect | Tag input with spring collision physics. |
| 43 | Matrix Grid | Interactive data matrix visualization. |
| 44 | Reverse Shell Tunnel | Terminal-style depth tunnel. |
| 45 | Topographical Map | Contour-line elevation map. |
| 46 | Fluid Plane | Deformable mesh surface. |
| 47 | Mechanical Checkbox | Industrial lever-style checkbox. |
| 48 | Add to Cart | Spatial "throw into cart" animation. |
| 49 | Social Share | Expanding radial social buttons. |
| 50 | Split Flap Search | Airport departure board search. |
| # | Component | Description |
|---|---|---|
| 51 | Tethered Tooltip | Physically tethered floating tooltip. |
| 52 | Prism Theme Switcher | Light/dark mode with prism refraction. |
| 53 | Spatial Pricing Table | 3D tiered pricing comparison. |
| 54 | 3D Cookie Drawer | Pull-out cookie consent drawer. |
| 55 | Multi-Select Tag | Spring-physics tag input system. |
| 56 | Spatial Dropzone | 3D file drag-and-drop zone. |
| 57 | Spatial Comparison | Side-by-side comparison matrix. |
| 58 | Shopping Cart Tracker | Physics-based cart badge counter. |
| 59 | Notification Stacker | Stacking toast notification system. |
| 60 | Flip Clock | Mechanical split-flap countdown. |
| # | Component | Description |
|---|---|---|
| 61 | Spatial Mega Menu | Full-width 3D navigation menu. |
| 62 | Spatial Kanban | Drag-and-drop Kanban with depth. |
| 63 | Broken Link 404 | Shattered glass 404 page. |
| 64 | Isometric Layers | Isometric exploded-view layers. |
| 65 | Mechanical Button | Industrial press-down button. |
| 66 | Anatomy Exploder | Component anatomy breakdown. |
| 67 | Venetian Blinds | Page transition with blind-slat effect. |
| 68 | Mail Slot Newsletter | Physical mail-slot email signup. |
| 69 | Holographic Testimonial | Rainbow-reflective review cards. |
| 70 | Spatial Bento Grid | Layout-morphing interactive bento. |
| # | Component | Description |
|---|---|---|
| 71 | Morphing Dropdown | Fluid navigation dropdown system. |
| 72 | Spatial Context Menu | Right-click 3D context menu. |
| 73 | Isometric Conveyor | Animated isometric conveyor belt. |
| 74 | Command Palette ⌘K | Global search with gliding highlights. |
| 75 | Empty State Box | "Lost in Space" immersive empty state. |
| 76 | Spatial Table Row | Inline row expansion with background recession. |
| 77 | Morphing Pill Navbar | Scroll-triggered glassmorphic pill nav. |
| 78 | Gliding Tabs | Holographic app dock with gliding highlight. |
| 79 | AI Neural Input | Conic-gradient input with star particles. |
| 80 | Fluid Mesh Gradient | Iridescent liquid silk background. |
| # | Component | Description |
|---|---|---|
| 81 | Cyber-Grid Background | Topographical gravity-well canvas grid. |
| 82 | Smooth Scroll Wrapper | Inertia-based scroll hijack with springs. |
| 83 | Parallax Depth Map | Multi-layered Z-index depth diorama. |
| 84 | Magnetic Blend Cursor | Velocity-driven stretch & squash cursor. |
| 85 | Liquid Page Transition | Route-based occlusion transitions. |
| 86 | Velocity Skew Grid | Scroll-momentum image skewing. |
| 87 | Push-Reveal Footer | Fixed footer curtain reveal. |
| 88 | Dynamic Island CTA | Velocity-driven morphing toolbar. |
| 89 | Spy Nav Headers | Intersection-observer sidebar nav. |
| 90 | Spotlight Tracking Grid | Mouse-tracking illumination grid. |
| # | Component | Description |
|---|---|---|
| 91 | Scroll Unveil Typography | Kinetic text-slice scroll reveal. |
| 92 | Split-Text Stagger | Kinetic typography entrance. |
| 93 | Smartphone App Showcase | Vertical scrollytelling phone tour. |
| 94 | Liquid Circular HUD | Radial clip-path overlay menu. |
| 95 | Blur-Up Image Loader | Progressive loading with blur-up. |
| 96 | Aurora Mesh + Noise | Procedural aurora with SVG film grain. |
| 97 | Prismatic Volumetric Beams | Hardware-accelerated light rays. |
| 98 | Architectural Blueprint | Dynamic measurement guide lines. |
| 99 | Obsidian Glow Surface | Frosted glass with reactive magma core. |
| 100 | Grainy Analog Shadows | Lo-fi noise with heavy lagging shadows. |
Every component exists in a simulated 3D space. We reject flat, lifeless UIs.
| Principle | Implementation |
|---|---|
| Z-Axis Depth | Elements cast physical shadows and have architectural height via translateZ. |
| Spring Physics | No linear tweens. We define how objects move with stiffness, damping, and mass. |
| Optical Refraction | Simulated glass and light using backdrop-filter and mix-blend-mode. |
| GPU Compositing | 100% transform: translate3d() animations bypass the CPU entirely. |
git clone https://github.com/IntelliSaad/100-3d-web-elements.git
cd 100-3d-web-elements
npx -y live-server --port=8080All components are self-contained. Copy any .html file into your project — all dependencies (React, Tailwind, Framer Motion) are loaded via CDN. Zero configuration required.
📁 components/
└── 84-magnetic-blend-cursor/
└── cursor.html ← Just open this file!
It's a design approach that uses CSS 3D transforms (translateZ, rotateX, perspective) to create depth and physicality in standard DOM elements — without needing WebGL or Three.js.
Yes! Each component's React logic can be extracted and used directly. The inline CDN imports can be replaced with your project's npm packages.
Yes. Every animation uses will-change: transform and translate3d() to force GPU compositing, achieving a locked 60FPS even on 8GB RAM laptops.
No. Every component loads React, Tailwind, and Framer Motion from ESM CDNs. Just open the .html file in a browser.
Contributions are welcome! See CONTRIBUTING.md for guidelines.
Distributed under the MIT License. See LICENSE for more information.
Engineered with physical intent by Muhammad Saad Ullah
If this library helped you, consider giving it a ⭐