A crt-style effect with vfx.js built with modern frontend techniques for responsive and reusable UI.
Image Effects
38 snippetsWelcome to the Image Effects resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-image-effects
Snippets(38)
- CRT-Style Effect with VFX.js
- SVG Filter Scroll Reveal
A svg filter scroll reveal built with modern frontend techniques for responsive and reusable UI.
- SVG Mask Image Slideshow
A svg mask image slideshow built with modern frontend techniques for responsive and reusable UI.
- SVG Mask Waterfall Image Reveal
A svg mask waterfall image reveal built with modern frontend techniques for responsive and reusable UI.
- SVG Stroke Animation with Anime.js
A svg stroke animation with anime.js built with modern frontend techniques for responsive and reusable UI.
- Shaders Example #15
A shaders example #15 built with modern frontend techniques for responsive and reusable UI.
- Canvas Hover Grid Portfolio
A canvas hover grid portfolio built with modern frontend techniques for responsive and reusable UI.
- Repetition Image Animation
A repetition image animation built with modern frontend techniques for responsive and reusable UI.
- WebGL Grid Gallery
A webgl grid gallery built with modern frontend techniques for responsive and reusable UI.
- Dynamic SVG Glitch Effect
A dynamic svg glitch effect built with modern frontend techniques for responsive and reusable UI.
- Glitchify Image V4
A glitchify image v4 built with modern frontend techniques for responsive and reusable UI.
- Broken Glass Effect (On Click)
A broken glass effect (on click) built with modern frontend techniques for responsive and reusable UI.
- Photo Inview Animation: Venetian Blinds Effect
A photo inview animation: venetian blinds effect built with modern frontend techniques for responsive and reusable UI.
- Smooth Parallax Image Scroll Gallery
A smooth parallax image scroll gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 108+, Edge 108+, Firefox 101+, Safari 15.4+Features
Smooth Scroll, Scroll Tracking, Parallax Offset - GSAP Sprite Mask Animation
A gsap sprite mask animation built with modern frontend techniques for responsive and reusable UI.
- Hover Image Reveal Custom Cursor
A hover image reveal custom cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 16+, Firefox 54+, Safari 10.1+Features
Custom Cursor, Image Reveal, State Delegation, Blend Modes - Extreme Hover with HTML and CSS
A extreme hover with html and css built with modern frontend techniques for responsive and reusable UI.
- Image Hover Effect
A image hover effect built with modern frontend techniques for responsive and reusable UI.
- Interactive Zoom SVG Comic Viewer
A interactive zoom svg comic viewer built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 49+, Edge 79+, Firefox 51+, Safari 10+Features
Panel Zooming, Spotlight Mask, Keyboard Nav, Swipe Nav - Fancy Image Hover Effects with Splitting.js
A fancy image hover effects with splitting.js built with modern frontend techniques for responsive and reusable UI.
- Ink Transition Scroll Effect
A ink transition scroll effect 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
Sprite Animation, Scroll Trigger, SVG Filter Liquify - 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 - 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 - 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 - Draggable Image Track Parallax
A draggable image track parallax built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Drag and Drop, Internal Parallax, Web Animations API, Touch SupportResponsive
Yes - Native Cross-Fade View Transition Gallery
A native cross-fade view transition gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 111+, Edge 111+, Firefox 131+, Safari 18+Features
View Transitions, Cross-Fade, Event Delegation, Feature DetectionResponsive
Yes - Efficient Image Scroll Zoom Effect
A efficient image scroll zoom effect built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, CSS, HTMLDifficulty
intermediateFeatures
Scroll-triggered scaling, Intersection Observer optimizationResponsive
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 - Generative Glitch Effect with p5.js
A generative glitch effect with p5.js built with modern frontend techniques for responsive and reusable UI.
Technologies
p5.js, Canvas APIDifficulty
IntermediateFeatures
Generative Art, RGB Shift, Pixel Manipulation - Interactive Canvas Liquid Image Distortion
A interactive canvas liquid image distortion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 4+, Edge 12+, Firefox 3.6+, Safari 4+Features
Canvas API, Grid System, Mouse Interaction, Image SlicingResponsive
Yes - Interactive Canvas Particle Image Effect
A interactive canvas particle image effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Particle System, Color Extraction, Hover RevealResponsive
Yes - Interactive Feather Reveal 404 Page
A interactive feather reveal 404 page built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 45+, Edge 12+, Firefox 31+, Safari 9+Features
Dynamic Clipping, Pattern Stamping, Event ThrottlingResponsive
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 - 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 - P5.js Glitch Image
A p5.js glitch image built with modern frontend techniques for responsive and reusable UI.
Technologies
p5.js, JavaScript, HTML5 CanvasDifficulty
intermediateFeatures
Pixel manipulation, Real-time rendering, Generative art
































