Card Spotlight
A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.
API
| 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. |
Component Code
You can copy and paste the following code to create this component:
CardSpotlight.vue
Features
- 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, andgradientOpacityprops 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.
Credits
- Inspired by Magic Card component from Magic UI.