Animated Spotlight Effect Components

Dev Design Library indexes 22 Animated spotlight effect components from 15 open-source UI libraries, with the most coming from React Bits, Velora UI, Aceternity UI, Vengeance UI and UI Lab. 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 spotlight effect components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Spotlight effect components belong to the Effects group.

• Magic BentoReact Bits · ReactInteractive bento grid tiles expand + animate with various options.
• Magic CardMagic UI · ReactA spotlight effect that follows your mouse cursor and highlights borders on hover.
• SpotlightAmicro Micro Transitions · ReactMasked spotlight highlighting container content on hover.
• Awesome Spotlight CardLobe UI · React
• Spotlight CardsKokonut UI · ReactFeature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind…
• Wordmark Spotlight FooterSpectrum UI · ReactA full-bleed wordmark lit by a spotlight that follows the pointer.
• Magnetic Spotlight MarqueeVengeance UI · ReactInteractive full-screen marquee with spotlight cursor effect
• Cursor SpotlightKinetics · HTML/CSSRadial glow follows the pointer across a contained surface
• Magic CardAnimations (Svelte) · SvelteA spotlight effect that follows your mouse cursor and highlights borders on hover.
• Cursor CardsBadtz UI · ReactInteractive cards with animated gradient borders that respond to cursor movement and proximity. Inspired by Cursor's…
• HighlightButtonEvil Buttons · ReactA button with a cursor spotlight, a border that lights up near the pointer, and a ripple from wherever you click.
• Spotlight CardSona UI · ReactA card with a radial spotlight glow that follows the cursor.
• Feature SpotlightUI Lab · ReactA camera zooms into the part of the product screenshot each feature describes as you scroll past it.
• Card Hover EffectVelora UI · ReactLink-card grid with a highlight that glides to whichever card you hover or focus.
• Card Hover EffectAceternity UI · React
• Spotlight CardReact Bits · ReactDynamic spotlight follows cursor casting gradient illumination.
• Spotlight NavbarVengeance UI · ReactNavbar with animated spotlight effect
• Spotlight CardUI Lab · ReactThe cursor is a lamp: cards catch its glow and their icons cast shadows away from it.
• Logo gridVelora UI · ReactBordered grid of customer logos with a cursor spotlight per cell, beside a heading and stories link.
• Card SpotlightAceternity UI · React
• True FocusReact Bits · ReactApplies dynamic blur / clarity based over a series of words in order.
• Spotlight CardVelora UI · ReactA radial glow that follows the cursor across the card.

Libraries with Animated spotlight effect components

• React Bits
• Velora UI
• Aceternity UI
• Vengeance UI
• UI Lab

Related categories

• Spotlight Effect Components
• React Spotlight Effect Components
• Tailwind CSS Spotlight Effect Components
• Animated 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 Tilt Effect Components
• Animated Blur Overlay Components