CRT-Style Effect with VFX.js
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)
- SVG Filter Scroll Reveal
A svg filter scroll reveal built with modern frontend techniques for responsive and reusable UI.
SVG Mask Image SlideshowA svg mask image slideshow built with modern frontend techniques for responsive and reusable UI.
SVG Mask Waterfall Image RevealA 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 #15A 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 AnimationA 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 EffectA dynamic svg glitch effect built with modern frontend techniques for responsive and reusable UI.
Glitchify Image V4A 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 EffectA photo inview animation: venetian blinds effect built with modern frontend techniques for responsive and reusable UI.
Smooth Parallax Image Scroll GalleryA 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 AnimationA gsap sprite mask animation built with modern frontend techniques for responsive and reusable UI.
Hover Image Reveal Custom CursorA 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 CSSA extreme hover with html and css built with modern frontend techniques for responsive and reusable UI.
Image Hover EffectA image hover effect built with modern frontend techniques for responsive and reusable UI.
Interactive Zoom SVG Comic ViewerA 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.jsA fancy image hover effects with splitting.js built with modern frontend techniques for responsive and reusable UI.
Ink Transition Scroll EffectA 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 ShaderA 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 LensA 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 ShadersA 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.jsA 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 ShadersA 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 ParallaxA 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 GalleryA 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 EffectA 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 GalleryA 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.jsA 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 DistortionA 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 EffectA 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 PageA 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 TransitionA 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 GalleryA 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 ImageA 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