Luxe UI Question — badge component

[jasonkolodziej]

Hi there,
Amazing work here!

I noticed that you were having some svelte 5 migration occurring.

I wanted to ask if the Badge was facing some issues showing its animation. After following the tutorial, I was able to get the styling to shape and color the span, except the animation. I wasn’t sure if this need to be wrapped in a svelte-motion element or motion-start or if it would work directly In the normal span.

Any insights would be greatly appreciated.

Notes:

• using svelte 5
• tailwindcss installation using vite—- https://tailwindcss.com/docs/installation/framework-guides/sveltekit
  • not with postcss

[SikandarJODD]

Here is the CSS Code :

@keyframes flip {
  to {
    transform: rotate(360deg);
  }
}

@keyframes kitrotate {
  to {
    transform: rotate(90deg);
  }
}

.flip-animation {
  animation: flip 6s infinite steps(2, end);
}

.kitrotate-animation {
  animation: kitrotate 3s linear infinite both;
}

Usage :

<div class="flip-animation">Flipping Effect</div>
<div class="kitrotate-animation">Rotating Effect</div>