Dev Design LibraryAnimated Image Components
Dev Design Library indexes 65 Animated image components from 26 open-source UI libraries, with the most coming from Pixel Perfect, Aceternity UI, uselayouts, Animations (Svelte) 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 components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Image components belong to the Media group.
Refine FrameReact Bits · ReactReserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift…
LensMagic UI · ReactA interactive component that enables zooming into images, videos and other elements.
Image Open Tilttransitions.dev · HTML/CSS- Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
Card with image scale hover effectReUI · ReactCard with image scale hover effect
Photo StraightenKokonut UI · ReactLevel a crooked photo on a ruler you drag or flick. The crop grows to hide the corners, and a grid shows while you…
Disclose ImageSpectrum UI · ReactAn image reveal component with animated sliding door panels.
Image Reveal ListVengeance UI · ReactHover-based image reveal tooltip list
Product Category 02 - Image BasedShadcn Space · ReactA product category section built with image-driven cards and filters, enabling faster discovery through visuals and…
Before AfterPixel Perfect · ReactDrag the handle to wipe between two images with a liquid seam.
AccordionOSuselayouts · ReactInteractive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay…
Layered StackComponentry · ReactA stack of layered cards that interact with mouse hover.
LensAnimations (Svelte) · SvelteAn interactive component that enables zooming into images, videos and other elements.
Image SplitBadtz UI · ReactThis component provides a dynamic and visually captivating way to display images split into multiple sections.
Ascii ImageGreatUI · React
LightboxSona UI · ReactAn accessible image preview that expands from its thumbnail and returns to the same spatial origin when dismissed.
Image compareArc Library · ReactDrag a divider across two images to see what changed.
Compare SliderUI Lab · ReactDrag the line to see what polish actually changes.
Direction Aware HoverVelora UI · ReactOverlay enters from the edge the cursor actually crossed.
Image TrailAtelier UI · React
Progress ImagePin UI · React
Infinite Scrolling ImagesSora UI · ReactAn infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.
Glass LensOpaline · ReactDraggable magnifying lens that bends whatever is beneath it.
Dot Image SliderReactFrame · ReactA before/after image reveal, a luminance-mapped halftone dot rendering on one side, the real photo on the other…
CompareAceternity UI · React
Zoom Imageark-cn · ReactA shadcn-style zoom image component built with Ark UI primitives.
Image TrailVengeance UI · ReactCursor-following image trail effect
Bend Image RevealPixel Perfect · ReactA pixel-art frame that flies in and warps with an air-friction bend, deformed on a WebGL plane by a GSAP-driven vertex…
Magnified Bentouselayouts · ReactA bento card component with a draggable magnifying lens effect over scrolling chips.
Scroll Split CardComponentry · ReactA scroll-driven interactive card that splits into three panels and flips.
Fancy Media Between TextAnimations (Svelte) · Svelte
Pixel To Ascii ImageGreatUI · React
Image HotspotsUI Lab · ReactDraws a leader line to one label card that travels between a watch's features, never covering the product.
LensVelora UI · ReactCircular magnifier that follows the pointer or arrow keys to zoom into an image.
Image CropperReactFrame · ReactAn image cropper with a draggable, resizable crop box, aspect presets or a circle mask for avatars, keyboard nudging…
Direction Aware HoverAceternity UI · React
Fluid ImagePixel Perfect · ReactA real-time GPU fluid simulation — move your cursor to flow one image into another.
Scroll Split Cardsuselayouts · ReactOne photograph that splits into three panels as you scroll, then flips to copy.
Fancy Parallax FloatingAnimations (Svelte) · Svelte
Images BadgeAceternity UI · React
Gravity Image TrailPixel Perfect · ReactA GSAP image trail where images cascade from the cursor, fall, and bounce off the bottom edge.
LensAceternity UI · React
Image Hover AnimationPixel Perfect · ReactAn image hover animation with scaling and opacity effects.
Link PreviewAceternity UI · React
Img Burn DissolvePixel Perfect · ReactHover and the first image burns away along a glowing ember edge, revealing the next through the noise.
Img Checker FlipPixel Perfect · ReactHover and the image tiles into a checkerboard whose squares flip over, staggered, to the next image.
Img Chromatic AberrationPixel Perfect · ReactRed and blue channels drift apart toward the edges with a slow pulse.
Img GlitchPixel Perfect · ReactRandom horizontal slices tear and shift with bursts of RGB noise.
Img Pixel DissolvePixel Perfect · ReactThe image materialises from chunky mosaic blocks into full resolution.
Img Pixel Rise RevealPixel Perfect · ReactHover and a ragged wall of pixels climbs from the bottom, dissolving the old image block by block as the new one rises…
Img Ripple RevealPixel Perfect · ReactHover to send a rippling ring out from the centre, warping the first image aside as the next floods in.
Img Shery LiquidPixel Perfect · ReactA mesmerising simplex-noise liquid warp drifting across the image. Adapted from Shery.js (style 1), MIT — Sheryians…
Img Shery Liquid CursorPixel Perfect · ReactA flowing liquid distortion that bends around your cursor. Adapted from Shery.js (style 5), MIT — Sheryians Coding…
Img Spotlight RevealPixel Perfect · ReactA flashlight of full colour follows your cursor through a darkened image.
Img VhsPixel Perfect · ReactTape warble, chroma bleed and a rolling tracking band — worn-out VHS.
Img WavePixel Perfect · ReactGently ripples the whole image like a flag in a slow breeze.
Img Wipe RevealPixel Perfect · ReactHover to sweep a glowing diagonal seam across the frame, wiping one image into the next.
Photo Coverflow CyclePixel Perfect · ReactA cover-flow of photos that steps forward one at a time, the back of the deck blurred and dimmed.
Photo Flip WallPixel Perfect · ReactA wall of cubes tiled with one photo; sweep the cursor across it and each cube flips to reveal the next photo piece by…
Photo Lemniscate FlightPixel Perfect · ReactPhotos flying a figure-eight through real depth, swapping which lobe is in front.
Photo Pile SortPixel Perfect · ReactPrints are tossed onto a loose pile as you scroll, then slide out and straighten into a tidy contact sheet.
Photo Sphere DriftPixel Perfect · ReactPhotos scattered over a sphere by the golden angle, tumbling on two axes at once.
Photo Spiral VortexPixel Perfect · ReactPhotos spiralling endlessly inward, shrinking away as they are drawn into the centre.
Photo Sweep ConveyorPixel Perfect · ReactPhotos sweep across a pinned stage on scroll, blooming to full size at random heights before collapsing back to…
Scale Image TrailPixel Perfect · ReactA GSAP image trail that pops each image in with a bouncy scale, then shrinks it away behind the cursor.
Libraries with Animated image components
Related categories
- Image Components
- React Image Components
- Tailwind CSS Image Components
- Animated Media Components
- Animated Gallery Components
- Animated Icon Components
- Animated Illustration Components
- Animated Scene 3D Components
- Animated Audio Visualizer Components
- Animated Logo Components
- Animated Video Player Components
- Animated Mockup Components
- Animated Icon Set Components
- Animated Image Zoom Components
- Animated Audio Player Components