Spotlight Effect Components

Dev Design Library indexes 23 spotlight effect components from 15 open-source UI libraries, with the most coming from React Bits, Velora UI, Lobe UI, Aceternity UI and Vengeance UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. 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 SpotlightLobe 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.
• Awesome Spotlight CardLobe UI · React
• 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 spotlight effect components

• React Bits
• Velora UI
• Lobe UI
• Aceternity UI
• Vengeance UI

Related categories

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