Dev Design LibraryAnimated Image Effect Components
Dev Design Library indexes 80 Animated image effect components from 17 open-source UI libraries, with the most coming from Canvas UI, React Bits, Kinetics, Componentry and GreatUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the image effect components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Image effect components belong to the Effects group.
CrtwarpReact Bits · ReactFull-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.
BacklightMagic UI · ReactA backlight glow effect for videos, images, and SVGs.
Dither ImageCult UI · ReactCompound Next.js image figure with CSS Bayer dither via dither-plugin, partial reveal overlays, and typed tuning props
Ascii SweepCanvas UI · ReactAn ascii band that rewrites the whole page as it sweeps.- Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
Page Turn CurlAmicro Micro Transitions · ReactRising paper sheet with dynamic corner curling border-radius transition.
Holographic Scan RevealSpectrum UI · Reactcomponent for the Holographic Scan Reveal
Ascii Glitch RippleVengeance UI · ReactDynamic character-scramble wave ripple hover effect
Anamorphic FlareKinetics · HTML/CSSA point source rakes the frame and blooms horizontal streaks
Ascii EffectComponentry · ReactRender images as responsive ASCII artwork with image, flow, and glitch variations.
Pixel ImageAnimations (Svelte) · SvelteAn image component that reveals itself through a pixelated grid animation with optional grayscale to color transition.
Image SplitBadtz UI · ReactThis component provides a dynamic and visually captivating way to display images split into multiple sections.
Hover ImgObsidianUI · React
Ascii ImageGreatUI · React
Lens RevealUI Lab · ReactA lens follows your cursor and shows the specs hidden under a card.
Image TrailCojeev UI · ReactDistance-triggered image impressions follow the pointer and fade away.
Chromatic ImageAceternity UI · React
Glare HoverReact Bits · ReactAdds a realistic moving glare highlight on hover over any element.
Pixel ImageMagic UI · ReactA component that displays an image with a pixelated effect, creating a retro aesthetic.
Shader Lens BlurCult UI · ReactWebGL shader component with lens blur effects and mouse interaction
AsciifyCanvas UI · ReactAn ascii lens that follows your cursor.
Caustic GlassKinetics · HTML/CSSShifting light pools refract beneath frosted glass
Dithered LogoComponentry · ReactAn interactive particle logo that turns image assets into a dithered canvas field with cursor ripples.
Fancy Pixelate Svg FilterAnimations (Svelte) · Svelte
Image TrailBadtz UI · ReactImage Trail adds a dynamic, interactive trail of images that follows the cursor, enhancing user engagement and visual…
Frosted Glass RevealGreatUI · React
Glass LensUI Lab · React
Dither ShaderAceternity UI · React
Halftone RevealReact Bits · ReactPrint-style halftone dot matrix that resolves into sharp content around the cursor.
BendCanvas UI · ReactHow strongly unrevealed content smears around the reveal edge in CSS pixels.
Chromatic SplitKinetics · HTML/CSSType separates into prismatic channels, then snaps back
Hover TransitionComponentry · ReactEight polished hover transitions with per-card animation, direction, color, and content controls.- BacklightAnimations (Svelte) · SvelteAn SVG filter wrapper that adds a soft, saturated backlight glow around the content it wraps.
Pixel DistorsionBadtz UI · ReactAn interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect…
Image Hover RevealGreatUI · React
Pixelated CanvasAceternity UI · React
Image TrailReact Bits · ReactCursor-based image trail with several built-in variants.
BlazeCanvas UI · ReactFire, smoke, and heat rising over the page.
Lenticular ShiftKinetics · HTML/CSSMicro-ridges swap one word for another as the angle changes
Image Ripple EffectComponentry · ReactWebGL-powered cursor ripples that displace layered image cards in real time.
Pixel To Ascii ImageGreatUI · React
Webcam Pixel GridAceternity UI · React
Paper CrumpleReact Bits · ReactAn image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a…
BubbleCanvas UI · ReactA glassy droplet trailing the cursor.
Moir LensKinetics · HTML/CSSCounter-rotating line fields create impossible depth
Pixel Image TrailComponentry · ReactAn image reveal made from cursor-painted squares that expire into a bounded pixel trail.
Pixel SwapReact Bits · ReactPixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and…
CanvasCanvas UI · ReactThe page painted onto canvas, with a brush for a cursor.
Polarized FoilKinetics · HTML/CSSA muted spectrum appears only at grazing angles
Pixel TransitionReact Bits · ReactPixel dissolve transition for content reveal on hover.
ClothCanvas UI · ReactHangs the page on rippling fabric.
Rack FocusKinetics · HTML/CSSDepth of field pulls between two planes, bokeh blooming
Ripple DistortionReact Bits · ReactPointer-driven water displacement that warps content and leaves a decaying wake.
CloudsCanvas UI · ReactTheme-aware mist parted by cursor wind.
Specular OrbitKinetics · HTML/CSSA soft highlight circles a brushed dark surface
ScannerReact Bits · ReactCalm interference bands sweeping across the screen like an oscilloscope.
Decrypt RevealCanvas UI · ReactUI encrypted into ASCII, decoded by the cursor.
Volumetric ShaftKinetics · HTML/CSSLight rakes through a slot and pools in drifting dust
ShredderReact Bits · ReactA list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and…
DisplacementCanvas UI · ReactGrid cells shearing the page apart under the cursor.
Sticker PeelReact Bits · ReactSticker corner lift + peel interaction using 3D transform and shadow depth.
DropletsCanvas UI · ReactRain droplets refracting the page.
Flame WrapCanvas UI · ReactA card wrapped in a border of fire.
Force FieldCanvas UI · ReactAn energy shield where clicks detonate shockwaves.
FrostCanvas UI · ReactFrosted blur of the page inside the droplet (0 to 1).
GlassCanvas UI · ReactA crystal-ball lens that zooms on targets.
GlitchCanvas UI · ReactBroadcast glitch bursts over the live page.
Glyph RainCanvas UI · ReactFalling glyphs that light up the page, and surge under the cursor.
GridCanvas UI · ReactCells across the width of the wrapped area.
Hex FloatCanvas UI · ReactThe page on shiny floating hex tiles.
LaserCanvas UI · ReactA beam that reveals the page on scroll.
LiquidCanvas UI · ReactA pointer-driven fluid simulation over live HTML.
MagnifyCanvas UI · ReactA sci-fi scanner lens with click ripples.
Particle RevealCanvas UI · ReactUI revealed from fine particles by the cursor.
Particle ScrollCanvas UI · ReactThe page dissolves into sand below a line.
PeelCanvas UI · ReactPeels the page back from an edge in 3D.
Retro DitherCanvas UI · ReactA retro dithered pass over the live page.
RippleCanvas UI · ReactWater ripples from every click over live HTML.
ShatterCanvas UI · ReactShatters the page into glass shards.
VhsCanvas UI · ReactAnalog tape artifacts over the live page.
Libraries with Animated image effect components
Related categories
- Image Effect Components
- React Image Effect Components
- Tailwind CSS Image Effect Components
- Svelte Image Effect Components
- Animated Effect Components
- Animated Marquee Components
- Animated Transition Components
- Animated Reveal Wrapper Components
- Animated Border Effect Components
- Animated Mask Effect Components
- Animated Glow Effect Components
- Animated Spotlight Effect Components
- Animated Tilt Effect Components
- Animated Blur Overlay Components