A 3d heart packing built with modern frontend techniques for responsive and reusable UI.
3D Effects
18 snippetsWelcome 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
- Lighting Cubes Grid
A lighting cubes grid built with modern frontend techniques for responsive and reusable UI.
- Spiral Animation in Three.js
A spiral animation in three.js built with modern frontend techniques for responsive and reusable UI.
- Extreme Hover with HTML and CSS
A extreme hover with html and css built with modern frontend techniques for responsive and reusable UI.
- Interactive 3D Coverflow Gallery
A interactive 3d coverflow gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Inverse Transform Zoom, Box Reflection, Dynamic DOM GenerationResponsive
Yes - 3D Interactive MacBook Model
A 3d interactive macbook model built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
GLTF Loading, GSAP Timelines, Orbit Controls, Webcam IntegrationResponsive
Yes - 3D Raymarching WebGL Animation: Little Eagle
A 3d raymarching webgl animation: little eagle built with modern frontend techniques for responsive and reusable UI.
Technologies
GLSL, WebGLDifficulty
AdvancedFeatures
Raymarching, Procedural Generation, Interactive CameraResponsive
Yes - Tearing Paper Photo Gallery
A tearing paper photo gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, BabelDifficulty
AdvancedBrowser support
Chrome 90+, Edge 90+, Safari 15+, Firefox 90+Features
Physics-based Tearing, Custom Shaders, Interactive Geometry, Procedural Texture GenerationResponsive
Yes - Flipping Playing Cards
A flipping playing cards built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, CSS 3D Transforms, Deck of Cards APIDifficulty
IntermediateFeatures
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.
Technologies
WebGL, Canvas APIDifficulty
AdvancedFeatures
3D Animation, Interactive UIResponsive
Yes - Cinematic Zoom Blur Image Gallery
A cinematic zoom blur image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Shader Transitions, Mouse Tracking, Smooth Lerp, GPU RenderingResponsive
Yes - Cubes
A cubes built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Canvas API, JavaScriptDifficulty
AdvancedFeatures
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.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Infinite Scroll, API Integration, WebGL Rendering, Dynamic TexturesResponsive
Yes - Interactive 3D Pricing Card Slider
A interactive 3d pricing card slider built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
WebGL Rendering, Mouse Tracking, Carousel SliderResponsive
Yes - Isometric 3D Bouncing Cube Animation
A isometric 3d bouncing cube animation built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
3D Grid, Path Tracking, Canvas Rendering, Isometric ViewResponsive
Yes - Matcap Instanced Disco Geometry
A matcap instanced disco geometry built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
WebGL Instancing, Matcap Shading, Geometry Merging, Multi-view Scissor RendingResponsive
Yes - Neon 3D Tubes Cursor Trail
A neon 3d tubes cursor trail built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
3D Trail, Dynamic Lighting, Procedural Color, High PerformanceResponsive
Yes - Shattering Image Gallery Transition
A shattering image gallery transition built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
WebGL Shaders, Instanced Rendering, Scroll Navigation, Mouse ParallaxResponsive
Yes

















