Skip to main content

​
Quick Start

This guide will walk you through adding your first animation component to your Svelte 5 project. We’ll use the Shimmer Button component as an example, which creates a beautiful traveling light effect around a button.
This guide assumes you’ve already completed the Installation steps. If you haven’t, please set up your project first.

​
Your First Animation Component

1

Install the Component

Let’s install the Shimmer Button component using the CLI:
npx shadcn-svelte@latest add https://sv-animations.vercel.app/r/shimmer-button.json
This will create the following files in your project:
src/lib/components/magic-ui/shimmer-button/
├── shimmer-button.svelte
└── index.ts
Each component follows a consistent structure with a main .svelte file and an index.ts for clean exports.
2

Add Required CSS

The Shimmer Button requires custom CSS animations. Add these to your global CSS file:
src/routes/+layout.css
@theme inline {
  --animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite alternate;
  --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;

  @keyframes shimmer-slide {
    to {
      transform: translate(calc(100cqw - 100%), 0);
    }
  }

  @keyframes spin-around {
    0% {
      transform: translateZ(0) rotate(0);
    }
    15%, 35% {
      transform: translateZ(0) rotate(90deg);
    }
    65%, 85% {
      transform: translateZ(0) rotate(270deg);
    }
    100% {
      transform: translateZ(0) rotate(360deg);
    }
  }
}
Not all components require additional CSS. Always check the component documentation for specific requirements.
3

Use the Component

Now you can use the Shimmer Button in your pages. Open src/routes/+page.svelte and add:
src/routes/+page.svelte
<script lang="ts">
  import { ShimmerButton } from "$lib/components/magic-ui/shimmer-button";
</script>

<div class="flex min-h-screen items-center justify-center">
  <ShimmerButton>
    Click me!
  </ShimmerButton>
</div>
That’s it! You now have a beautiful animated button with a shimmer effect.
4

Customize the Component

All components accept props for customization. Let’s customize the shimmer effect:
src/routes/+page.svelte
<script lang="ts">
  import { ShimmerButton } from "$lib/components/magic-ui/shimmer-button";
</script>

<div class="flex min-h-screen flex-col items-center justify-center gap-4">
  <ShimmerButton 
    shimmerColor="#ff6b6b"
    shimmerDuration="2s"
    background="rgba(139, 0, 0, 1)"
  >
    Fast Red Shimmer
  </ShimmerButton>

  <ShimmerButton 
    shimmerColor="#4ecdc4"
    shimmerDuration="4s"
    borderRadius="12px"
    class="px-8 py-4 text-lg"
  >
    Slow Cyan Shimmer
  </ShimmerButton>

  <ShimmerButton 
    shimmerColor="#ffd700"
    shimmerSize="0.1em"
  >
    Thick Gold Shimmer
  </ShimmerButton>
</div>
Available Props:
  • shimmerColor - Color of the shimmer effect (default: "#ffffff")
  • shimmerSize - Thickness of the shimmer (default: "0.05em")
  • shimmerDuration - Animation speed (default: "3s")
  • borderRadius - Border radius (default: "100px")
  • background - Button background (default: "rgba(0, 0, 0, 1)")
  • class - Additional Tailwind classes

​
Try Another Component

Let’s add a text animation to complement our button:
1

Install Animated Gradient Text

Install the Animated Gradient Text component:
npx shadcn-svelte@latest add https://sv-animations.vercel.app/r/animated-gradient-text.json
2

Create a Hero Section

Combine both components to create an eye-catching hero section:
src/routes/+page.svelte
<script lang="ts">
  import { ShimmerButton } from "$lib/components/magic-ui/shimmer-button";
  import { AnimatedGradientText } from "$lib/components/magic-ui/animated-gradient-text";
</script>

<div class="flex min-h-screen flex-col items-center justify-center gap-8 px-4">
  <h1 class="text-center text-5xl font-bold md:text-7xl">
    Welcome to
    <br />
    <AnimatedGradientText 
      colorFrom="#ff6b6b" 
      colorTo="#4ecdc4"
      speed={1.5}
    >
      Svelte 5 Animations
    </AnimatedGradientText>
  </h1>
  
  <p class="max-w-2xl text-center text-lg text-gray-600 dark:text-gray-400">
    Beautiful, copy-paste animation components built with motion-sv and Tailwind CSS.
  </p>

  <ShimmerButton 
    shimmerColor="#4ecdc4"
    class="text-lg"
    onclick={() => alert('Getting started!')}
  >
    Get Started
  </ShimmerButton>
</div>

​
Complete Example: Morphing Text Hero

Here’s a more complete example using the Morphing Text component:
1

Install Morphing Text

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/morphing-text.json
2

Build the Hero

src/routes/+page.svelte
<script lang="ts">
  import { MorphingText } from "$lib/components/magic-ui/morphing-text";
  import { ShimmerButton } from "$lib/components/magic-ui/shimmer-button";
  import { AnimatedGradientText } from "$lib/components/magic-ui/animated-gradient-text";

  const words = ["Beautiful", "Smooth", "Modern", "Stunning"];
</script>

<div class="flex min-h-screen flex-col items-center justify-center gap-12 px-4">
  <!-- Morphing Hero Text -->
  <div class="flex flex-col items-center gap-4">
    <div class="text-center">
      <MorphingText texts={words} class="text-6xl font-bold md:text-8xl" />
    </div>
    
    <AnimatedGradientText>
      Animations for Svelte 5
    </AnimatedGradientText>
  </div>

  <!-- Description -->
  <p class="max-w-2xl text-center text-xl text-gray-600 dark:text-gray-400">
    Copy-paste animation components powered by motion-sv. No npm bloat, 
    full control over your code.
  </p>

  <!-- CTA Buttons -->
  <div class="flex flex-wrap items-center justify-center gap-4">
    <ShimmerButton onclick={() => window.location.href = '/installation'}>
      Get Started
    </ShimmerButton>
    
    <button 
      class="rounded-lg border border-gray-300 px-6 py-3 font-medium transition-colors hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800"
      onclick={() => window.open('https://github.com/SikandarJODD/animations', '_blank')}
    >
      View on GitHub
    </button>
  </div>
</div>

​
Understanding Component Structure

All Svelte 5 Animations components follow this pattern: 
<script lang="ts">
  import { cn } from "$lib/utils";
  import type { Snippet } from "svelte";
  
  // Props interface with types
  interface ComponentProps {
    children: Snippet;        // Svelte 5 snippet for content
    class?: string;           // Additional CSS classes
    // ... component-specific props
  }

  // Using Svelte 5 runes
  let { 
    children, 
    class: className,
    ...props 
  }: ComponentProps = $props();
</script>

<!-- Template with Tailwind classes -->
<div class={cn("base-classes", className)} {...props}>
  {@render children?.()}
</div>
Key Svelte 5 Features:
  • $props() rune for reactive props
  • Snippet type for renderable content
  • {@render children?.()} for rendering child content
  • TypeScript interfaces for type safety

​
Common Patterns

​
Combining Multiple Animations

You can layer multiple animation components: 
<script lang="ts">
  import { BlurFade } from "$lib/components/magic-ui/blur-fade";
  import { ShimmerButton } from "$lib/components/magic-ui/shimmer-button";
</script>

<BlurFade delay={0.2}>
  <ShimmerButton>
    Fades in then shimmers!
  </ShimmerButton>
</BlurFade>

​
Conditional Rendering

Use Svelte’s reactivity with animations: 
<script lang="ts">
  import { NumberTicker } from "$lib/components/magic-ui/number-ticker";
  
  let count = $state(0);
  let showAnimation = $state(false);
</script>

<button onclick={() => { count += 100; showAnimation = true; }}>
  Increment
</button>

{#if showAnimation}
  <NumberTicker value={count} />
{/if}

​
Responsive Animations

Use Tailwind’s responsive utilities: 
<MorphingText 
  texts={words} 
  class="text-4xl md:text-6xl lg:text-8xl"
/>

​
Component Discovery

To find the component URL for CLI installation:
  1. Visit any component page in the documentation
  2. Look for the installation command
  3. The URL follows this pattern: 
    https://sv-animations.vercel.app/r/{component-name}.json
For example:
  • Morphing Text: https://sv-animations.vercel.app/r/morphing-text.json
  • Shimmer Button: https://sv-animations.vercel.app/r/shimmer-button.json
  • Animated Beam: https://sv-animations.vercel.app/r/animated-beam.json

​
Next Steps

Now that you understand the basics:

Browse Components

Explore all 56+ available animation components

Component Structure

Understand how components are organized

Installation Methods

Learn CLI and manual installation options

Customization

Learn how to customize and extend components

​
Tips & Best Practices

Performance Considerations:
  • Avoid using too many heavy animations on a single page
  • Use IntersectionObserver (via motion-sv) to trigger animations when elements are visible
  • Test performance on lower-end devices
  • Consider prefers-reduced-motion for accessibility
Customization Tips:
  • All components support the class prop for additional Tailwind classes
  • Use CSS variables for theme-based customization
  • Modify the component source directly for deeper changes
  • Combine components creatively for unique effects

​
Getting Help

If you run into issues:
  • Check the component’s documentation page for specific requirements
  • Visit the GitHub repository to report issues
  • Follow @Sikandar_Bhide on Twitter for updates
  • Review the source code - it’s in your project!
Happy animating!

Build docs developers (and LLMs) love

Get started for freeTalk to us