Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month 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 (6 months ago)
Default Branch: master
Last Pushed: 2024-10-14T18:21:10.000Z (2 months ago)
Last Synced: 2024-11-11T21:11:51.539Z (about 1 month ago)
Topics: aceternity-ui, components, framer-motion, free-components, magicui, svelte, tailwindcss
Language: Svelte
Homepage: https://animation-svelte.vercel.app
Size: 8.24 MB
Stars: 615
Watchers: 11
Forks: 29
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Svelte Components

Build using Tailwind CSS and [**Svelte motion**](https://svelte-motion.gradientdescent.de).

- 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**](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)

  ![Preview](/static/portfolio_svelte.png)

#### [Start-up Landing Page](https://startup-sve.vercel.app)

- GitHub : [Repo](https://github.com/SikandarJODD/startup-template)

  ![Preview](/static//startup_sve.png)

## New Aceternity UI Components

| Name                          | Preview                                                                                 | Section       |

| ----------------------------- | --------------------------------------------------------------------------------------- | ------------- |

| Animated Testimonial          | [Visit](https://animation-svelte.vercel.app/a/components/animated-testimonials)         | Aceternity UI |

| Spotlight                     | [Visit](https://animation-svelte.vercel.app/a/components/spotlight)                     | Aceternity UI |

| Placeholders and vanish Input | [Visit](https://animation-svelte.vercel.app/a/components/placeholders-and-vanish-input) | Aceternity UI |

### New Components

| Name           | Preview                                                         | Section  |

| -------------- | --------------------------------------------------------------- | -------- |

| Particles      | [Visit](https://animation-svelte.vercel.app/magic/particles)    | Magic UI |

| Cool Mode      | [Visit](https://animation-svelte.vercel.app/magic/cool-mode)    | Magic UI |

| Shine Border   | [Visit](https://animation-svelte.vercel.app/magic/shine-border) | Magic UI |

| Magic Card     | [Visit](https://animation-svelte.vercel.app/magic/magic-card)   | Magic UI |

| Encrypt Button | [Visit](https://animation-svelte.vercel.app/magic/examples/11)  | 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](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)