Svelte Animation Components

Svelte Animation Components is a free, open-source collection of Svelte animation components and starter templates built with Tailwind CSS and Svelte Motion, offering drop-in UI effects inspired by Magic UI, Aceternity UI, and Luxe UI.

What is Svelte Animation Components?

Svelte Animation Components is a repository and demo site by Sikandar Bhide (Twitter @Sikandar_Bhide) that packages reusable Svelte animation components and learning examples. It takes Svelte components and outputs animated UI elements such as buttons, text effects, and shaders that developers can copy or install directly. The project runs on Svelte, with a new Svelte 5 version hosted at sv-animations.vercel.app, and is styled with Tailwind CSS, using Svelte Motion and the motion-sv library for animations.

Key Features

• Component libraries — Includes Svelte ports of Aceternity UI, Magic UI, and Luxe UI, plus a Framer Learning section with examples.
• CLI installation — The new Svelte 5 version supports installing components directly via the shadcn-svelte CLI.
• TypeScript support — All components in the new version are fully typed.
• Light and dark mode — Components ship with both theme variants included.
• New animation components — Adds Dither Shader, Pixel Image, Text Animate, Placeholders and Vanish Input, Colorful Text, Scratch To Reveal, Ripple Button, and Interactive Hover Button.
• Open source templates — Includes a Minimalist Developer Portfolio and a Startup Template, each with a public GitHub repository.
• Premium template — A paid Startup Template (SaaS) is offered with the discount code ILOVESVELTE for 30% off.

Who is it for?

• Svelte developers who want ready-made animation components without building them from scratch.
• Frontend designers who need light/dark mode UI effects like ripple buttons and hover interactions for landing pages.
• Developers porting React UI libraries who want Aceternity or Magic UI equivalents in Svelte.
• Startup founders who can use the open-source or premium startup template to launch a site quickly.

What can you do with Svelte Animation Components?

• Add text animations — Use Text Animate and Colorful Text for animated headline effects in landing pages.
• Create interactive buttons — Ripple Button and Interactive Hover Button provide visual feedback on click and hover.
• Build image effects — Pixel Image and Dither Shader add pixelation and shader-based visuals to images.
• Enhance forms — Placeholders and Vanish Input animates placeholder text as users focus and type.

How does it work?

Browse the live demo at animation-svelte.vercel.app, pick a component, and either copy the code or install it through the shadcn-svelte CLI on the new Svelte 5 site. The documentation at sv-animations.vercel.app provides usage details for each component.

Pricing

The component libraries and open-source templates are free to use, and the repository has 1,216 GitHub stars. A premium Startup Template is sold separately with a 30% discount; the price amount is not listed on the page.

FAQ

Is Svelte Animation Components free?

The open-source components and templates are free to use, and the project has 1,216 GitHub stars. A separate premium startup template is paid, with a 30% discount code available.

What is the new Svelte 5 version?

The new version at sv-animations.vercel.app adds CLI installation via shadcn-svelte, full TypeScript support, light/dark mode, and components like Dither Shader, Pixel Image, and Text Animate, built on the motion-sv library.

Which UI libraries inspired these components?

The components are ports or adaptations of Magic UI, Aceternity UI, Luxe UI, Indie UI, and Hover.dev, with credit listed on the page.

Does it support TypeScript?

Yes, the new Svelte 5 version includes full TypeScript support for all components.