Image Effect Components

Dev Design Library indexes 87 image effect components from 20 open-source UI libraries, with the most coming from Canvas UI, React Bits, Kinetics, Aceternity UI and Componentry. Each one links to its page with the source code, a live preview where available, the library license and the install command. 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
• Image CropperArk UI · ReactCrop and transform images with zoom, rotation, and aspect ratio controls.
• Ascii SweepCanvas UI · ReactAn ascii band that rewrites the whole page as it sweeps.
• I
  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
• Img PixelatePixel Perfect · ReactSnaps the image to a square grid whose resolution breathes over time.
• 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.
• Dither ShaderAnimations (Svelte) · SvelteA canvas-based component that applies dithering effects to images with customizable patterns and color modes.
• 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.
• Ascii ArtAceternity UI · React
• Image Cropperark-cn · ReactA shadcn-style image cropper component built with Ark UI primitives.
• 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.
• Sticky Note PeelAmicro Micro Transitions · ReactPost-it memo note peeling upwards in 3D perspective from pad.
• 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.
• Pixel ImageAnimations (Svelte) · SvelteAn image component that reveals itself through a pixelated grid animation with optional grayscale to color transition.
• 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
• Chromatic ImageAceternity 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.
• Bookmark Corner PeelAmicro Micro Transitions · React
• 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.
• Fancy Pixelate Svg FilterAnimations (Svelte) · Svelte
• Pixel DistorsionBadtz UI · ReactAn interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect…
• Image Hover RevealGreatUI · React
• Dither ShaderAceternity 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.
• B
  BacklightAnimations (Svelte) · SvelteAn SVG filter wrapper that adds a soft, saturated backlight glow around the content it wraps.
• Pixel To Ascii ImageGreatUI · React
• Pixelated CanvasAceternity 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.
• Webcam Pixel GridAceternity UI · React
• 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 image effect components

• Canvas UI
• React Bits
• Kinetics
• Aceternity UI
• Componentry

Related categories

• React Image Effect Components
• Tailwind CSS Image Effect Components
• Svelte Image Effect Components
• Animated Image Effect Components
• Effect Components
• Transition Components
• Marquee Components
• Cursor Effect Components
• Mask Effect Components
• Reveal Wrapper Components
• Border Effect Components
• Glow Effect Components
• Spotlight Effect Components
• Tilt Effect Components
• Blur Overlay Components
• Ripple Components
• Confetti Components