Dev Design LibraryAnimated Media Components
Dev Design Library indexes 330 Animated media components from 54 open-source UI libraries, with the most coming from Pixel Perfect, Amicro Micro Transitions, uselayouts, Aceternity UI and React Bits. 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 media components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.
Showing 120 of 330, a mix from every library. Open a library to see all of its components.
Accordion GalleryReact Bits · ReactPanels expand on hover or focus, revealing parallax imagery and captions.
GlobeMagic UI · ReactAn autorotating, interactive, and highly performant globe made using WebGL.
Hover Video PlayerCult UI · ReactVideo player component that plays on hover with smooth animations
SwapArk UI · ReactAnimate between two visual states with smooth transitions.
Ascii ObjectCanvas UI · ReactA 3D model or image redrawn as shape-matched ASCII.
Icon Swaptransitions.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
Morphiconsmorphicons · ReactUniversal morphing for stroke-based icons with spring physics — zero runtime dependencies
App Icon LoadAmicro Micro Transitions · ReactApp Icon Load loading animation.
Fluent EmojiLobe UI · React
AI VoiceKokonut UI · ReactVoice input with a scrolling waveform, then a take you can play back, discard or send.
Text Icon CursorCursify · React
Infinite MasonrybeUI · ReactResponsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
Folder ComponentRare UI · ReactAn animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size…
Disclose ImageSpectrum UI · ReactAn image reveal component with animated sliding door panels.
Circular GalleryVengeance UI · ReactRelaxing 3D ring of images with drag-spin, parallax tilt, and center preview
Sidebar Workspace HeaderFluid Functionalism · ReactWorkspace brand row for a sidebar header: 20px tile on the rows' leading axis, name pinned to the 32px text axis…
Morphing IconUser Interface Wiki · React
Autocomplete-06 - With IconShadcn Space · ReactAutocomplete for selecting a project type with unique icons, selected icon shown in input, and spring-animated list…
Before AfterPixel Perfect · ReactDrag the handle to wipe between two images with a liquid seam.
3D Bookuselayouts · ReactAn interactive 3D book component with page flip animations.
Battery ChargeKinetics · HTML/CSSFill climbs as the bolt pulses
Circuit BoardComponentry · ReactAnimated circuit board visualization with nodes and connections.
GlobeAnimations (Svelte) · SvelteAn autorotating, interactive, and highly performant globe made using WebGL.
Image SplitBadtz UI · ReactThis component provides a dynamic and visually captivating way to display images split into multiple sections.
Gemini SparkleNotra · ReactGemini's three-dot mark that bounces and folds into a triangle.
Animated PathGreatUI · ReactSVG path that draws itself from start to end.
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Perspective Flip DeckRewamp UI · ReactExact recreation of Recording 2026-09-15 154736.mp4: 3D isometric perspective fanned card deck. When cycling, the…
Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
ASCII Logo23rd.dev · ReactInteractive ASCII wordmark: glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and…
Floating ViewerSona UI · ReactAn in-page media surface that automatically or manually detaches, stays within viewport bounds, snaps to a corner, and…
IconWatermelon UI · React
Empty statesArc Library · ReactFour empty states in one illustration whose shapes morph between scenes as you switch tabs.
Arrow CalloutUI Lab · ReactA handwritten note whose arrow draws itself to whatever it points at.
Video playerHextaUI · ReactA video player with a scrubbable seek bar, auto-hiding controls, keyboard shortcuts, speed, picture in picture and…
Streaming Speech PanelLocalMode · ReactA streaming-TTS status surface: active state (WaveformActivityBars + spinner, synthesizing/playing label…
Accordion GalleryCojeev UI · ReactA selected image panel opens to reveal its label, story and action.
Dynamic IconFLX UI · ReactA dynamic icon component with a name and size.
3D MarqueeVelora UI · ReactA tilted 3D grid of images whose columns scroll up and down in an endless loop.
Curve MediaAtelier UI · React
Agent GlyphHalaska UI · React
Progress ImagePin UI · React
AnimojiSpaceUI · ReactRenders every Unicode emoji in a string as an animated image sized to the surrounding text.
Image Density GridSkecher UI · ReactA percentage-controlled image grid with animated density changes, soft focus, and optional controls.
Arrow RightSora UI · ReactAnimated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.
Coin MorphZAYX · React NativeReact Native crypto coin list (CoinMorphList) with an animated counter and a coin detail modal.
Live Waveform Audio RecorderCue Foundations · React
Glass LensOpaline · ReactDraggable magnifying lens that bends whatever is beneath it.
Pixel SnailFibo · ReactA one-colour pixel snail that crawls on a loop while something loads.
AI Voice 01ReactFrame · ReactA voice-assistant pill with a canvas audio-reactive visualizer, idle/listening/speaking states, a glowing edge ring…
3d GlobeAceternity UI · React
Swapark-cn · ReactA shadcn-style swap component built with Ark UI primitives.
Bell ToggleReact Bits · ReactPill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and…
Hero Video DialogMagic UI · ReactA hero video dialog component.
Illustration CursorCult UI · ReactCursor illustration and demo for collaboration UI
Dithered ObjectCanvas UI · ReactA 3D model or image rendered through a 1-bit dither.
Image Open Tilttransitions.dev · HTML/CSS- Voice GlowLibraries.dev · ReactSound-reactive glow for React — a centered, colorful beam along the bottom edge that rises and blooms with voice…
Custom team emojiReUI · ReactA release thread whose reply field inserts the workspace's own emoji as shortcodes from their own tab.
Apple EqualizerAmicro Micro Transitions · ReactApple Equalizer loading animation.
Brand Brand LoadingLobe UI · React
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…
Preview RailbeUI · ReactCodex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination…
Voice NoteRare UI · ReactA voice message bar with a scrubbable waveform and a play control.
Face RatingSpectrum UI · ReactA five-level feedback rating where one large SVG face morphs its mouth, eyes and color between moods as you hover and…
Image Reveal ListVengeance UI · ReactHover-based image reveal tooltip list
Button 31 - Emoji BurstShadcn Space · ReactLike/react button that launches emoji particles that arc, collide with the button, and settle on top, built with a…
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…
AccordionOSuselayouts · ReactInteractive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay…
Bookmark ToggleKinetics · HTML/CSSRibbon fills and drops in on save
Collection SurferComponentry · ReactSmooth surfing interaction for browsing collections.
Hero Video DialogAnimations (Svelte) · SvelteA video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.
Ascii ImageGreatUI · React
Rocket LaunchNexvyn UI · ReactA hand-drawn rocket illustration that ignites its engines and lifts off the pad on demand, with a reset back to rest.
Editorial 3 D Orbit CarouselRewamp UI · React
Logo Burst23rd.dev · ReactHair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.
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.
Balance ScaleUI Lab · ReactWeighs your pros against your cons on a balance that tips and slowly settles.
Voice OrbLocalMode · ReactAn animated Canvas 2D voice-agent orb/visualizer that reflects discrete agent states…
Animated iconCojeev UI · ReactReplayable micro-interactions for the full Cojeev icon library, with semantic motion families and optional visual…
Container ScrollVelora UI · ReactScreenshot panel that rotates flat as it scrolls into view.
Image TrailAtelier UI · React
CloudSpaceUI · ReactVolumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.
Image GlideSkecher UI · ReactAn image viewer with pointer depth, soft image transitions, and a compact thumbnail rail.
ChevronsSora UI · ReactAnimated double up-chevron that cross-fades between the two carets on trigger.
Phantom Infinite GalleryCue Foundations · React
Glass PlayerOpaline · ReactNow-playing widget with scrubber, transport controls and volume.
AI Voice 05ReactFrame · ReactA portrait voice-assistant card with a canvas audio-reactive curve visualizer, a mic button that grows on tap…
3d MarqueeAceternity UI · React
Zoom Imageark-cn · ReactA shadcn-style zoom image component built with Ark UI primitives.
Chroma GridReact Bits · ReactA responsive grid of grayscale tiles. Hovering the grid reaveals their colors.
Icon CloudMagic UI · ReactAn interactive 3D tag cloud component
Illustration Fluid RenderingCult UI · ReactFluid rendering illustration
Glass ObjectCanvas UI · ReactModels, SVGs, and images as floating liquid glass.- Voice RingLibraries.dev · ReactVoice-reactive ring of light for React: a glassy spectrum that bends with the voice, takes the colour of its emotion…
Apple Icon MorphAmicro Micro Transitions · ReactApple Icon Morph loading animation.
Brand Logo3DLobe UI · React
Shape HeroKokonut UI · ReactA landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
Notification BellSpectrum UI · ReactA bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode
Image ScatterVengeance UI · ReactSmooth scroll-triggered scattered photo gallery
Feature 02 - Three Columns Feature with IconsShadcn Space · ReactA clean three card feature grid with icons and concise copy, built for product or SaaS pages to communicate core…
Cd Envelope PlayerPixel Perfect · ReactA CD slides out of a paper sleeve and spins up into a now-playing card — grooved disc, moving sheen and a play/pause…
Bookshelfuselayouts · ReactA shelf of cloth-bound books. Pull one out and it opens on the desk: covers swing on a hinge and pages turn by the…
Equalizer BarsKinetics · HTML/CSSPhase-offset bars pump like an audio meter — pure CSS
Dithered LogoComponentry · ReactAn interactive particle logo that turns image assets into a dithered canvas field with cursor ripples.
Icon CloudAnimations (Svelte) · SvelteAn interactive 3D tag cloud component that displays icons or images in a sphere formation with smooth rotation and…
Macbook MockupGreatUI · React
Hyperspeed WarpRewamp UI · React
Phosphor Score23rd.dev · ReactVertical sheet music on a CRT phosphor: notes fall, bloom at the playhead, then exit in a flare.
Bookmark ButtonUI Lab · ReactFills from the bottom up and lands with a small squash.
Waveform Activity BarsLocalMode · ReactA pure-CSS row of pulsing vertical bars (sinusoid-derived heights, staggered animation) that doubles as an active…
Assembly partCojeev UI · ReactA persistent native component moving between a floating organism and its measured layout.
Split CTA with product visualVelora UI · ReactTwo-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.
Lens MediaAtelier UI · React
Dirt CarouselSpaceUI · React3D ring of video worlds. Drag, wheel, or snap. Open the gear panel to change radius, tilt, and auto-rotate.
Liquid Morphology SlideshowSkecher UI · ReactA WebGL image slideshow with liquid, frost, ripple, plasma, and timeshift transitions.
VolumeSora UI · ReactAnimated volume icon that morphs smoothly between sound waves and a mute slash with speaker shake effect.
Libraries with Animated media components
Related categories
- Media Components
- React Media Components
- Tailwind CSS Media Components
- Svelte Media Components
- shadcn/ui Media Components
- Animated Gallery Components
- Animated Image 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