feat(animation): add animation on main page

.vscode/settings.json

@@ -13,5 +13,6 @@
   "prettier.bracketSpacing": true,
   "prettier.semi": true,
   "prettier.tabWidth": 2,
-  "css.customData": [".vscode/tailwind.json"]
+  "css.customData": [".vscode/tailwind.json"],
+  "css.lint.unknownAtRules": "ignore"
 }

app/app.vue

@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+  useHead({
+    link: [{ rel: 'icon', href: import.meta.dev ? '/favicon.ico' : '/favicon.ico' }],
+  });
+</script>
+
 <template>
   <div>
     <NuxtPage />

app/assets/styles/index.css

@@ -22,8 +22,25 @@
   --color-primary-800: #21436b;
   --color-primary-900: #162c47;
   --color-primary-950: #0d1b2b;
+
+  --ease-elegant: cubic-bezier(0.5, 1, 0.85, 1);
 }
 
 :root {
   color-scheme: light;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}

app/components/BrushGradient.vue

@@ -0,0 +1,138 @@
+<template>
+  <svg
+    viewBox="0 0 1194 596"
+    fill="none"
+    role="presentation"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g class="brush-stroke">
+      <ellipse
+        cx="491.649"
+        cy="83.5572"
+        rx="491.649"
+        ry="83.5572"
+        transform="matrix(0.968801 -0.24784 0.509975 0.860189 165.553 451.69)"
+        fill="url(#brush-paint0)"
+        fill-opacity="0.25"
+      />
+    </g>
+    <g class="brush-stroke">
+      <ellipse
+        cx="483.495"
+        cy="139.173"
+        rx="483.495"
+        ry="139.173"
+        transform="matrix(0.968801 -0.24784 0.509975 0.860189 -9.99996 343.178)"
+        fill="url(#brush-paint1)"
+        fill-opacity="0.25"
+      />
+    </g>
+    <g class="brush-stroke">
+      <ellipse
+        cx="532.738"
+        cy="107.968"
+        rx="532.738"
+        ry="107.968"
+        transform="matrix(0.968801 -0.24784 0.509975 0.860189 -9.53073 291.067)"
+        fill="url(#brush-paint2)"
+        fill-opacity="0.25"
+      />
+    </g>
+    <g class="brush-stroke">
+      <ellipse
+        cx="412.289"
+        cy="83.5572"
+        rx="412.289"
+        ry="83.5572"
+        transform="matrix(0.968801 -0.24784 0.509975 0.860189 77.5196 204.363)"
+        fill="url(#brush-paint3)"
+        fill-opacity="0.25"
+      />
+    </g>
+
+    <defs>
+      <radialGradient
+        id="brush-paint0"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(491.649 83.5572) scale(491.649 83.5572)"
+      >
+        <stop stop-color="#4285D5" />
+        <stop offset="1" stop-color="#709FD7" stop-opacity="0" />
+      </radialGradient>
+      <radialGradient
+        id="brush-paint1"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(483.495 139.173) scale(483.495 139.173)"
+      >
+        <stop stop-color="#4285D5" />
+        <stop offset="1" stop-color="#709FD7" stop-opacity="0" />
+      </radialGradient>
+      <radialGradient
+        id="brush-paint2"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(532.738 107.968) scale(532.738 107.968)"
+      >
+        <stop stop-color="#4285D5" />
+        <stop offset="1" stop-color="#709FD7" stop-opacity="0" />
+      </radialGradient>
+      <radialGradient
+        id="brush-paint3"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(412.289 83.5572) scale(412.289 83.5572)"
+      >
+        <stop stop-color="#4285D5" />
+        <stop offset="1" stop-color="#709FD7" stop-opacity="0" />
+      </radialGradient>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+  @reference "~/assets/styles/index.css";
+
+  .brush-stroke {
+    opacity: 0;
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: brush-in 1100ms var(--ease-elegant, cubic-bezier(0.23, 1, 0.32, 1)) forwards;
+  }
+
+  .brush-stroke:nth-of-type(1) {
+    animation-delay: 0ms;
+  }
+  .brush-stroke:nth-of-type(2) {
+    animation-delay: 140ms;
+  }
+  .brush-stroke:nth-of-type(3) {
+    animation-delay: 280ms;
+  }
+  .brush-stroke:nth-of-type(4) {
+    animation-delay: 420ms;
+  }
+
+  @keyframes brush-in {
+    from {
+      opacity: 0;
+      transform: scale(0.8) translateX(48px);
+      filter: blur(14px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateX(0);
+      filter: blur(0);
+    }
+  }
+</style>

app/components/MailMorphIcon.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+  const props = withDefaults(defineProps<{ open?: boolean; size?: number | string }>(), {
+    open: false,
+    size: 28,
+  });
+
+  const FLAP_CLOSED =
+    'M6.75 4.25a3.25 3.25 0 0 0-3.23 2.89l6.85 3.93a3.26 3.26 0 0 0 3.26 0l6.85-3.93a3.26 3.26 0 0 0-3.23-2.89l-10.5 0a0.01 0.01 0 0 0 0 0z';
+  const FLAP_OPEN =
+    'M13.58 11.91a3.3 3.3 0 0 1-3.25 0l-6.53-3.78a3.25 3.25 0 0 1 1.36-1.41l5.25-2.84a3.2 3.2 0 0 1 3.09 0l5.25 2.84a3.22 3.22 0 0 1 1.4 1.5z';
+
+  const flapPath = computed(() => (props.open ? FLAP_OPEN : FLAP_CLOSED));
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <path
+      fill="currentColor"
+      class="body-path"
+      d="M6.75 2.75h10.5A4.76 4.76 0 0 1 22 7.5v9a4.76 4.76 0 0 1-4.75 4.75H6.75A4.75 4.75 0 0 1 2 16.5v-9a4.75 4.75 0 0 1 4.75-4.75z"
+      :opacity="open ? 0 : 0.3"
+    />
+    <path
+      fill="currentColor"
+      class="body-path"
+      d="m21.84 8.561l-.09-.36a5 5 0 0 0-.47-1a4.75 4.75 0 0 0-1.82-1.74l-5.25-2.84a4.8 4.8 0 0 0-4.51 0l-5.25 2.84a4.75 4.75 0 0 0-1.82 1.74a4.3 4.3 0 0 0-.46 1v.14A4.6 4.6 0 0 0 2 9.571v7.62a4.76 4.76 0 0 0 4.75 4.75h10.5a4.75 4.75 0 0 0 4.75-4.75v-7.63a4.8 4.8 0 0 0-.16-1z"
+      :opacity="open ? 0.3 : 0"
+    />
+    <path fill="currentColor" class="morph-path" :d="flapPath" />
+  </svg>
+</template>
+
+<style scoped>
+  .morph-path {
+    transition: d 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
+  }
+
+  .body-path {
+    transition: opacity 0.35s ease;
+  }
+</style>