20+ JavaScript 3D Effects

An advanced visual sandbox showcasing a highly configurable multi-layered image deck. Users can tweak live variables in real time — including 3D perspective depth offsets, pointer tilt multipliers, rotation spreads, chromatic saturation filters, and custom CSS clip-path geometries (hexagon, diamond, circle, rectangle). Features smooth velocity mouse tracking using GSAP quickTo alongside direct CSS Custom Property overrides. (Requires: gsap.js)

This is a WebGL RGB Shift Image Card. It renders a high-resolution raster image onto a 3D geometric plane, applying dynamic visual distortions based on pointer intersection. Its function is to elevate standard portfolio grids or hero sections into highly tactile, immersive experiences, replacing standard CSS transitions with complex mathematical pixel manipulation. (Requires: Three.js, GSAP)

This is a Cinematic Zoom Blur Image Gallery. It utilizes custom GLSL fragment shaders and Three.js to create a high-fidelity transition between image textures. Its function is to provide an immersive navigational layer for visual portfolios, where spatial depth and radial blur replace standard linear crossfades. (Requires: Three.js, GSAP)

This is a 3D Interactive MacBook Model. It utilizes Three.js to load, texture, and animate a high-fidelity .glb model of a laptop. Its function is to create a premium, cinematic product showcase, replacing static hero images with a fully interactive WebGL scene that animates through a complex opening and booting-up sequence. (Requires: Three.js, GSAP, lil-gui)

This is a Matcap Instanced Disco Geometry demo. It renders multiple unique 3D geometries (Torus Knot, Icosahedron, Torus) using the WebGL Instanced Mesh technique. Instead of drawing individual planes for every mirror on the surface of the shape, it creates one InstancedMesh per object, mathematically orienting thousands of tiny reflective mirrors to mimic a faceted, crystal-like disco surface. (Requires: Three.js)

This is a Shattering Image Gallery Transition. It utilizes the WebGL API via Three.js to deconstruct 2D images into a matrix of 3D particles. Its function is to replace standard fade or slide slideshows with a highly cinematic, physics-based explosion effect, transitioning between photographs by blowing the current image apart to reveal the next one underneath. (Requires: ThreeJS, GSAP)

This is an Infinite 3D Poster Scroll Wall. It constructs a dense, continuous grid of cinematic assets rendered entirely in WebGL. Its function is to provide a visually overwhelming, highly performant “hero” background that automatically fetches live data from an external API and perpetually scrolls along a tilted perspective plane. (Requires: ThreeJS)

This is an Isometric 3D Bouncing Cube Animation. It utilizes the Zdog.js engine to render a pseudo-3D geometric scene onto a flat HTML Canvas. Its function is to provide an engaging, continuous background animation where a wandering cube paints a trail across a structural grid, adding depth and kinetic energy to otherwise static hero sections. (Requires: Zdog)

This is an Interactive 3D Pricing Card Slider. It integrates WebGL geometric renders into a standard product tier UI. Its function is to convert static pricing options into an engaging, tactile spatial experience. (Requires: three.js, swiper.js)

This is an Interactive 3D Coverflow Gallery. It organizes visual media into a spatial environment. Its function is to replace flat grids with depth-based navigation, using mathematical inverse transformations to zoom into selected items seamlessly.

This Neon 3D Tubes Cursor Trail brings high-end motion graphics to the web browser. Using the power of WebGL and Three.js, it generates a serpentine trail of glowing 3D geometry that fluidly follows the user’s input. The effect features dynamic lighting that casts soft glows on the tubes, and it includes a built-in interaction where clicking the screen instantly randomizes the color palette, keeping the visual experience fresh. (Requires: threejs-components (External Lib))

This Tearing Paper Photo Gallery is a technical marvel that simulates the physical act of ripping a photograph in half. Unlike simple 2D masking effects, this component uses WebGL (Three.js) to deform the geometry in 3D space. As the user drags downward, the “paper” mesh splits, rotates, and tears along a procedural edge, complete with lighting and shadow effects generated by custom shaders. (Requires: Three.js, GSAP)

A detailed procedural 3D eagle flying over a desert, rendered via raymarching. Features animated wings and legs, a math-generated environment (sky, sun, sand), and interactive camera rotation on mouse drag.

A mesmerizing 3D animation of cascading playing cards fetched dynamically from the Deck of Cards API via JavaScript.

An infinite, psychedelic flight through a field of glass cubes that refract light and respond to camera interaction, creating a deep immersion into a tumbling crystalline structure.

A visually dynamic and impressive effect where hovering over a static image transforms it into a complex, 3D-like collage, showcasing the capabilities of CSS transitions and imperative loading control.

A 3D scene from Spline is loaded using the Spline Runtime, and its objects are brought to life with programmatic animation in GSAP. This approach allows you to avoid low-level WebGL by using a powerful timeline to create complex interactive scenarios, with the code already containing stubs for finding and controlling objects.

This demo uses the ANGLE_instanced_arrays extension to efficiently animate a volumetric grid of cubes. See how a single regl command can handle complex transformations and lighting for every instance.