3D Planet: An Interactive Three.js Scene
A 3d planet: an interactive three.js scene built with modern frontend techniques for responsive and reusable UI.
WebGL
84 snippetsExplore WebGL resources for the web — layouts, components, effects, and more. Pick a subsection below to continue.
html-webgl
Snippets(84)
Decomposed Torus in WebGLA decomposed torus in webgl built with modern frontend techniques for responsive and reusable UI.
- ECG Animation with Three.js
A ecg animation with three.js built with modern frontend techniques for responsive and reusable UI.
- Galactic Black Hole Simulation with Three.js
A galactic black hole simulation with three.js built with modern frontend techniques for responsive and reusable UI.
Interactive Mandelbulb FractalA interactive mandelbulb fractal built with modern frontend techniques for responsive and reusable UI.
- Morphing Celestial Forms with Three.js Shader
A morphing celestial forms with three.js shader built with modern frontend techniques for responsive and reusable UI.
Three.js Fractal Glass DistortionA three.js fractal glass distortion built with modern frontend techniques for responsive and reusable UI.
- Three.js Pixel Shader Example
A three.js pixel shader example built with modern frontend techniques for responsive and reusable UI.
Three.js Water and ParticlesA three.js water and particles built with modern frontend techniques for responsive and reusable UI.
Three.js with ShockWave Shader EffectA three.js with shockwave shader effect built with modern frontend techniques for responsive and reusable UI.
Glass Refraction Text Effect with three.jsA glass refraction text effect with three.js built with modern frontend techniques for responsive and reusable UI.
- Text Refraction Animation
A text refraction animation built with modern frontend techniques for responsive and reusable UI.
Three.js TextGeometryA three.js textgeometry built with modern frontend techniques for responsive and reusable UI.
VFX-JS Text Shadow EffectA vfx-js text shadow effect built with modern frontend techniques for responsive and reusable UI.
Neobrutalist Image SliderA neobrutalist image slider built with modern frontend techniques for responsive and reusable UI.
- Shader Image Transition
A shader image transition built with modern frontend techniques for responsive and reusable UI.
Wave and RGB Image Distortion with ShadersA wave and rgb image distortion with shaders built with modern frontend techniques for responsive and reusable UI.
Interactive Particle Hero with Three.js & TailwindA interactive particle hero with three.js & tailwind built with modern frontend techniques for responsive and reusable UI.
Interactive Particle Morphing with Three.js & GLSLA interactive particle morphing with three.js & glsl built with modern frontend techniques for responsive and reusable UI.
Particle Teapot with Glow EffectsA particle teapot with glow effects built with modern frontend techniques for responsive and reusable UI.
Three.js Particle Morphing AnimationA three.js particle morphing animation built with modern frontend techniques for responsive and reusable UI.
- Interactive Glass Lens Effect with Sound
A interactive glass lens effect with sound built with modern frontend techniques for responsive and reusable UI.
Metaballs Hero Section with Three.jsA metaballs hero section with three.js built with modern frontend techniques for responsive and reusable UI.
Cinematic Glitch SlideshowA cinematic glitch slideshow built with modern frontend techniques for responsive and reusable UI.
Three.js Glass Effect with ShaderMaterialA three.js glass effect with shadermaterial built with modern frontend techniques for responsive and reusable UI.
- Ripple Effect with Three.js & GSAP
A ripple effect with three.js & gsap built with modern frontend techniques for responsive and reusable UI.
Three.js Carousel with Shader DistortionA three.js carousel with shader distortion built with modern frontend techniques for responsive and reusable UI.
3D Waves Background with Three.jsA 3d waves background with three.js built with modern frontend techniques for responsive and reusable UI.
- Hexagonal Grid
A hexagonal grid built with modern frontend techniques for responsive and reusable UI.
- Water Ripple Effect with Audio Input
A water ripple effect with audio input built with modern frontend techniques for responsive and reusable UI.
Lighting Cubes GridA lighting cubes grid built with modern frontend techniques for responsive and reusable UI.
Spiral Animation in Three.jsA spiral animation in three.js built with modern frontend techniques for responsive and reusable UI.
Liquid Glass ShaderA liquid glass shader built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSLDifficulty
AdvancedFeatures
GPU acceleration, Refractive distortion, Light flares
3D Glass Photo LensA 3d glass photo lens built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Physically Based Rendering (PBR), Real-time Refraction, Drag & Drop Upload, Procedural GeometryResponsive
Yes
3D Interactive MacBook ModelA 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 Motion Graphics with Three.jsA 3d motion graphics with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.js, JavaScriptFeatures
3D Animation, Texture Mapping, Scrolling Marquee
3D Raymarching WebGL Animation: Little EagleA 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
3D Room with Three.jsA 3d room with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.jsFeatures
Baked Lighting, 3D Diorama, Interactive Scene
3D Soldier Spirit EffectA 3d soldier spirit effect built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScriptDifficulty
AdvancedFeatures
Particle Systems, Post-processing, 3D Lighting
Animated Camera Along a Path with Three.jsA animated camera along a path with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScriptFeatures
Post-processing, Camera Path Animation, Import maps
Christmas Diorama with Three.jsA christmas diorama with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLTF, JavaScriptDifficulty
AdvancedFeatures
3D Animation, Custom Shaders, GLTF Loading
GSAP ScrollSmoother and Three.jsA gsap scrollsmoother and three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScriptFeatures
Smooth Scrolling, 3D Particles, Parallax
Glitch Image Hover Effect with ShadersA glitch image hover effect with shaders built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, three.js, GLSLDifficulty
AdvancedFeatures
RGB split, Digital jitter, Interactive hover, Shader-based animation
Image Displacement with Three.jsA image displacement with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.js, GLSLDifficulty
AdvancedFeatures
Texture Morphing, Simplex Noise, GPU Accelerated
Image Hover Effect with ShadersA image hover effect with shaders built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.js, GLSLDifficulty
AdvancedFeatures
Liquid Distortion, Interactive Cursor Following, GPU Accelerated
Infinite Scrollable and Draggable WebGL GridA infinite scrollable and draggable webgl grid built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSLDifficulty
AdvancedFeatures
Infinite Scrolling, Draggable Interface, Custom Shaders
Interactive 3D Falling Leaves ShaderA interactive 3d falling leaves shader built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 84+, Edge 84+, Firefox 63+, Safari 14.1+Features
Instanced Rendering, Custom GLSL Shaders, Raycasted Interaction, Dynamic Matrix UpdatesResponsive
Yes
Interactive Fireworks with Babylon.js and CSS nth-childA interactive fireworks with babylon.js and css nth-child built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScript, CSS3Difficulty
IntermediateFeatures
Particle Systems, Memory Optimization, Interactive Animation
LUME Shiny 3D Image Grid (Webgl, Three.js)A lume shiny 3d image grid (webgl, three.js) built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, three.jsFeatures
3D Rendering, Interactive Lighting, Reflective ShadersResponsive
Yes
Liquid Morphology Slideshow (Three.js/WebGL)A liquid morphology slideshow (three.js/webgl) built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSL, JavaScriptDifficulty
AdvancedFeatures
Fragment Shaders, Fluid Transitions, GPU AcceleratedResponsive
Yes
Live Clouds with Three.jsA live clouds with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScriptFeatures
Infinite loop, Geometry merging, 3D Animation
NightLight 3D EffectA nightlight 3d effect built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.js, GLSLDifficulty
AdvancedFeatures
Post-processing, UnrealBloomPass, Custom Shaders, 3D Lighting
On-Scroll Fire (Three.js + GSAP)A on-scroll fire (three.js + gsap) built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScriptDifficulty
AdvancedResponsive
Yes
Physically Accurate Material EditorA physically accurate material editor built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, three.js, GLSLFeatures
Physically Based Rendering (PBR), Real-time material editing, Dispersion and Anisotropy simulation
Procedural 3D Endless Runner GameA procedural 3d endless runner game built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 89+, Edge 89+, Firefox 108+, Safari 16.4+Features
Procedural Generation, Lane Movement, Collision Physics, Dynamic ThemesResponsive
Yes
Procedural Low Poly Planet with Three.jsA procedural low poly planet with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Three.js, Simplex NoiseDifficulty
IntermediateFeatures
Procedural Generation, Low Poly Aesthetic, Interactive Hover EffectsResponsive
Yes
Shaders Example #17A shaders example #17 built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSLDifficulty
AdvancedFeatures
Shader Transitions, Image Morphing
Tearing Paper Photo GalleryA 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
Three.js Diorama SceneA three.js diorama scene built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScript, GLTFFeatures
3D Rendering, Baked Textures, Model Loading
WebGL Liquid Texture LoaderA webgl liquid texture loader built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSL, JavaScriptDifficulty
advancedFeatures
Liquid morphing, Texture displacement, Fragment shadersResponsive
Yes
WebGL Morphing Ball with Three.js and GSAPA webgl morphing ball with three.js and gsap built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSLDifficulty
AdvancedFeatures
Vertex Shader Morphing, Procedural Noise, 3D AnimationResponsive
Yes
WebGL Voronoi Particle TransitionA webgl voronoi particle transition built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 90+, Edge 90+, Safari 15+, Firefox 90+Features
Particle System, Custom Shaders, Voronoi Math, Fluid AnimationResponsive
Yes
RgbKineticSlider (WebGL Transitions)A rgbkineticslider (webgl transitions) built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, three.js, GSAPDifficulty
AdvancedFeatures
Displacement Map, Kinetic Scrolling, Hardware Acceleration
Interactive Spectral 3D Ghost EffectA interactive spectral 3d ghost effect built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Cursor Tracking, VHS Glitch, Custom Shaders, Bloom PassResponsive
Yes
3D Sign Up Button with Spline and GSAPA 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 GalleryA 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
CubesA cubes built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Canvas API, JavaScriptDifficulty
AdvancedFeatures
3D Animation, Light Refraction, Infinite Loop
Flipping Clock with LightningJSA flipping clock with lightningjs built with modern frontend techniques for responsive and reusable UI.
Technologies
Canvas API, WebGLDifficulty
AdvancedFeatures
Flip animation, Hardware acceleration
GSAP Pixi RGB GlitchA gsap pixi rgb glitch built with modern frontend techniques for responsive and reusable UI.
Technologies
Pixi.js, GSAP, WebGLDifficulty
AdvancedFeatures
RGB Split, Chromatic Aberration, Real-time Filter
Infinite 3D Poster Scroll WallA 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 SliderA 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
Interactive 3D Workspace DioramaA interactive 3d workspace diorama 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
Baked Lighting, Constrained Orbit, GLTF Loader, Performance OptimizedResponsive
Yes
Interactive Product Hotspots with GSAP and PIXI.jsA interactive product hotspots with gsap and pixi.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Canvas API, JavaScriptFeatures
Magnetic Effects, Hardware Acceleration, Interactive Hotspots
Isometric 3D Little RestaurantA isometric 3d little restaurant 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
Baked Lighting, GLTF Loading, Orbit Controls, High PerformanceResponsive
Yes
Matcap Instanced Disco GeometryA 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 TrailA 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
Oculus II: Immersive 3D Weather StationA oculus ii: immersive 3d weather station built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
3D Parallax, Particle System, Real-time API Data, Procedural TexturesResponsive
Yes
PixiJS Procedural GLSL FlameA pixijs procedural glsl flame built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Fragment Shader, Procedural Noise, Fractal Brownian Motion, Real-time AnimationResponsive
Yes
Shattering Image Gallery TransitionA 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
Three.js GradientA three.js gradient built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScriptFeatures
3D Animation, Low Poly Design, Particle Systems
Twisted Wave GLSL Image GalleryA twisted wave glsl image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScript, GLSL, Three.jsDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
GLSL Shaders, Mouse-Hover Distortion, Scroll-Based Post-Processing, Locomotive ScrollResponsive
Yes
WebGL Fluid Smoke ButtonA webgl fluid smoke button built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 90+, Edge 90+, Firefox 90+, Safari 15+Features
Procedural Generation, Fragment Shader, Fluid Animation, Noise AlgorithmsResponsive
Yes
WebGL Generative Flower CursorA webgl generative flower cursor 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
Fragment Shaders, Ping-Pong Buffering, Generative Art, Interactive PaintingResponsive
Yes
WebGL Liquid Slider TransitionA webgl liquid slider transition built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Canvas API, JavaScriptDifficulty
AdvancedFeatures
Liquid Distortion, RGB Split, Glassmorphism, Displacement MappingResponsive
Yes