Skip to content

Svelte Magic UI, Svelte Aceternity UI, Svelte Components build using Tailwind CSS & Framer Motion

License

Notifications You must be signed in to change notification settings

SikandarJODD/svelte-animations

Repository files navigation

Svelte Components

Build using Tailwind CSS and Svelte motion.

  • Components build using Tailwind CSS works in Svelte 5 too.
  • Right now i am trying to convert each component to Svelte 5 using 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

New Aceternity UI Components

Name Preview Section
Animated Testimonial Visit Aceternity UI
Spotlight Visit Aceternity UI
Placeholders and vanish Input Visit Aceternity UI

New Components

Name Preview Section
Particles Visit Magic UI
Cool Mode Visit Magic UI
Shine Border Visit Magic UI
Magic Card Visit Magic UI
Encrypt Button Visit Magic UI

Svelte Animations Examples

Effects Description
Link Hover It's show small Image after hovering a tag
Modul Div. Crossfade Animation on Div, Inspired from modul.so
Spring Div Simple Usage of Spring on Extending div height & width
Dynamic Island Effect inspired from Emil Kowalski : Time, Ring, Silent
Reveal Link Reveal Link on Hover, Inspired from hover.dev

Feedback

If you have any feedback, please reach out at Twitter

Credits

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
  • Share this project with your friends on Twitter