Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.
npx inspira-ui add card-spotlight
<template>
<CardSpotlight
:gradient-size="200"
gradient-color="#262626"
:gradient-opacity="0.8"
>
<h3>Your content here</h3>
<p>The spotlight will follow your mouse cursor.</p>
</CardSpotlight>
</template>
<script setup>
import { CardSpotlight } from '@/components/ui/card-spotlight'
</script>
| 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. |