Skip to main content

​
Svelte 5 Animations

Beautiful, copy-paste animation components for Svelte 5. Built with motion-sv and Tailwind CSS.

56+ Components

A comprehensive collection of pre-built animation components ready to use in your Svelte 5 projects.

Motion-SV Powered

Built on top of motion-sv, a powerful animation library for Svelte that provides smooth, performant animations.

Tailwind CSS

Styled with Tailwind CSS for easy customization and seamless integration with your design system.

Copy & Paste

No npm package bloat. Simply copy the components you need directly into your project via CLI or manually.

​
What’s Included?

Svelte 5 Animations provides a rich set of animation components organized into several categories:

​
Text Animations

  • Morphing Text - Smooth text transitions with blur effects
  • Animated Gradient Text - Gradient backgrounds that transition between colors
  • Animated Shiny Text - Shimmer effects that travel across text
  • Hyper Text - Dynamic text reveal animations
  • Typing Animation - Realistic typing effects
  • Word Rotate - Rotating word carousel animations
  • Text Animate - Blur, slide, scale, and fade effects with granular control
  • Aurora Text - Colorful aurora-like text effects
  • Line Shadow Text - Text with animated shadow effects
  • Stagger Text - Staggered character animations

​
Button & Interactive Components

  • Shimmer Button - Buttons with traveling light effects
  • Shiny Button - Glossy button animations
  • Rainbow Button - Multi-color gradient buttons
  • Pulsating Button - Pulsing animation effects
  • Ripple Button - Click ripple effects
  • Interactive Hover Button - Dynamic hover interactions
  • Cool Mode - Confetti effects on interaction

​
Background & Layout Effects

  • Animated Beam - Animated connections between elements
  • Animated Grid Pattern - Dynamic grid backgrounds
  • Animated Circular Progress Bar - Progress indicators with smooth animations
  • Dot Pattern - Animated dot grid backgrounds
  • Grid Pattern - Geometric grid patterns
  • Retro Grid - Nostalgic retro-style grids
  • Flickering Grid - Dynamic flickering effects
  • Meteors - Falling meteor animations
  • Aurora - Northern lights-style backgrounds
  • Warp Background - Warp speed effects

​
UI Components

  • Bento Grid - Modern bento-box layouts
  • Magic Card - Cards with hover effects
  • Neon Gradient Card - Glowing neon borders
  • Avatar Circles - Animated avatar groups
  • Marquee - Infinite scrolling content
  • Dock - MacOS-style dock component
  • File Tree - Animated file explorer

​
Advanced Effects

  • Lens - Magnification lens effect
  • Border Beam - Animated border highlights
  • Shine Border - Shining border animations
  • Ripple - Water ripple effects
  • Confetti - Celebration confetti
  • Icon Cloud - 3D rotating icon clouds
  • Orbiting Circles - Orbital motion animations
  • Scroll Progress - Page scroll indicators
  • Video Text - Video masked as text
  • Pixel Image - Pixelation effects
  • Progressive Blur - Gradient blur effects
And many more!

Installation

Get started by setting up your Svelte 5 project with all the required dependencies.

Quick Start

Learn how to add your first animation component in under 5 minutes.

​
Philosophy

Unlike traditional component libraries distributed via npm, Svelte 5 Animations takes a different approach:
Copy-Paste Architecture: Components are copied directly into your codebase, giving you full ownership and control. Modify them however you need without worrying about breaking changes in updates.
This approach offers several benefits:
  • Full Control - The code lives in your project. Customize it freely.
  • No Dependencies Bloat - Only include what you use.
  • Easy to Understand - Read and learn from the source code.
  • Framework Native - Built specifically for Svelte 5 with runes and snippets.

​
Requirements

Before using Svelte 5 Animations, ensure you have:
  • SvelteKit - The official Svelte application framework
  • Tailwind CSS - Utility-first CSS framework
  • shadcn-svelte - Component architecture (used for CLI installation)
  • motion-sv - Animation library dependency
All components are built with Svelte 5’s new features including runes ($state, $props, $derived) and the snippet API.

​
Community

Svelte 5 Animations is inspired by Magic UI and built with love for the Svelte community.
  • Follow @Sikandar_Bhide on Twitter
  • Report issues on GitHub
  • Suggest new components and improvements
  • Share your creations on social media

​
What’s Next?

Ready to get started? Continue to the installation guide to set up your project, or jump straight to the quick start guide to add your first animation component.

Build docs developers (and LLMs) love

Get started for freeTalk to us