3D Effects

18 snippets

Welcome to the 3D Effects resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.

javascript-3d-effects

Snippets(18)

3D Heart Packing
A 3d heart packing built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Lighting Cubes Grid
A lighting cubes grid built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Spiral Animation in Three.js
A spiral animation in three.js built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Extreme Hover with HTML and CSS
A extreme hover with html and css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Interactive 3D Coverflow Gallery
A interactive 3d coverflow gallery built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Inverse Transform Zoom, Box Reflection, Dynamic DOM Generation
Responsive
Yes
3D Interactive MacBook Model
A 3d interactive macbook model built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
GLTF Loading, GSAP Timelines, Orbit Controls, Webcam Integration
Responsive
Yes
3D Raymarching WebGL Animation: Little Eagle
A 3d raymarching webgl animation: little eagle built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
GLSL, WebGL
Difficulty
Advanced
Features
Raymarching, Procedural Generation, Interactive Camera
Responsive
Yes
Tearing Paper Photo Gallery
A tearing paper photo gallery built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS, Babel
Difficulty
Advanced
Browser support
Chrome 90+, Edge 90+, Safari 15+, Firefox 90+
Features
Physics-based Tearing, Custom Shaders, Interactive Geometry, Procedural Texture Generation
Responsive
Yes
Flipping Playing Cards
A flipping playing cards built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Content Card+2 more
Demo Code
Technologies
JavaScript, CSS 3D Transforms, Deck of Cards API
Difficulty
Intermediate
Features
3D Animation, API Integration, Dynamic Content
3D Sign Up Button with Spline and GSAP
A 3d sign up button with spline and gsap built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
WebGL, Canvas API
Difficulty
Advanced
Features
3D Animation, Interactive UI
Responsive
Yes
Cinematic Zoom Blur Image Gallery
A cinematic zoom blur image gallery built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Shader Transitions, Mouse Tracking, Smooth Lerp, GPU Rendering
Responsive
Yes
Cubes
A cubes built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
WebGL, Canvas API, JavaScript
Difficulty
Advanced
Features
3D Animation, Light Refraction, Infinite Loop
Infinite 3D Poster Scroll Wall
A infinite 3d poster scroll wall built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Infinite Scroll, API Integration, WebGL Rendering, Dynamic Textures
Responsive
Yes
Interactive 3D Pricing Card Slider
A interactive 3d pricing card slider built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Content Card+2 more
Demo Code
Technologies
Pug, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
WebGL Rendering, Mouse Tracking, Carousel Slider
Responsive
Yes
Isometric 3D Bouncing Cube Animation
A isometric 3d bouncing cube animation built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
3D Grid, Path Tracking, Canvas Rendering, Isometric View
Responsive
Yes
Matcap Instanced Disco Geometry
A matcap instanced disco geometry built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
WebGL Instancing, Matcap Shading, Geometry Merging, Multi-view Scissor Rending
Responsive
Yes
Neon 3D Tubes Cursor Trail
A neon 3d tubes cursor trail built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Beginner
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
3D Trail, Dynamic Lighting, Procedural Color, High Performance
Responsive
Yes
Shattering Image Gallery Transition
A shattering image gallery transition built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
WebGL Shaders, Instanced Rendering, Scroll Navigation, Mouse Parallax
Responsive
Yes

Snippets(18)

related hubs