https://github.com/sikandarjodd/svelte-animations
Svelte Magic UI, Svelte Aceternity UI, Svelte Components build using Tailwind CSS & Framer Motion
https://github.com/sikandarjodd/svelte-animations
aceternity-ui components framer-motion free-components magicui svelte tailwindcss
Last synced: 9 days ago
JSON representation
Svelte Magic UI, Svelte Aceternity UI, Svelte Components build using Tailwind CSS & Framer Motion
- Host: GitHub
- URL: https://github.com/sikandarjodd/svelte-animations
- Owner: SikandarJODD
- License: mit
- Created: 2024-06-16T23:48:24.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2025-03-16T08:57:15.000Z (about 1 month ago)
- Last Synced: 2025-04-14T06:53:16.191Z (9 days ago)
- Topics: aceternity-ui, components, framer-motion, free-components, magicui, svelte, tailwindcss
- Language: Svelte
- Homepage: https://animation-svelte.vercel.app
- Size: 8.12 MB
- Stars: 878
- Watchers: 13
- Forks: 39
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Components
Build using Tailwind CSS and [**Svelte motion**](https://svelte-motion.gradientdescent.de).
### Important Note
- Components which includes svelte-motion library are not supported in Svelte 5.
- Only components which are build using Tailwind CSS and Svelte are supported in Svelte 5.
---
- Right now i am trying to convert each component to Svelte 5 using [**Motion-Start**](https://github.com/JonathonRP/motion-start)
### Svelte 5 Support Components Count
| UI Libs | Count | description |
| ------------- | -------------- | --------------------------------------------------------------------------- |
| Aceternity UI | 13 | build using svelte and tailwind css - you can easily migrate it to svelte 5 |
| Indie UI | All components | build using svelte and tailwind css - you can easily migrate it to svelte 5 |
| Luxe UI | 20 | build using svelte and tailwind css - you can easily migrate it to svelte 5 |
| Magic UI | 20+ | build using svelte and tailwind css - you can easily migrate it to svelte 5 |
- I will be converting the rest of the component to Svelte 5, so you can use it in your project in the coming days...
- I will be using Motion-Start Lib whcih is same as Svelte Motion but it works in Svelte 5 too.
---
### New Templates
#### [Minimalist Developer Portfolio](https://portfolio-sve.vercel.app)
- GitHub : [Repo](https://github.com/SikandarJODD/portfolio-template)
#### [Start-up Landing Page](https://startup-sve.vercel.app)
- GitHub : [Repo](https://github.com/SikandarJODD/startup-template)
## New Aceternity UI Components
| Name | Preview | Section |
| ----------------------------- | --------------------------------------------------------------------------------------- | ------------- |
| Placeholders and vanish Input | [Visit](https://animation-svelte.vercel.app/a/components/placeholders-and-vanish-input) | Aceternity UI |
### New Components
| Name | Preview | Section |
| ------------------------ | -------------------------------------------------------------------- | -------- |
| Colorful Text | [Visit](https://animation-svelte.vercel.app/magic/colorful-text) | Magic UI |
| Scratch To Reveal | [Visit](https://animation-svelte.vercel.app/magic/scratch-to-reeal) | Magic UI |
| Ripple Button | [Visit](https://animation-svelte.vercel.app/magic/ripple-button) | Magic UI |
| Interactive Hover Button | [Visit](https://animation-svelte.vercel.app/magic/interactive-hover) | Magic UI |
### Feedback
If you have any feedback, please reach out at [Twitter](https://twitter.com/Sikandar_Bhide)
### Credits
- [Magic UI](https://www.magicui.design/)
- [Aceternity UI](https://ui.aceternity.com)
- [Luxe UI](https://www.luxeui.com)
- [Indie UI](https://ui.indie-starter.dev)
- [Hover.dev](https://hover.dev)
Components are inspired from the above mentioned websites.
Thankyou everyone for building such amazing components.
### Support
- If you Like my work, you can sponsor me on [GitHub](https://github.com/sponsors/SikandarJODD)
- Share this project with your friends on [Twitter](https://twitter.com/intent/tweet?url=https://animation-svelte.vercel.app%0A&text=Svelte%20Animation%20Components%20Built%20using%20Svelte%20Motion%20and%20Tailwind%20CSS%0A&via=Sikandar_Bhide&hashtags=sveltejs,tailwindcss,webdev,frontend)