React Image Effect Components

Dev Design Library indexes 74 React image effect components from 18 open-source UI libraries, with the most coming from Canvas UI, React Bits, Aceternity UI, 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. Every library in this list targets React. 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.
• Ascii EffectComponentry · ReactRender images as responsive ASCII artwork with image, flow, and glitch variations.
• 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.
• Dithered LogoComponentry · ReactAn interactive particle logo that turns image assets into a dithered canvas field with cursor ripples.
• 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
• Hover TransitionComponentry · ReactEight polished hover transitions with per-card animation, direction, color, and content controls.
• 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.
• Image Ripple EffectComponentry · ReactWebGL-powered cursor ripples that displace layered image cards in real time.
• 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.
• 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.
• Pixel TransitionReact Bits · ReactPixel dissolve transition for content reveal on hover.
• ClothCanvas UI · ReactHangs the page on rippling fabric.
• Ripple DistortionReact Bits · ReactPointer-driven water displacement that warps content and leaves a decaying wake.
• CloudsCanvas UI · ReactTheme-aware mist parted by cursor wind.
• ScannerReact Bits · ReactCalm interference bands sweeping across the screen like an oscilloscope.
• Decrypt RevealCanvas UI · ReactUI encrypted into ASCII, decoded by the cursor.
• 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 React image effect components

• Canvas UI
• React Bits
• Aceternity UI
• Componentry
• GreatUI

Related categories

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