Animated Border Effect Components

Dev Design Library indexes 34 Animated border effect components from 16 open-source UI libraries, with the most coming from Kinetics, Aceternity UI, Velora UI, React Bits and Shadcn Space. 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 border effect components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Border effect components belong to the Effects group.

• Border GlowReact Bits · ReactGlowing mesh-gradient border that follows cursor direction and intensifies near edges.
• Border BeamMagic UI · ReactAn animated beam of light which travels along the border of its container.
• B
  Border BeamLibraries.dev · ReactAnimated border beam effect for React
• 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.
• Glow Border CardVengeance UI · ReactCard with animated glow border
• Shine Border-01 - BasicShadcn Space · ReactShine Border component
• Border BeamKinetics · HTML/CSSA light sweeps the border via a masked conic gradient
• Border BeamAnimations (Svelte) · SvelteA component for creating animated border beam effects around elements with customizable gradients, duration, and…
• Border BeamBadtz UI · ReactDisplays an animated border effect with a glowing beam around the content that adapts to the size of the container.
• Chrome Border ButtonRewamp UI · React
• Subscribe Shine ButtonMicroKit · ReactA dark subscribe pill with a rotating highlight that traces its edge on hover.
• Border BeamVelora UI · ReactA beam of light traveling around any border.
• Liquid Metal BorderSpaceUI · ReactLiquid metal shader as a border wrap. Put any registry component inside.
• Glow CardReactFrame · ReactA card with an animated rotating conic-gradient glow border, customizable colors, text position, and an optional…
• Background GradientAceternity UI · React
• Electric BorderReact Bits · ReactJittery electric energy border with animated arcs, glow and adjustable intensity.
• Shine BorderMagic UI · ReactShine border is an animated background border effect.
• M
  Metal FxLibraries.dev · ReactLiquid metal shader effects for React: rings, buttons, metal text and badges, with glow, proximity reflections and…
• Beam Search BarSpectrum UI · ReactA search bar whose bottom edge lights up with a traveling beam while it has focus.
• Border BeamVengeance UI · React
• Shine Border 06 - Focus FrameShadcn Space · ReactA camera focus-lock shine border with pulsing corner brackets instead of a continuous glowing ring, wrapping a simple…
• Gradient Border MorphKinetics · HTML/CSSA rotating conic gradient creates a living border — pure CSS
• Shine BorderAnimations (Svelte) · SvelteA component that adds a shining animated border effect with customizable colors, duration, and border width.
• 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.
• Glowing EffectAceternity UI · React
• Star BorderReact Bits · ReactAnimated star / sparkle border orbiting content with twinkle pulses.
• Shine Border 07 - Marching DashesShadcn Space · ReactA marching dashes shine border with a crisp animated dashed outline continuously travelling around the edge, wrapping…
• Sheen SweepKinetics · HTML/CSSSpecular highlight glides across on hover
• Glowing EffectVelora UI · ReactBorder glow that follows the pointer around a card's edge as it comes near.
• Hover Border GradientAceternity UI · React
• Shine SweepKinetics · HTML/CSSA diagonal light streak sweeps across on hover — pure CSS
• Moving BorderVelora UI · ReactA light laps the button's border via offset-path.
• Moving BorderAceternity UI · React

Libraries with Animated border effect components

• Kinetics
• Aceternity UI
• Velora UI
• React Bits
• Shadcn Space

Related categories

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