Animated Effect Components

Dev Design Library indexes 553 Animated effect components from 55 open-source UI libraries, with the most coming from React Bits, Pixel Perfect, Kinetics, Canvas UI and Cojeev UI. 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 effect components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.

Showing 120 of 553, a mix from every library. Open a library to see all of its components.

• Step ConnectorMUI / Material UI · React
• Acid SquaresReact Bits · ReactA crystalline corridor of stacked squares receding into depth.
• MarqueeChakra UI · ReactCreate a continuous scrolling display of logos, images, or text horizontally or vertically.
• Animated BeamMagic UI · ReactAn animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
• Dither ImageCult UI · ReactCompound Next.js image figure with CSS Bayer dither via dither-plugin, partial reveal overlays, and typed tuning props
• Ascii ObjectCanvas UI · ReactA 3D model or image redrawn as shape-matched ASCII.
• Confetti Bursttransitions.dev · HTML/CSSBurst of confetti fired from an element, for celebrating a success.
• B
  Border BeamLibraries.dev · ReactAnimated border beam effect for React
• Card HoverAmicro Micro Transitions · ReactDynamic floating card effect on hover.
• ConnectionAI Elements · ReactA custom connection line component for React Flow-based canvases with animated bezier curve styling.
• Progressive BlurLobe UI · React
• Mouse Effect CardKokonut UI · ReactInteractive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and…
• Magnetic CursorCursify · React
• LiquidbeUI · ReactGooey container (Liquid and LiquidItem): items placed inside merge into one liquid silhouette through an SVG filter.
• Grid RevealRare UI · ReactA loading state for AI images that turns into the real picture when it arrives.
• Beam CardSpectrum UI · ReactA card wrapped in an animated border beam, traveling or breathing, in four color palettes.
• Flow ButtonSpell UI · ReactA button with animated flowing dashed border on hover.
• Ascii Glitch RippleVengeance UI · ReactDynamic character-scramble wave ripple hover effect
• Page TransitionUser Interface Wiki · React
• MarqueePanel UI · React NativeContent that travels across its container on a loop.
• Animated Beam 01 - Hub and SpokeShadcn Space · ReactHub with the Shadcn Space logo linked to surrounding tool nodes by curved paths carrying travelling light beams
• Aperture Mask RevealPixel Perfect · ReactA camera-aperture mask reveal — six shutter blades twist open around the center, dilating a hexagonal iris cut from an…
• 3D Cube RotateKinetics · HTML/CSSClick to roll a face in with depth
• Ascii EffectComponentry · ReactRender images as responsive ASCII artwork with image, flow, and glitch variations.
• Integration Eightcnblocks · SvelteIntegration grid with animated connections
• Animated BeamAnimations (Svelte) · SvelteA component for creating animated beam effects between two elements with customizable gradients and paths.
• 3D WrapperBadtz UI · ReactThis component transforms any content into an immersive, interactive 3D experience. It tracks cursor movements to…
• Click SparkObsidianUI · React
• Animated PathGreatUI · ReactSVG path that draws itself from start to end.
• Social Proof Logo marqueeNexvyn UI · ReactThe tools a product is built with, drifting in a slow seamless marquee with soft edges.
• Stack RippleForge UI · ReactAnimated stacked notification cards ripple open with smooth transitions, showing messages, signups, and billing…
• MarqueeShark UI · ReactScrolls items in a horizontal container.
• Fluid Morph OrbRewamp UI · ReactAnimated orb that continuously changes shape like a fluid, shader based.
• HighlightButtonEvil Buttons · ReactA button with a cursor spotlight, a border that lights up near the pointer, and a ripple from wherever you click.
• ASCII Fluid23rd.dev · ReactMouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware.
• Avatar ShowcaseSona UI · ReactA recording-friendly avatar strip with count-aware pacing, deterministic sampling, staggered lanes, and reduced-motion…
• LiquidWatermelon UI · ReactLiquid button whose fill colour flows in on hover.
• Hero Onesv-efferd · SvelteA full hero composition with sticky header, editorial spotlight, and a marquee trust band.
• In-view titleArc Library · ReactBring a section title in as it scrolls into view.
• Confetti ButtonUI Lab · ReactA click pops confetti; hold it and the fuse burns until the whole thing blows.
• Assembly partCojeev UI · ReactA persistent native component moving between a floating organism and its measured layout.
• Subscribe Shine ButtonMicroKit · ReactA dark subscribe pill with a rotating highlight that traces its edge on hover.
• Carousel 01FLX UI · ReactAuto-scroll carousel that pauses on item hover and reveals title.
• 3D CardVelora UI · ReactPerspective card that turns toward the pointer while its layers lift to different depths.
• Infinite ParallaxAtelier UI · React
• ConnectorMetal UI · React + SwiftUIThe look around ink that joins two blocks: a green halo and end dots on hover (solid attached, hollow free), end…
• BloopSpaceUI · ReactCompact assistant orb with listen, think, and speak states, voice palettes, and audio input.
• Animated BookSkecher UI · ReactA reusable 3D book preview that opens on hover or focus and supports controlled state, keyboard input, and reduced…
• Cursor Trail RevealSora UI · ReactDesktop cursor trail that reveals staggered image strips with clip-path wipes as the pointer moves.
• Crypto OrbitZAYX · React Native
• Button MagneticCue Foundations · React
• Liquid GlassLiquefy UI · ReactThe material on its own, with the optics exposed as props.
• Glass LensOpaline · ReactDraggable magnifying lens that bends whatever is beneath it.
• Bubble CursorReactFrame · ReactA liquid-glass bubble that follows the pointer across the whole page, rendered with a raymarched WebGL2 metaball trail…
• 3d CardAceternity UI · React
• Aero ShardsReact Bits · ReactA GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer…
• PresenceChakra UI · ReactUsed to animate the entry and exit of an element while controlled the render behavior
• BacklightMagic UI · ReactA backlight glow effect for videos, images, and SVGs.
• Shader Lens BlurCult UI · ReactWebGL shader component with lens blur effects and mouse interaction
• Ascii SweepCanvas UI · ReactAn ascii band that rewrites the whole page as it sweeps.
• 3D Tilttransitions.dev · HTML/CSS
• I
  Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
• Cursor TrailAmicro Micro Transitions · ReactCustom cursor with particle/dots trail.
• EdgeAI Elements · ReactCustomizable edge components for React Flow canvases with animated and temporary states.
• Awesome Logo MarqueeLobe UI · React
• Spotlight CardsKokonut UI · ReactFeature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind…
• Neural GlowCursify · React
• MagneticbeUI · ReactButton composed with the Magnetic wrapper for cursor-attracted pull.
• Beam Search BarSpectrum UI · ReactA search bar whose bottom edge lights up with a traveling beam while it has focus.
• MarqueeSpell UI · ReactInfinite scrolling marquee component with customizable speed and direction.
• Cursor CardVengeance UI · ReactInline text link with cursor tracking preview card
• Web Tilt CardPanel UI · React Native
• Animated Beam 02 - PipelineShadcn Space · ReactLeft to right pipeline connecting Figma, Claude, and output nodes with animated light beams
• Bend Mouse FollowerPixel Perfect · ReactA pixel-art frame that smoothly chases the cursor and warps with an air-friction bend on a WebGL plane.
• Anamorphic FlareKinetics · HTML/CSSA point source rakes the frame and blooms horizontal streaks
• Closing PlasmaComponentry · ReactPlasma field tailored for footer and CTA sections with premium atmospheric motion.
• Integration Twocnblocks · SvelteTwo-row integration logo marquee
• Blur FadeAnimations (Svelte) · SvelteA component that animates content with blur and fade effects, supporting directional movement and intersection…
• Border BeamBadtz UI · ReactDisplays an animated border effect with a glowing beam around the content that adapts to the size of the container.
• Hover ImgObsidianUI · React
• Color Wipe Page TransitionGreatUI · ReactPage transition where a block of colour wipes across the screen between routes.
• Social Proof Testimonial marqueeNexvyn UI · ReactTwo rows of testimonial cards drifting in opposite directions, pausable.
• SwapShark UI · ReactAnimate between two visual states with smooth transitions.
• Halftone Dot CursorRewamp UI · ReactRecreation of Recording 2026-09-17 213845.mp4: An interactive halftone dot matrix cursor that expands and blooms into…
• Folio23rd.dev · ReactThe whole page leans back in perspective while you scroll, blurs, then springs flat when you stop.
• Image TrailSona UI · ReactSpawns a trail of images that follow the cursor across a scoped area, with multiple appearance styles.
• CursorWatermelon UI · React
• Logo Cloud Foursv-efferd · SvelteA marquee logo band with progressive edge blur and a layered track surface.
• Logo marqueeArc Library · ReactA quiet, continuously moving row of brand marks with a pause control.
• Dot GridUI Lab · ReactDots swell and part around your cursor, and a click sends a shockwave.
• Click SparkCojeev UI · ReactA finite spray of accent marks responds to a real activation.
• Scroll 01FLX UI · ReactSticky media that changes as you scroll through text content.
• 3D MarqueeVelora UI · ReactA tilted 3D grid of images whose columns scroll up and down in an endless loop.
• CloudSpaceUI · ReactVolumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.
• Magazine ScrollerSkecher UI · ReactA velocity-aware poster scroller with drag, wheel, spring, and progressive-blur treatments.
• Progressive BlurSora UI · ReactA stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed…
• Stacked Deck Scroll RevealCue Foundations · React
• Liquid SurfaceLiquefy UI · ReactShader background of a liquid surface.
• Cosmic BackgroundReactFrame · ReactA canvas-powered animated night-sky background, rotating star rings, a drifting star field, a breathing cone light and…
• 3d MarqueeAceternity UI · React
• Animated ContentReact Bits · ReactWrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and…
• Blur FadeMagic UI · ReactBlur fade in and out animation. Used to smoothly fade in and out content.
• Text GifCult UI · ReactText component with GIF-like animation effects and customizable styling
• AsciifyCanvas UI · ReactAn ascii lens that follows your cursor.
• Page Side By Sidetransitions.dev · HTML/CSS
• L
  Liquid GooeyLibraries.dev · ReactLiquid UI effects for React: Morph (gooey merge, jelly shape change, contact dissolve), Move (liquid-rubber trails)…
• Fade DownAmicro Micro Transitions · ReactFade with downward translation.
• Awesome Spotlight CardLobe UI · React
• Ripple CursorCursify · React
• MarqueebeUI · ReactInfinite horizontal or vertical scroll with pause-on-hover.
• Disclose ImageSpectrum UI · ReactAn image reveal component with animated sliding door panels.
• Perspective BookSpell UI · ReactA 3D book component with hover animation and customizable appearance.
• Glow Border CardVengeance UI · ReactCard with animated glow border
• Animated Beam 03 - Radial HubShadcn Space · ReactCentral ShadcnSpace node connected to surrounding nodes with animated light beams
• Blinds Mask RevealPixel Perfect · ReactA venetian-blinds mask reveal — the image is hidden behind N slats cut from a repeating-linear-gradient CSS mask, then…
• Border BeamKinetics · HTML/CSSA light sweeps the border via a masked conic gradient
• Dithered LogoComponentry · ReactAn interactive particle logo that turns image assets into a dithered canvas field with cursor ripples.
• Logocloud Threecnblocks · SvelteScrolling logo cloud marquee with progressive blur edges
• Border BeamAnimations (Svelte) · SvelteA component for creating animated border beam effects around elements with customizable gradients, duration, and…
• Confetti ButtonBadtz UI · ReactA fun and interactive button that triggers a confetti explosion effect on click.

Libraries with Animated effect components

• React Bits
• Pixel Perfect
• Kinetics
• Canvas UI
• Cojeev UI

Related categories

• Effect Components
• React Effect Components
• Tailwind CSS Effect Components
• Svelte Effect Components
• shadcn/ui Effect Components
• Animated Image 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