Components Cards & Layout MagicCard

MagicCard

Cards with a mouse-tracking spotlight and border glow. Pure CSS overlay, pointer-driven, theme-aware.

Live demo

Lightning fast

Pointer events drive a single radial gradient — no rerenders, no jank.

Theme aware

Inherits surface and border tokens, so light and dark modes both look right.

Zero deps

Pure Svelte 5 + scoped CSS. Lift the file, drop it in, ship.

Rust accent

gradientColor="#b3502c"

Moss accent

gradientColor="#6e7d4e"

Sky accent

gradientColor="#5b82c4"

Implementation

<script>
  import MagicCard from '$lib/components/MagicCard.svelte';
</script>

<MagicCard gradientColor="#146ef5" gradientOpacity={0.15}>
  <article class="card">
    <h3>Lightning fast</h3>
    <p>Pointer events drive a single radial gradient.</p>
  </article>
</MagicCard>

MagicCard tracks the pointer relative to its bounding box and writes the position into a CSS custom property. A radial gradient overlay uses that property as its centre, creating the spotlight. On pointer leave the gradient fades via a CSS transition. Everything is scoped — no globals leak.

API

Prop	Type	Default	Description
`gradientColor`	`string`	`"#146ef5"`	Hex colour of the spotlight gradient. Six-digit RGB or eight-digit RGBA.
`gradientOpacity`	`number`	`0.15`	0 – 1. Strength of the overlay at the spotlight centre.
`gradientSize`	`number`	`200`	Radius of the radial gradient in pixels.

Installation

cp src/lib/components/MagicCard.svelte ./src/lib/components/

Dependencies

Svelte 5+
Zero external dependencies
Scoped CSS only

For your agent

01Copy MagicCard.svelte into src/lib/components/.
02Wrap the element you want to spotlight with <MagicCard>.
03Tune gradientColor (hex) and gradientOpacity (0–1) to taste.

# Install MagicCard into my Svelte 5 project

Cards with a mouse-tracking spotlight and border glow. Pure CSS overlay, pointer-driven, theme-aware.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/MagicCard.svelte
to src/lib/components/MagicCard.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/magiccard/+page.svelte to src/routes/magiccard/+page.svelte.

## 5. Usage
```svelte
<script>
  import MagicCard from '$lib/components/MagicCard.svelte';
</script>

<MagicCard gradientColor="#146ef5" gradientOpacity={0.15}>
  <article class="card">
    <h3>Lightning fast</h3>
    <p>Pointer events drive a single radial gradient.</p>
  </article>
</MagicCard>
```