Add pulsating hand

dappforce · Jul 11, 2024 · 46982b5 · 46982b5
1 parent 45b5fcc
commit 46982b5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/assets/graphics/hand-point.svg b/src/assets/graphics/hand-point.svg
diff --git a/src/components/modals/LikeIntroModal.tsx b/src/components/modals/LikeIntroModal.tsx
@@ -197,7 +197,7 @@ export default function LikeIntroModal() {
                 },
               }}
             />
-            <HandPoint className='pointer-events-none absolute -bottom-5 left-11 animate-pulse' />
+            <HandPoint className='pointer-events-none absolute -bottom-5 left-11 h-12 w-12 animate-scale' />
           </div>
           <div className='mt-6 flex flex-col items-center gap-2 text-center'>
             <span className='font-medium text-text-muted'>Points earned</span>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,14 +7,19 @@ module.exports = {
     extend: {
       animation: {
         fade: 'fadeOut .4s ease-in-out',
+        scale: 'scale 1s ease-in-out infinite',
       },
 
-      keyframes: () => ({
+      keyframes: {
         fadeOut: {
           '0%': { opacity: 0 },
           '100%': { opacity: 1 },
         },
-      }),
+        scale: {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.25)' },
+        },
+      },
 
       gridTemplateRows: {
         0: 'repeat(1, minmax(0, 0fr))',