Card Spotlight

A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/card-spotlight.json"

CardSpotlight.vue

Prop Name	Type	Default	Description
`gradientSize`	`number`	`200`	Radius in pixels of the spotlight effect.
`gradientColor`	`string`	`'#262626'`	The color of the spotlight gradient.
`gradientOpacity`	`number`	`0.8`	The opacity level of the spotlight gradient effect.
`slotClass`	`string`	`undefined`	Class to apply to the parent container containing the slot.

Interactive Spotlight Effect: Displays a dynamic spotlight that follows the user's mouse cursor, enhancing user engagement and visual appeal.
Customizable Appearance: Easily adjust the gradientSize, gradientColor, and gradientOpacity props to tailor the spotlight effect to your design preferences.
Easy Integration: Wrap any content within the <CardSpotlight> component to instantly add the spotlight effect without additional configuration.
Responsive Design: The component adapts smoothly to different container sizes, ensuring a consistent experience across various devices and screen sizes.
Performance Optimized: Utilizes Vue's reactivity for efficient updates, ensuring smooth animations without compromising application performance.

On This Page