From 63796d127ee00805bf87f7f5c5dbbcf85034ee1c Mon Sep 17 00:00:00 2001
From: jeanGaston <paul@jeangaston.xyz>
Date: Wed, 29 Jul 2026 20:14:02 +0200
Subject: [PATCH] feat(logo): retime LoveFusion merge animation, add Hachi Maru
 Pop wordmark, emoji favicon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LoveFusion:
- Swapped sides per request: love (was heart) now enters from the
  left, envelope from the right, converging at center.
- Retimed the crossfade so opacity/scale start dropping the instant
  they reach center instead of dwelling there fully-opaque and
  overlapping - the previous timing had a visible window where the
  heart span rendered on top of the envelope span (DOM order stacking)
  before either had faded, which read as a glitch rather than a merge.
- The white flash now ramps up in sync with that fade (bigger too:
  w-8 base, larger blur/spread, peak scale 2.4 vs 1.8) so it's already
  bright enough to mask the crossing before the two glyphs are fully
  gone, then blooms back out into the merged emoji.
- Wordmark text ("love"/"envelope"/"lovelope.app") now renders in
  Hachi Maru Pop (next/font/google), scoped to this component only -
  the app's Bricolage Grotesque display font elsewhere is untouched.

Favicon:
- Replaced the envelope-outline SVG mark with 💌 on the same pink
  rounded-square backdrop, moved from public/icon.svg to
  src/app/icon.svg (Next's file-based icon convention, so it's
  auto-linked as <link rel="icon">). Tried next/og's ImageResponse
  first but it hit a Windows-specific "Invalid URL" bug in the
  Next 14.2.35-bundled @vercel/og font loader; a static SVG sidesteps
  it entirely and is simpler besides. manifest.webmanifest already
  pointed at /icon.svg so no change needed there - same URL, new
  source file.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/icon.svg               |  5 ----
 src/app/icon.svg              |  4 +++
 src/components/LoveFusion.tsx | 53 +++++++++++++++++++----------------
 3 files changed, 33 insertions(+), 29 deletions(-)
 delete mode 100644 public/icon.svg
 create mode 100644 src/app/icon.svg

diff --git a/public/icon.svg b/public/icon.svg
deleted file mode 100644
index 6bfb986..0000000
--- a/public/icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect width="100" height="100" rx="22" fill="#ec4899"/>
-  <rect x="18" y="28" width="64" height="46" rx="6" fill="white"/>
-  <path d="M18 36 L50 60 L82 36" fill="none" stroke="#ec4899" stroke-width="5" stroke-linejoin="round"/>
-</svg>
diff --git a/src/app/icon.svg b/src/app/icon.svg
new file mode 100644
index 0000000..a96a599
--- /dev/null
+++ b/src/app/icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="22" fill="#ec4899"/>
+  <text x="50" y="58" font-size="52" text-anchor="middle" dominant-baseline="middle">💌</text>
+</svg>
diff --git a/src/components/LoveFusion.tsx b/src/components/LoveFusion.tsx
index ce349ae..dc63b01 100644
--- a/src/components/LoveFusion.tsx
+++ b/src/components/LoveFusion.tsx
@@ -1,11 +1,16 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { Hachi_Maru_Pop } from 'next/font/google';
 
-// ✉️ + ❤️ = 💌, "envelope" + "love" = "lovelope.app": everything collides,
-// contracts into a single point, then bursts into the merged result. Plays
-// once, on mount, then holds its final state (no loop).
-const times = [0, 0.28, 0.5, 0.58, 0.66, 0.78, 0.88, 1];
+const logoFont = Hachi_Maru_Pop({ weight: '400', subsets: ['latin'] });
+
+// 💕 + ✉️ = 💌, "love" + "envelope" = "lovelope.app": the two slide in from
+// opposite sides, and the instant they'd overlap they hand off to a white
+// flash (bigger + brighter than the glyphs so neither is ever visibly "in
+// front of" the other) which then blooms back out into the merged result.
+// Plays once, on mount, then holds its final state (no loop).
+const times = [0, 0.22, 0.42, 0.52, 0.62, 0.74, 0.88, 1];
 const transition = { duration: 2.4, times, ease: 'easeInOut' as const };
 
 export default function LoveFusion({ className = '' }: { className?: string }) {
@@ -16,32 +21,32 @@ export default function LoveFusion({ className = '' }: { className?: string }) {
           style={{ gridRow: 1, gridColumn: 1 }}
           className="text-8xl"
           initial={{ x: -72, opacity: 1, scale: 1, rotate: 0 }}
-          animate={{ x: [-72, -72, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 1, 0, 0, 0, 0], scale: [1, 1, 1, 0.5, 0, 0, 0, 0], rotate: [0, -8, 0, 0, 0, 0, 0, 0] }}
+          animate={{ x: [-72, -50, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.95, 0.55, 0, 0, 0, 0], rotate: [0, -10, 0, 0, 0, 0, 0, 0] }}
           transition={transition}
         >
-          ✉️
+          💕
         </motion.span>
         <motion.span
           style={{ gridRow: 1, gridColumn: 1 }}
           className="text-8xl"
           initial={{ x: 72, opacity: 1, scale: 1, rotate: 0 }}
-          animate={{ x: [72, 72, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 1, 0, 0, 0, 0], scale: [1, 1, 1, 0.5, 0, 0, 0, 0], rotate: [0, 8, 0, 0, 0, 0, 0, 0] }}
+          animate={{ x: [72, 50, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.95, 0.55, 0, 0, 0, 0], rotate: [0, 10, 0, 0, 0, 0, 0, 0] }}
           transition={transition}
         >
-          ❤️
+          ✉️
         </motion.span>
         <motion.div
           style={{ gridRow: 1, gridColumn: 1 }}
-          className="w-5 h-5 rounded-full bg-white shadow-[0_0_28px_12px_rgba(255,255,255,0.85)]"
+          className="w-8 h-8 rounded-full bg-white shadow-[0_0_48px_22px_rgba(255,255,255,0.95)]"
           initial={{ opacity: 0, scale: 0 }}
-          animate={{ opacity: [0, 0, 0, 0.9, 1, 0, 0, 0], scale: [0, 0, 0, 0.15, 0.22, 1.8, 0, 0] }}
+          animate={{ opacity: [0, 0, 0.15, 0.75, 1, 0.55, 0, 0], scale: [0, 0, 0.5, 1.5, 2.4, 1.3, 0, 0] }}
           transition={transition}
         />
         <motion.span
           style={{ gridRow: 1, gridColumn: 1 }}
           className="text-9xl"
           initial={{ opacity: 0, scale: 0.3 }}
-          animate={{ opacity: [0, 0, 0, 0, 0, 0.15, 1, 1], scale: [0.3, 0.3, 0.3, 0.3, 0.3, 0.5, 1.18, 1] }}
+          animate={{ opacity: [0, 0, 0, 0, 0.25, 0.75, 1, 1], scale: [0.3, 0.3, 0.3, 0.3, 0.4, 0.85, 1.12, 1] }}
           transition={transition}
         >
           💌
@@ -51,27 +56,27 @@ export default function LoveFusion({ className = '' }: { className?: string }) {
       <div className="grid place-items-center h-14 mt-1">
         <motion.span
           style={{ gridRow: 1, gridColumn: 1 }}
-          className="font-display font-extrabold text-2xl sm:text-4xl text-white tracking-tight whitespace-nowrap"
+          className={`${logoFont.className} text-2xl sm:text-4xl text-yellow-300 tracking-tight whitespace-nowrap`}
           initial={{ x: -60, opacity: 1, scale: 1 }}
-          animate={{ x: [-60, -60, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 1, 0, 0, 0, 0], scale: [1, 1, 1, 0.5, 0, 0, 0, 0] }}
-          transition={transition}
-        >
-          envelope
-        </motion.span>
-        <motion.span
-          style={{ gridRow: 1, gridColumn: 1 }}
-          className="font-display font-extrabold text-2xl sm:text-4xl text-yellow-300 tracking-tight whitespace-nowrap"
-          initial={{ x: 60, opacity: 1, scale: 1 }}
-          animate={{ x: [60, 60, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 1, 0, 0, 0, 0], scale: [1, 1, 1, 0.5, 0, 0, 0, 0] }}
+          animate={{ x: [-60, -40, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.95, 0.55, 0, 0, 0, 0] }}
           transition={transition}
         >
           love
         </motion.span>
         <motion.span
           style={{ gridRow: 1, gridColumn: 1 }}
-          className="font-display font-extrabold text-2xl sm:text-4xl tracking-tight whitespace-nowrap"
+          className={`${logoFont.className} text-2xl sm:text-4xl text-white tracking-tight whitespace-nowrap`}
+          initial={{ x: 60, opacity: 1, scale: 1 }}
+          animate={{ x: [60, 40, 0, 0, 0, 0, 0, 0], opacity: [1, 1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.95, 0.55, 0, 0, 0, 0] }}
+          transition={transition}
+        >
+          envelope
+        </motion.span>
+        <motion.span
+          style={{ gridRow: 1, gridColumn: 1 }}
+          className={`${logoFont.className} text-2xl sm:text-4xl tracking-tight whitespace-nowrap`}
           initial={{ opacity: 0, scale: 0.6 }}
-          animate={{ opacity: [0, 0, 0, 0, 0, 0.2, 1, 1], scale: [0.6, 0.6, 0.6, 0.6, 0.6, 0.8, 1.15, 1] }}
+          animate={{ opacity: [0, 0, 0, 0, 0.25, 0.75, 1, 1], scale: [0.6, 0.6, 0.6, 0.6, 0.65, 0.9, 1.15, 1] }}
           transition={transition}
         >
           <span className="bg-gradient-to-r from-white to-yellow-300 bg-clip-text text-transparent">lovelope</span>