Add basic animation

2024-10-13 03:33:40 -04:00
parent ad5ea2a37c
commit 38db18b05b
17 changed files with 216 additions and 27 deletions
--- a/src/components/widgets/Stats.astro
+++ b/src/components/widgets/Stats.astro
@@ -23,7 +23,7 @@ const {
    {
      stats &&
        stats.map(({ amount, title, icon }) => (
-          <div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500">
+          <div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500 intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade intersect-quarter">
            {icon && (
              <div class="flex items-center justify-center mx-auto mb-4 text-primary">
                <Icon name={icon} class="w-10 h-10" />