Animated Hero Tagline with Scroll Animations

<div class="animate-on-scroll animate text-center blur-slide">
  <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4">
    <span class="animate-on-scroll slide-left stagger-1 text-3xl sm:text-4xl md:text-5xl tracking-tight font-semibold italic font-playfair text-neutral-900 dark:text-white animate">Refresh your skin,</span>
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ead6a95d-ae67-4b24-9f26-ae02bf27cb1e_3840w.jpg" alt="Model applying serum" class="animate-on-scroll rotate-in stagger-2 inline-block sm:h-12 sm:w-12 md:h-14 md:w-14 bg-white w-10 h-10 object-cover ring-white ring-4 rounded-2xl shadow-xl -rotate-6 animate" style="">
    <span class="animate-on-scroll slide-right stagger-3 text-3xl sm:text-4xl md:text-5xl tracking-tight font-semibold italic font-playfair text-neutral-900 dark:text-white animate">love yourself,</span>
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cab73078-80bd-4f30-8d0d-775e21f09e27_3840w.jpg" alt="Spa mask moment" class="animate-on-scroll rotate-in stagger-4 inline-block sm:h-12 sm:w-12 md:h-14 md:w-14 ring-white ring-4 bg-white w-10 h-10 object-cover rounded-2xl shadow-xl rotate-6 animate" style="">
  </div>
  <div class="flex flex-wrap gap-3 sm:gap-4 mt-2 items-center justify-center">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/16c0110c-f333-4a45-a83a-d83ff9487661_3840w.jpg" alt="Leaf detail" class="animate-on-scroll scale-up stagger-5 inline-block sm:h-12 sm:w-20 md:h-14 md:w-24 ring-white ring-4 w-0 h-0 object-cover rounded-2xl shadow-xl -rotate-3 animate" style="">
    <span class="animate-on-scroll slide-up stagger-6 text-3xl sm:text-4xl md:text-5xl tracking-tight font-semibold italic font-playfair text-neutral-900 dark:text-white animate">renew your glow.</span>
  </div>
</div>