diff --git a/.vscode/settings.json b/.vscode/settings.json
index b1567d9..195e86b 100644
--- a/.vscode/settings.json
+++ b/.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"
 }
diff --git a/app/app.vue b/app/app.vue
index 2b1be09..3a0e1d0 100644
--- a/app/app.vue
+++ b/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 />
diff --git a/app/assets/icons/mail.svg b/app/assets/icons/mail.svg
deleted file mode 100644
index d372b19..0000000
--- a/app/assets/icons/mail.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="32"
-  height="32"
-  viewBox="0 0 24 24"
->
-  <path
-    fill="currentColor"
-    opacity="0.3"
-    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.75"
-  />
-  <path
-    fill="currentColor"
-    d="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.89z"
-  />
-</svg>
diff --git a/app/assets/images/lg.avif b/app/assets/images/lg.avif
deleted file mode 100644
index f8b8c2c..0000000
Binary files a/app/assets/images/lg.avif and /dev/null differ
diff --git a/app/assets/images/sm.avif b/app/assets/images/sm.avif
deleted file mode 100644
index 48ec2af..0000000
Binary files a/app/assets/images/sm.avif and /dev/null differ
diff --git a/app/assets/styles/index.css b/app/assets/styles/index.css
index 9c5e379..92a76a2 100644
--- a/app/assets/styles/index.css
+++ b/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;
+  }
+}
diff --git a/app/components/BrushGradient.vue b/app/components/BrushGradient.vue
new file mode 100644
index 0000000..1e47553
--- /dev/null
+++ b/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>
diff --git a/app/components/MailMorphIcon.vue b/app/components/MailMorphIcon.vue
new file mode 100644
index 0000000..1992c71
--- /dev/null
+++ b/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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bb0d508..6457d65 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,13 +4,18 @@
     'Software Engineer turning ideas into immersive web experiences. Blending thoughtful design with solid engineering.';
   const ogImage = 'https://gerasaka.dev/og-image.png';
   const ogImageAlt = 'Personal website of Gerry Julio';
+  const email = 'gerryjulioo@gmail.com';
+  const copied = ref(false);
+  let copiedTimeout: ReturnType<typeof setTimeout>;
+
+  async function copyEmail() {
+    await navigator.clipboard.writeText(email);
+    copied.value = true;
+    clearTimeout(copiedTimeout);
+    copiedTimeout = setTimeout(() => (copied.value = false), 2000);
+  }
+
   const socials = [
-    {
-      label: 'email',
-      url: 'mailto:gerryjulioo@gmail.com',
-      icon: 'grsk:mail',
-      color: 'hover:text-[#909692]',
-    },
     {
       label: 'linkedin',
       url: 'https://www.linkedin.com/in/gerryjulio/',
@@ -84,58 +89,119 @@
 
 <template>
   <main class="bg-surface max-h-screen">
-    <picture class="fixed top-0 right-0">
-      <source media="(max-width: 640px)" type="image/avif" srcset="~/assets/images/sm.avif" />
-      <source type="image/avif" srcset="~/assets/images/lg.avif" />
-
-      <img
-        src="~/assets/images/lg.avif"
-        alt=""
-        role="presentation"
-        fetchpriority="high"
-        class="w-full md:w-200 lg:w-250"
-      />
-    </picture>
+    <BrushGradient
+      class="fixed top-0 right-0 w-full md:w-200 lg:w-250 translate-x-1/3 -translate-y-1/4"
+    />
 
     <div class="flex flex-col min-h-svh mx-auto p-8 py-20 md:p-20 lg:px-32 lg:max-w-5xl relative">
-      <Icon name="grsk:logo" class="text-primary-500" size="56" />
+      <Icon name="grsk:logo" class="fade-in text-primary-500" size="56" />
 
-      <div>
+      <div class="body">
         <h1
-          class="text-title mt-8 leading-tight inline-block text-transparent bg-clip-text bg-linear-to-r from-foreground from-30% via-primary-800 via-60% to-primary-500"
+          class="fade-in text-title mt-12 leading-tight inline-block text-transparent bg-clip-text bg-linear-to-r from-foreground from-30% via-primary-800 via-60% to-primary-500 bg-size-[200%_auto]"
         >
           Gerry Julio
         </h1>
-        <p class="text-subtitle">Software Engineer</p>
+        <p class="fade-in text-subtitle">Software Engineer</p>
 
-        <p class="text-body mt-10">
+        <p class="fade-in text-body mt-10">
           I'm a software engineer who cares about simplifying complexity and elevating every aspect
           of the user experience.
         </p>
 
-        <p class="text-body mt-4">
+        <p class="fade-in text-body mt-4">
           I'm currently building quote and order software for global telecommunication companies.
           Previously, I built high-performance payment systems that people rely on every day.
         </p>
 
-        <p class="text-body mt-4">
+        <p class="fade-in text-body mt-4">
           Outside of work, I'm usually side-questing - fumbling through guitar practice, playing
           casual games for fun, or café-hopping with friends. I read most days and write when an
           idea won't leave me alone.
         </p>
-      </div>
 
-      <div class="flex items-center gap-4 mt-8 text-muted">
-        <NuxtLink
-          v-for="{ label, url, icon, color } in socials"
-          :key="label"
-          :to="url"
-          :aria-label="label"
-          :class="color"
-        >
-          <Icon :name="icon" size="28" class="transition-colors duration-300" />
-        </NuxtLink>
+        <div class="fade-in flex items-center gap-4 mt-8 text-muted min-w-7">
+          <button
+            type="button"
+            aria-label="Copy email address"
+            class="social-link group relative cursor-pointer"
+            :data-copied="copied || undefined"
+            @click="copyEmail"
+          >
+            <MailMorphIcon :open="copied" :size="28" />
+            <span
+              role="status"
+              class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 rounded-md bg-foreground text-surface text-xs whitespace-nowrap opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100 group-data-copied:opacity-100"
+            >
+              {{ copied ? 'Copied!' : 'Copy email' }}
+            </span>
+          </button>
+
+          <NuxtLink
+            v-for="{ label, url, icon, color } in socials"
+            :key="label"
+            :to="url"
+            :aria-label="label"
+            :class="color"
+            class="social-link"
+          >
+            <Icon :name="icon" size="28" />
+          </NuxtLink>
+        </div>
       </div>
     </div>
   </main>
 </template>
+
+<style scoped>
+  @reference "~/assets/styles/index.css";
+
+  .fade-in {
+    animation: fade-in 500ms var(--ease-elegant) both;
+  }
+
+  .body > .fade-in {
+    animation-delay: calc(sibling-index() * 70ms);
+  }
+
+  h1.fade-in {
+    animation-name: fade-in, gradient-slide;
+    animation-duration: 500ms, 5s;
+    animation-timing-function: var(--ease-elegant), ease-in-out;
+    animation-fill-mode: both;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(3px);
+      filter: blur(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
+  }
+
+  @keyframes gradient-slide {
+    from {
+      background-position: 0% 50%;
+    }
+    to {
+      background-position: 100% 50%;
+    }
+  }
+
+  .social-link {
+    display: flex;
+    align-items: center;
+    transition:
+      transform 160ms var(--ease-out),
+      color 150ms ease;
+  }
+
+  .social-link:active {
+    @apply scale-95;
+  }
+</style>
diff --git a/public/favicon-dark.ico b/public/favicon-dark.ico
index aadeba6..19d8c97 100644
Binary files a/public/favicon-dark.ico and b/public/favicon-dark.ico differ
diff --git a/public/favicon-dev.ico b/public/favicon-dev.ico
new file mode 100644
index 0000000..0767986
Binary files /dev/null and b/public/favicon-dev.ico differ
diff --git a/public/favicon-sepia.ico b/public/favicon-sepia.ico
index b78048a..7fddf91 100644
Binary files a/public/favicon-sepia.ico and b/public/favicon-sepia.ico differ
diff --git a/public/favicon.ico b/public/favicon.ico
index c5b5250..0890d2b 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ