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)
- 3D Planet: An Interactive Three.js Scene
- Decomposed Torus in WebGL
A 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 Fractal
A 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 Distortion
A 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 Particles
A three.js water and particles built with modern frontend techniques for responsive and reusable UI.
- Three.js with ShockWave Shader Effect
A three.js with shockwave shader effect built with modern frontend techniques for responsive and reusable UI.
- Glass Refraction Text Effect with three.js
A 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 TextGeometry
A three.js textgeometry built with modern frontend techniques for responsive and reusable UI.
- VFX-JS Text Shadow Effect
A vfx-js text shadow effect built with modern frontend techniques for responsive and reusable UI.
- Neobrutalist Image Slider
A 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 Shaders
A wave and rgb image distortion with shaders built with modern frontend techniques for responsive and reusable UI.
- Interactive Particle Hero with Three.js & Tailwind
A interactive particle hero with three.js & tailwind built with modern frontend techniques for responsive and reusable UI.
- Interactive Particle Morphing with Three.js & GLSL
A interactive particle morphing with three.js & glsl built with modern frontend techniques for responsive and reusable UI.
- Particle Teapot with Glow Effects
A particle teapot with glow effects built with modern frontend techniques for responsive and reusable UI.
- Three.js Particle Morphing Animation
A 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.js
A metaballs hero section with three.js built with modern frontend techniques for responsive and reusable UI.
- Cinematic Glitch Slideshow
A cinematic glitch slideshow built with modern frontend techniques for responsive and reusable UI.
- Three.js Glass Effect with ShaderMaterial
A 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 Distortion
A three.js carousel with shader distortion built with modern frontend techniques for responsive and reusable UI.
- 3D Waves Background with Three.js
A 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 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.
- Liquid Glass Shader
A 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 Lens
A 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 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 Motion Graphics with Three.js
A 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 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 - 3D Room with Three.js
A 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 Effect
A 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.js
A 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.js
A 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.js
A 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 Shaders
A 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.js
A 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 Shaders
A 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 Grid
A 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 Shader
A 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-child
A 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.js
A 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 Effect
A 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 Editor
A 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 Game
A 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.js
A 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 #17
A shaders example #17 built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSLDifficulty
AdvancedFeatures
Shader Transitions, Image Morphing - 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 - Three.js Diorama Scene
A 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 Loader
A 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 GSAP
A 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 Transition
A 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 Effect
A 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 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 - Flipping Clock with LightningJS
A 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 Glitch
A 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 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 - Interactive 3D Workspace Diorama
A 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.js
A 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 Restaurant
A 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 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 - Oculus II: Immersive 3D Weather Station
A 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 Flame
A 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 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 - Three.js Gradient
A 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 Gallery
A 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 Button
A 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 Cursor
A 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 Transition
A 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









































































