Goodies
Meteors
Shower your UI with meteors.... For whatever reason you want to do that.
Credits
Shout out to Magic UI for the inspiration. I actually discovered this package while browsing their website.
Getting Started
Add Animation
You will need to add this to your tailwind.css file.
@theme inline {
--animate-meteor: meteor 5s linear infinite;
@keyframes meteor {
0% {
transform: rotate(var(--angle)) translateX(0);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: rotate(var(--angle)) translateX(-500px);
opacity: 0;
}
}
}
Create Component
Create the component Meteors.client.vue in the components directory.
Code Snippet Error
Cannot load code:
/components/Ui/Meteors.client.vueUsage
Basic
We can add the UiMeteors component to trigger the meteors.
Meteors