Hover Spotlight Card

A soft light follows the cursor.

Show PreviewBuy for $5
Hover Spotlight Card
Hover Spotlight Card

About Hover Spotlight Card

Hover Spotlight Card

A card with a soft light that follows the cursor. As visitors move across the card, the glow lights up the surface and the border beneath it. A simple way to make feature grids and pricing sections feel responsive.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Title and Text: built-in content for the card

- Content: connect your own Framer layer to replace the built-in text

- Align: left or center

- Fill: card background color

- Spotlight: color and size of the light

- Border: width, color and glow color

- Radius and Padding

- Title Font, Text Font and colors

Details

The light only moves a CSS position, so it stays smooth even with many cards on one page. On touch screens the light follows the finger.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited. When an Update button appears next to the component, apply it to get the latest version.

Need Help?

Email joviseo1106@gmail.com. Questions are usually answered within 3 business days.

More Resources

More components by Joviseo, including four free ones: https://joviseo.vercel.app

From Joviseo KIM

Live Pricing Slider
Live Pricing Slider
Joviseo KIM·$9
Synced Hotspots
Synced Hotspots
Joviseo KIM·Free
Info Tooltip
Info Tooltip
Joviseo KIM·Free
Exit Offer Popup
Exit Offer Popup
Joviseo KIM·$9

Related Components

360 Scene Viewer
360 Scene Viewer
The Big Design Project·Free
Stats Counter +
Stats Counter +
FrameBuild·Free
Overscroll Preventer
Overscroll Preventer
Soyeb·Free
PDF View
PDF View
Nawaz Momin·Free