Dev Design LibraryEffect Components
Dev Design Library indexes 610 effect components from 61 open-source UI libraries, with the most coming from React Bits, Pixel Perfect, Kinetics, Cojeev UI and Canvas UI. Each one links to its page with the source code, a live preview where available, the library license and the install command.
Showing 120 of 610, 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.
TransitionHeadless UI · React
Animated BeamMagic UI · ReactAn animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
Distorted GlassCult UI · ReactA glass morphism effect component using SVG filters with fractal noise to create visual transitions between sections
Image CropperArk UI · ReactCrop and transform images with zoom, rotation, and aspect ratio controls.
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.- 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.
Mask ShadowLobe UI · ReactMaskShadow is a component that adds a gradient shadow effect to indicate content overflow in a specific direction…
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
BeamLaunch UI · 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.
Card Decoratorcnblocks · SvelteDecorative card component with visual effects
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…
Draggable MarqueeObsidianUI · ReactA continuous image marquee with drag momentum and a seamless looping track.
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.
Liquid Badgeglasscn · ReactA liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.
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.
Hero 01D2Studio UI · ReactStartup mentorship landing hero with a headline, call to action and mentor avatar group.
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
Image Cropperark-cn · ReactA shadcn-style image cropper component built with Ark UI primitives.
TransitionsMUI / Material 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.
Dither ImageCult UI · ReactCompound Next.js image figure with CSS Bayer dither via dither-plugin, partial reveal overlays, and typed tuning props
MarqueeArk UI · ReactA continuous scrolling component for displaying content in a seamless loop.
Ascii SweepCanvas UI · ReactAn ascii band that rewrites the whole page as it sweeps.
3D Tilttransitions.dev · HTML/CSS- 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.
Scroll ShadowLobe UI · ReactScrollShadow is a component that adds shadow indicators to scrollable content to show overflow in different…
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
GlowLaunch UI · React
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.
Hero Ninecnblocks · SvelteHero with animated background elements
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.
Liquid MetalObsidianUI · ReactShader background that looks like flowing liquid metal or chrome.
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.
Liquid Glassglasscn · ReactLow-level refractive glass wrapper used by liquid-refract components.
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.- Smooth ScrollAtelier UI · React
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.
Hero Section 01D2Studio UI · ReactPremium landing page hero with a serif accent headline, badge and mentor avatar group.
Liquid GlassOpaline · ReactThe primitive behind every glass component. Refracts the backdrop through an SVG displacement map, with a frosted…
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
Marqueeark-cn · ReactA shadcn-style marquee component built with Ark UI primitives.
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.
Edge BlurCult UI · ReactStacked backdrop-blur layers with a gradient mask for soft top or bottom screen edges
PresenceArk UI · ReactHelps control the rendering and unmounting of your content based on a given state.
AsciifyCanvas UI · ReactAn ascii lens that follows your cursor.
Page Side By Sidetransitions.dev · HTML/CSS
Libraries with effect components
Related categories
- React Effect Components
- Tailwind CSS Effect Components
- Svelte Effect Components
- Animated Effect Components
- shadcn/ui Effect Components
- Image 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