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/ui/WidgetWrapper.astro
+++ b/src/components/ui/WidgetWrapper.astro
@@ -22,7 +22,10 @@ const WrapperTag = as;
  </div>
  <div
    class:list={[
-      twMerge('relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default', containerClass),
+      twMerge(
+        'relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade',
+        containerClass
+      ),
      { dark: isDark },
    ]}
  >