36 JavaScript Image Effects

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.

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.

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.

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.

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.

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.

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.

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.

Experience a dynamic, generative glitch effect where the visuals are created in real-time within the p5.js draw() loop. The animation combines a sequence of pixel shifts, line flows, and RGB channel separation to create a unique, non-repeating visual every time the code runs.

This captivating slideshow is powered by a gsap.timeline that orchestrates a sophisticated “wipe” transition using an SVG <mask>. The timeline animates the xPercent of dynamically generated <rect> elements to reveal an image, while a simple setInterval function cycles through an array of content, updating the text and image source every 10 seconds to create a seamless, self-playing visual loop.

This captivating waterfall-style image reveal showcases a powerful synergy between technologies. A JavaScript for loop procedurally generates a series of <rect> elements within an SVG <mask>, which are then animated by GSAP in a continuous, yoyo-ing loop. The mesmerizing, chaotic effect is achieved using a random stagger (from: 'random') and a dramatic expo.easeInOut ease, creating a seamless and performant animation.

A texture morphing effect with 3D rotation on hover, implemented using Three.js and shaders (GLSL). The fragment shader uses the snoise3 function (simplex noise) to create an organic mixing mask for blending two images.

The demo uses GSAP to programmatically control the CSS mask property and applies the ease: steps() function for precise, frame-by-frame switching between 20 sprite mask states, creating a drawing or layered revelation effect.

A high-performance 3D gallery leveraging WebGL for rendering an interactive image grid with a reflective (shader) effect and realistic cursor-driven lighting, implemented atop LUME.

Dynamic control over GPU effects, including 3D-deforming ripples (Vertex Shader) on click and animated reveal masks by smoothly driving shader uniforms with GSAP timelines.

A demo of the scroll zoom effect via dynamic element visibility calculation and utilizing the Intersection Observer API for performance enhancement.

Technically, this GSAP and vanilla JS demo creates a multi-layered parallax effect, where each layer responds to mouse movement, and a drag gesture adds complex 3D rotation. The code is flexible, allowing you to switch between different shapes and visual styles.

This demo is a powerful example of using WebGL for image processing directly on the GPU with shaders, which allows for impressive effects like a lens and light flares with high performance.