40+ JavaScript Image Effects

An advanced scroll-driven WebGL experience powered by Three.js and GSAP. A fixed background canvas uses InstancedMesh to render nearly 50,000 distinct 3D cube particles, colored dynamically by extracting color values from an image mapped onto a hidden canvas. As the user scrolls down the page, the camera’s Z-axis position transitions, causing the scattered cubes to seamlessly converge into a photographic portrait. (Requires: three.js, gsap.js)

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)

An advanced WebGL filter engine that transforms CORS-enabled images and videos into refractive stained glass structures. Operating on custom fragment shaders, the canvas allows users to toggle procedural cell geometries — including hexagon, triangle, and diamond tiles — while dynamically adjusting chromatic aberration offsets, drag-and-drop panning, spotlight coordinate tracking, and mathematical ripple distortions.

This is a PixiJS Displacement Ripple Zoom. It transforms a static background image into an interactive, liquid-like surface that expands outward from the user’s cursor upon clicking. Its function is to serve as a dramatic, cinematic entrance animation for hero sections or landing pages, shifting visual focus while seamlessly introducing secondary UI elements. (Requires: pixi-js, gsap-js, SplitText.js)

This is a Halloween 2.5D Parallax Shader. It utilizes Three.js and custom GLSL shaders to transform a flat 2D image into an interactive, volumetric scene with dynamic lighting, fog, and depth distortion. Its function is to provide a deeply immersive, narrative-driven hero section, elevating static artwork into an interactive spatial environment without requiring full 3D models. (Requires: three.js)

This is a WebGL Lens Distortion Hover. It manipulates a raster image through a custom GLSL fragment shader to create a dynamic, fish-eye bulging effect. Its function is to replace static CSS opacity or scale transitions with a high-fidelity optical illusion, drawing profound tactile focus to portfolio or hero imagery. (Requires: GSAP, Curtains.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 WebGL Liquid Distortion Typography Mask. It uses fluid simulation to distort a background image, revealed only through a vector cutout. Its function is to transform standard text headers into deeply interactive, kinetic focal points. (Requires: OGL.js, TweenMax.js)

This is a Native Cross-Fade View Transition Gallery. It updates a central image source triggered by thumbnail interactions. Its function is to smooth out abrupt visual DOM updates using the browser’s built-in rendering engine, entirely eliminating the need for external animation payloads or CSS opacity toggles.

This is a Smooth Parallax Image Scroll Gallery. It translates vertical scroll progression into independent Y-axis movement for masked images. Its function is to create a sense of depth and momentum, elevating standard vertical feeds into immersive visual narratives. (Requires: gsap-js, scroll-trigger-js, lenis-js)

This is an Interactive Zoom SVG Comic Viewer. It dynamically scales and spotlights individual comic panels within a massive, high-resolution raster image. Its function is to translate the physical experience of reading a comic book into a guided, cinematic digital flow, focusing user attention without losing the context of the page. (Requires: Gsap.js, Rx.js)

This is an Interactive Canvas Particle Image Effect. It reconstructs standard raster images using thousands of autonomous floating particles. Its function is to create a highly tactile visual experience that reacts to cursor proximity, morphing colors based on hidden alternate image data to remove the static barrier between user and interface. (Requires: GSAP)

This is a Draggable Image Track Parallax component. It replaces standard scrollbars with a custom, click-and-drag horizontal interface. Its function is to provide a highly kinetic, app-like browsing experience for image galleries, featuring an internal parallax effect where the images pan slightly inside their frames as the entire track moves.

This is a Twisted Wave GLSL Image Gallery. It’s a high-performance, full-screen WebGL experience that uses custom shaders to create sophisticated visual effects. Its function is to transform a standard image carousel into a cinematic journey with two distinct interactions: a localized sine-wave distortion on mouse hover and a global radial blur that intensifies with the speed of the scroll. (Requires: Three.js, GSAP, Locomotive Scroll, Maku.js, imagesLoaded)

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 an Interactive Feather Reveal 404 Page. It utilizes the Canvas 2D API to transform a sterile error screen into a generative digital canvas. The component records user movement to stamp intricate feather-shaped paths that alternate between solid black fills and clipped fragments of external bird photography. (Requires: GSAP, Lodash)

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 a Hover Image Reveal Custom Cursor. It overrides the default pointer with a dynamic element that transforms upon interacting with specific text links. Its function is to provide visual context — revealing associated images — without cluttering the primary layout. The effect creates an engaging reading experience, bridging text and multimedia seamlessly.

This 3D Glass Photo Lens creates a stunning, tactile digital object - a thick glass block that refracts user-uploaded photos. Built with Three.js, it simulates the physics of light (transmission, IOR, thickness) to produce high-fidelity glass renders directly in the browser. Users can change the lens shape (Heart, Square, Hexagon), adjust the glass tint, and even modify the environmental lighting to see how reflections dance across the beveled edges. (Requires: Three.js)

This Ink Transition Scroll Effect brings digital storytelling to life by mimicking the organic spread of ink on paper. Designed for a biography page, it reveals images using a “splatter” transition triggered by scrolling. It combines ScrollMagic for timing, GSAP for smooth text entry, and CSS Sprites for the complex ink mask animation. (Requires: ScrollMagic, GSAP)

This Interactive Canvas Liquid Image Distortion transforms a static image into a playful, fluid surface. By subdividing the image into a grid of tiny cells, the script manipulates the texture coordinates of each cell in response to mouse movement. The result is a “jelly-like” or refractive glass effect where the image appears to warp and ripple under the user’s cursor.

A calm static image that, upon hover, jitters, splits into RGB channels in bands, and slowly zooms in, evoking a digital glitch or cyberpunk atmosphere.

An interactive “liquid” image distortion effect powered by Three.js and custom GLSL shaders.

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 unique, visually impressive effect where the user moves a “liquid,” morphing lens to compare two scenes, demonstrating advanced use of SVG and DOM manipulation for visual UX.

A highly specialized, GPU-accelerated image transition component built on Three.js.

A high-end, editorial-style web design where content appears smoothly and coordinately, creating a sense of premium quality and attention to detail.

A real-time glitch art generator powered by p5.js, manipulating image data at the pixel level.

A dynamic, broken image featuring twitching scanlines, color channel shifts, and geometric distortions, reminiscent of digital signal interference or vintage TV static.

Explore a variety of sophisticated hover effects, where complex animation patterns are created using advanced CSS selectors like :nth-child(-n + 3). These selectors target specific ranges of “cells” generated by Splitting.js.