animation tweaks

scripts/favicon.ts

@@ -16,10 +16,10 @@ const outputManifest = path.resolve(
 // https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
 const sizes = [32, 180, 192, 512]
 const outputMeta = `
-  <link rel="icon" href="/favicon.ico" sizes="any">
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-  <link rel="manifest" href="/manifest/manifest.webmanifest">
+  <link rel="icon" href="/favicon.ico" sizes="any" />
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+  <link rel="manifest" href="/manifest/manifest.webmanifest" />
 `
 
 function createManifest(iconsizes: number[]) {

src/components/Transitions.ts

@@ -1,34 +1,7 @@
 export const moveInTop = {
   initial: {
     opacity: 0,
-    y: -100,
-    transition: {
-      type: 'spring'
-    }
-  },
-  enter: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      type: 'spring',
-      duration: 0.3,
-      stiffness: 120
-    }
-  },
-  exit: {
-    opacity: 0,
-    y: -100,
-    transition: {
-      type: 'spring',
-      duration: 0.2
-    }
-  }
-}
-
-export const moveInBottom = {
-  initial: {
-    opacity: 0,
-    y: 100,
+    y: -50,
     transition: { type: 'spring' }
   },
   enter: {
@@ -42,7 +15,32 @@ export const moveInBottom = {
   },
   exit: {
     opacity: 0,
-    y: 100,
+    y: -50,
+    transition: {
+      type: 'spring',
+      duration: 0.2
+    }
+  }
+}
+
+export const moveInBottom = {
+  initial: {
+    opacity: 0,
+    y: 50,
+    transition: { type: 'spring' }
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring',
+      duration: 0.4,
+      stiffness: 120
+    }
+  },
+  exit: {
+    opacity: 0,
+    y: 50,
     transition: {
       type: 'spring'
     }