💧 LiquidCard

A Svelte 5 card component with a physics-based liquid light effect. The spotlight follows your cursor with real spring momentum — it doesn't just snap to position, it flows.

✨ What it does

As you move your cursor over the card, a glowing radial gradient tracks your position — but instead of following instantly, it has mass and momentum via Svelte's Spring primitive. The result feels genuinely liquid, not mechanical.

Two layers work together:

• A border glow on the card's outer edge that highlights where the light hits
• An inner surface glow that subtly illuminates the card content from your cursor position

Both fade in on hover and fade out on leave, also spring-animated.

🚀 Getting started

git clone https://github.com/your-username/liquid-card.git
cd liquid-card
npm install
npm run dev

🧩 Usage

Drop LiquidCard.svelte into your Svelte 5 project and wrap any content with it:

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

<LiquidCard>
  <h3>Hello</h3>
  <p>Any content goes here.</p>
</LiquidCard>

You can also pass a className prop for custom styling:

<LiquidCard className="my-card">
  <p>Custom styled card</p>
</LiquidCard>

⚙️ Props

🎨 Customization

The component uses CSS custom properties you can override:

.liquid-card {
  --spotlight-size: 500px; /* radius of the light cone */
  --border-color: oklch(0.8 0.1 240); /* glow color — change the hue freely */
}

Want a warm amber glow instead of the default cool blue? Just change the hue value in oklch:

--border-color: oklch(0.8 0.15 60); /* amber */

🔧 How it works

<!-- Spring tracks cursor position with mass/damping -->
const coords = new Spring({ x: 0, y: 0 }, { stiffness: 0.04, damping: 0.2 });
const opacity = new Spring(0, { stiffness: 0.1, damping: 0.4 });

<!-- Values flow into CSS variables each frame -->
style="--x: {coords.current.x}px; --y: {coords.current.y}px; --opacity: {opacity.current};"

The Spring class (Svelte 5 runes syntax) gives the glow its physical feel. Logic stays in JS, rendering stays in CSS — no layout thrashing, smooth 60fps.

📋 Requirements

• Svelte 5 (uses $props(), new Spring(), {@render children()})
• SvelteKit (optional — the component itself works in any Svelte 5 project)
• No external CSS frameworks required

⚠️ This component uses the Svelte 5 runes API. It is not compatible with Svelte 4.

📁 Project structure

src/
├── routes/
│   ├── +page.svelte       # Demo page
│   ├── LiquidCard.svelte  # The component
│   └── liquidWrap.svelte  # Grid demo layout

📄 License

MIT — free to use in personal and commercial projects.