Svelte 5 Animations
sv-animations.vercel.app- Category
- Developer Tools
- Rank
- No. 2816Tools index
Previous survey · No. 2743 ·
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Design & Media
- Interfaces
- Web · SDK
- Builder
- sikandarjodd
- GitHub
- 362 stars
- Date
About
A comprehensive collection of 50+ free and open-source animated components and effects specifically built for Svelte 5 applications. Provides ready-to-use animation components built with TypeScript, Tailwind CSS, and Motion SV to help developers quickly add polished animations to their Svelte projects.
What it does
A Svelte 5 port of three well-known React animation kits: Magic UI, Spell UI and Fancy Components. You do not install it as a package. Each effect, such as a morphing headline, a beam drawn between two elements or a particle burst that follows the mouse, is published as a registry entry that the shadcn-svelte command line copies straight into your own source tree, along with any npm packages and CSS keyframes it needs. Most of the motion runs on motion-sv, a Svelte port of the Motion library once called Framer Motion.
Why it's ranked here
The case rests on filling a real gap. Svelte has far fewer ready-made animation kits than React, and this one ports 88 components across three libraries under the MIT license, all installable by URL through the standard shadcn-svelte tooling. Every component page also serves a plain-text copy of its documentation written for AI coding assistants, which suits agent-driven workflows. The caveat is maturity: it is a single-author project, the Fancy registry is still marked as under construction, and several Magic UI originals are not ported yet.
What's good
Copy-in delivery means no runtime library to lock into: once a component lands, you own and can edit the file. Registry entries declare their npm dependencies and inject any custom keyframes and theme variables, so an effect like the shining border arrives with its animation already wired into your Tailwind theme. The repository also ships an agent skill file documenting motion-sv patterns, including the layout-animation workaround Svelte needs because it lacks a pre-update snapshot hook. The contribution guide asks for a preview, variant examples and AI-readable docs for every component.
Tradeoffs
The package manifest defines no test script, only type checking and Prettier formatting. The Magic UI tracking list still leaves items like Terminal, Confetti, Particles, Number Ticker and the device mockups unported. The contribution guide tells authors to run a registry build command that does not exist among the manifest scripts, which uses separate per-library build commands instead. Everything depends on motion-sv, a young port, so its gaps become yours.
How to use it well
Best for a SvelteKit marketing page or landing site that wants Magic UI style polish without switching frameworks. Start from a project with Tailwind and shadcn-svelte initialised, add motion-sv, then pull only the components you need by URL, using the separate path prefixes for Magic UI, Spell UI and Fancy entries. Treat each copied file as your own code and review it. It does not cover general UI primitives such as forms or dialogs; pair it with shadcn-svelte proper for those.
Technical notes+
README.md documents three registry prefixes (/r/ Magic UI, /s/ Spell UI, /f/ Fancy, the last marked building). package.json is private, uses SvelteKit with Vite and Tailwind 4, and builds registries via shadcn-svelte registry build against separate spell and fancy registry files; its scripts include check and lint but no test runner. registry.json entries list per-component files, npm dependencies (mostly motion-sv and runed) and css/cssVars keyframes. CREATE_COMPONENT_GUIDE.md references pnpm registry:build, absent from package.json scripts. SKILL.md documents createLayoutMotion and inViewOptions usage. collections/magic_ui.md tracks port status. components.json targets the shadcn-svelte schema with TypeScript enabled.
Observed
- License
- MIT
- Framework
- Svelte 5 with SvelteKit and Tailwind CSS
- Install surface
- shadcn-svelte CLI add by registry URL; components are copied into the user's project
- Animation engine
- motion-sv (Svelte port of Motion)
- Package
- Private; not published as an npm package
- Testing
- No test script in package.json; only svelte-check and Prettier
- AI docs
- Per-component plain-text docs route and a motion-sv agent skill file
- Port status
- Magic UI tracking list includes unported components
Read from README.md, package.json, LICENSE, SKILL.md, registry.json, CREATE_COMPONENT_GUIDE.md, src/lib/index.ts, src/lib/components/magic/marquee/index.ts, src/lib/components/fancy/text-rotate/index.ts, collections/magic_ui.md, components.json.
What it can do
Provide ready-to-use animated components
Svelte 5 project → Pre-built animation components
Generate TypeScript-compatible animation code
Component selection → TypeScript animation code
Apply Tailwind CSS styled animations
Component requirements → CSS-styled animated elements
Integrate Motion SV animation effects
Animation parameters → Motion-based animated components
Add polished animations to Svelte applications
Basic Svelte components → Enhanced animated UI elements
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.