Svelte 5 Animations

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

Installation

1. Create SvelteKit project with Tailwind CSS

   pnpm dlx sv create my-app --add tailwindcss
   

2. Initialize shadcn-svelte

   pnpm dlx shadcn-svelte@latest init
   

3. Install motion-sv library:

   pnpm add motion-sv
   

Usage

1. Visit any component page
2. Install component via CLI or copy manually:

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

3. Check out the examples for more usage patterns
4. Found an issue? Reach out via Twitter or open a GitHub issue

Inspiration

This project is inspired by Magic UI

• Magic UI

Share & Support

• Share animations on Twitter and social platforms
• Open new issues - it helps me solve problems
• Suggest new components & improvements
• Follow Bhide Svelte on Twitter

Made with ❤️ for the Svelte community