Spotlight
An animated spotlight effect that adds depth and visual interest to your UI.
Spotlight Effect
This component adds a subtle animated spotlight glow that moves across your content for a dynamic feel
<script lang="ts">
import { Spotlight } from '$lib/components/ui';
</script>
<!-- Basic usage -->
<div class="relative">
<Spotlight />
<div class="relative z-10">Your content here</div>
</div>
<!-- With custom class -->
<div class="relative">
<Spotlight class="opacity-60" />
<div class="relative z-10">Your content here</div>
</div>
<!-- With custom animation -->
<div class="relative">
<Spotlight class="animate-[spotlight_5s_ease_0.5s_infinite]" />
<div class="relative z-10">Your content here</div>
</div>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| class | string | '' | Additional CSS classes to apply to the component |
Implementation Details
The Spotlight component creates a subtle animated gradient glow effect using an SVG with a Gaussian blur filter. The default animation transitions the spotlight from being invisible to visible and back, creating a sense of movement and depth.
The effect works well in both light and dark modes and can be customized with additional classes to adjust its size, opacity, and animation timing.
Usage Examples
Hero section with spotlight
<div class="relative overflow-hidden rounded-lg">
<Spotlight className="animate-[spotlight_5s_ease_0.5s_infinite]" />
<div class="relative z-10 py-12">
<h1 class="text-5xl font-bold">Welcome to magic.mov</h1>
<p class="mt-4 text-xl">Creative filmmaking tools for the modern era</p>
</div>
</div>
Multiple spotlights for dramatic effect
<div class="relative overflow-hidden rounded-lg p-10">
<Spotlight class="top-0 left-0 animate-[spotlight_4s_ease_0s_infinite]" />
<Spotlight class="bottom-0 right-0 animate-[spotlight_4s_ease_2s_infinite]" />
<div class="relative z-10">
<h3 class="text-2xl font-medium">Feature Spotlight</h3>
<p>Highlight your most important features with a dramatic visual effect</p>
</div>
</div>