CardSpotlight

Preview

Installation

pnpm add fancy-ui-svelte

import { CardSpotlight } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { CardSpotlight } from 'fancy-ui-svelte';
</script>

<CardSpotlight />

Examples

Basic Usage

svelte

<script lang="ts">
	import { CardSpotlight } from "$lib/fancy-ui/card-spotlight";
</script>

<CardSpotlight class="h-64 w-80">
	<div class="p-6">
		<h3 class="text-lg font-bold">Spotlight Card</h3>
		<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">
			Hover to see the spotlight effect following your cursor.
		</p>
	</div>
</CardSpotlight>

Custom Colors

svelte

<script lang="ts">
	import { CardSpotlight } from "$lib/fancy-ui/card-spotlight";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<CardSpotlight class="h-64 w-72" gradientColor="#3b82f6" gradientSize={250}>
		<div class="p-6">
			<h3 class="text-lg font-bold">Blue Spotlight</h3>
			<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">Custom blue gradient color.</p>
		</div>
	</CardSpotlight>
	<CardSpotlight class="h-64 w-72" gradientColor="#10b981" gradientSize={300}>
		<div class="p-6">
			<h3 class="text-lg font-bold">Green Spotlight</h3>
			<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">
				Custom green gradient with larger radius.
			</p>
		</div>
	</CardSpotlight>
	<CardSpotlight class="h-64 w-72" gradientColor="#f59e0b" gradientOpacity={0.6}>
		<div class="p-6">
			<h3 class="text-lg font-bold">Amber Spotlight</h3>
			<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">
				Lower opacity for a subtler effect.
			</p>
		</div>
	</CardSpotlight>
</div>

Props

Prop	Type	Default	Description
`slotClass`	string	`""`	CSS classes for the inner content wrapper
`gradientSize`	number	`200`	Size of the spotlight gradient in pixels
`gradientColor`	string	`"#262626"`	Color of the spotlight gradient
`gradientOpacity`	number	`0.8`	Opacity of the spotlight gradient