Components
Spotlight
Component that creates a spotlight effect following the cursor.
Spotlight
The Spotlight component creates a spotlight effect following the cursor. It's perfect for creating engaging hover effects and interactive elements that respond to cursor movement.
Usage
<template>
<div class="relative h-64 bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
<MSpotlight class="bg-gradient-to-br from-emerald-500 to-teal-600" />
<div class="absolute inset-0 flex items-center justify-center">
<h3 class="text-2xl font-bold text-white">Spotlight Effect</h3>
</div>
</div>
</template>
Props
class
string
CSS classes to apply to the spotlight element.
size
number
Size of the spotlight in pixels.
springOptions
SpringOptions
Spring animation options.
Examples
Basic Spotlight
Spotlight Effect
Focus attention on key elements with our spotlight effect that guides users through your interface
<template>
<div class="relative h-64 bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
<MSpotlight />
<div class="absolute inset-0 flex items-center justify-center">
<h3 class="text-2xl font-bold">Basic Spotlight</h3>
</div>
</div>
</template>
With Custom Gradient
Gradient Spotlight
<template>
<div class="relative h-64 bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
<MSpotlight class="bg-gradient-to-br from-emerald-500 to-teal-600" />
<div class="absolute inset-0 flex items-center justify-center">
<h3 class="text-2xl font-bold text-white">Gradient Spotlight</h3>
</div>
</div>
</template>
With Custom Size
Large Spotlight
<template>
<div class="relative h-64 bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
<MSpotlight :size="300" />
<div class="absolute inset-0 flex items-center justify-center">
<h3 class="text-2xl font-bold">Large Spotlight</h3>
</div>
</div>
</template>
With Custom Styling
Styled Spotlight
<template>
<div class="relative h-64 bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
<MSpotlight class="bg-rose-500/30" />
<div class="absolute inset-0 flex items-center justify-center">
<h3 class="text-2xl font-bold text-rose-600">Styled Spotlight</h3>
</div>
</div>
</template>
With Custom Spring Options
Bouncy Spotlight
<template>
<div class="relative h-64 bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
<MSpotlight :spring-options="{ bounce: 0.5, stiffness: 300 }" />
<div class="absolute inset-0 flex items-center justify-center">
<h3 class="text-2xl font-bold">Bouncy Spotlight</h3>
</div>
</div>
</template>