Svelte Bits

Overview

Svelte Bits is an open-source library of animated components, interactive canvas backgrounds, kinetic typography, and creative UI elements tailored for the Svelte 5 and SvelteKit ecosystem. Inspired by React Bits, it gives Svelte developers an expansive collection of copy-paste motion components without heavy third-party runtime bundles.

Key Features

• ✨ 60+ Creative Animated Components: Spanning interactive particle backgrounds, glowing cards, magnet buttons, split-text animations, and 3D hover effects.
• 🚀 Svelte 5 & Runes Native: Written leveraging modern Svelte 5 reactive primitives ($state, $derived, $props) for optimal performance.
• 📋 Zero-Install Copy & Paste: Directly copy clean .svelte single-file components and drop them into your project with no npm lock-in.
• 🎨 Tailwind CSS & GSAP Integration: Easily styled and configured using standard Tailwind classes or modular motion plugins.

Installation & Quick Start

# Standard Svelte motion dependencies
npm install tailwindcss gsap clsx tailwind-merge

<script lang="ts">
  // Example: Magnet Button Component in Svelte 5
  let { children, class: className = '' } = $props();
  let element: HTMLElement;

  function handleMouseMove(e: MouseEvent) {
    const { left, top, width, height } = element.getBoundingClientRect();
    const x = (e.clientX - (left + width / 2)) * 0.3;
    const y = (e.clientY - (top + height / 2)) * 0.3;
    element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
  }

  function handleMouseLeave() {
    element.style.transform = 'translate3d(0px, 0px, 0)';
  }
</script>

<button
  bind:this={element}
  onmousemove={handleMouseMove}
  onmouseleave={handleMouseLeave}
  class="transition-transform duration-200 ease-out px-6 py-3 rounded-xl bg-indigo-600 text-white font-medium {className}"
>
  {@render children?.()}
</button>

Why Choose Svelte Bits?

• SvelteKit Landing Pages: Add playful micro-interactions, interactive gradients, and kinetic headers with pure Svelte idioms.
• Zero Overhead: Eliminate React-based wrapper overheads when building fast, lightweight Svelte-powered web experiences.