From 4e779c847af33099fbfbbfa90fa9b12443bfab64 Mon Sep 17 00:00:00 2001
From: jeanGaston <paul@jeangaston.xyz>
Date: Wed, 29 Jul 2026 20:21:08 +0200
Subject: [PATCH] fix(logo): resolve word superposition and reduce animation
 cost

The previous commit only masked the emoji row's crossing (via the
white flash timed to their fade). The text row ("love"/"envelope")
still animated opacity down while sitting fully centered on top of
each other, so the two words visibly superposed for a beat with no
flash to hide it there.

Fix applies the same technique to both rows: x and opacity now reach
their end state (centered / invisible) together, so there's no frame
where a glyph is both fully opaque and fully overlapping another.
Verified via a fresh screenshot mid-transition - no double-exposure.

Also addressed reported animation lag: dropped the rotate wobble
(one fewer animated property per element), cut keyframe count 8->7,
shortened 2.4s -> 1.8s, trimmed the flash's blur/spread, and added
willChange hints so all layers are promoted upfront rather than
mid-animation. Playwright rAF sampling over the full animation now
shows a flat 60fps with zero frames slower than 30fps.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/LoveFusion.tsx | 47 ++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/components/LoveFusion.tsx b/src/components/LoveFusion.tsx
index dc63b01..7f151cf 100644
--- a/src/components/LoveFusion.tsx
+++ b/src/components/LoveFusion.tsx
@@ -6,47 +6,48 @@ import { Hachi_Maru_Pop } from 'next/font/google';
 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 };
+// opposite sides and fade out AS they approach center, so opacity hits zero
+// right when they'd otherwise overlap - neither ever renders "in front of"
+// the other. The flash on the icon row is a bonus bloom on top of that, not
+// the only thing hiding the seam. Plays once, on mount, then holds.
+const times = [0, 0.25, 0.45, 0.58, 0.7, 0.85, 1];
+const transition = { duration: 1.8, times, ease: 'easeInOut' as const };
+const willChange = { willChange: 'transform, opacity' } as const;
 
 export default function LoveFusion({ className = '' }: { className?: string }) {
   return (
     <div className={`flex flex-col items-center ${className}`}>
       <div className="grid place-items-center h-44">
         <motion.span
-          style={{ gridRow: 1, gridColumn: 1 }}
+          style={{ gridRow: 1, gridColumn: 1, ...willChange }}
           className="text-8xl"
-          initial={{ x: -72, opacity: 1, scale: 1, rotate: 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] }}
+          initial={{ x: -72, opacity: 1, scale: 1 }}
+          animate={{ x: [-72, -43, -11, 0, 0, 0, 0], opacity: [1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.6, 0.2, 0, 0, 0] }}
           transition={transition}
         >
           💕
         </motion.span>
         <motion.span
-          style={{ gridRow: 1, gridColumn: 1 }}
+          style={{ gridRow: 1, gridColumn: 1, ...willChange }}
           className="text-8xl"
-          initial={{ x: 72, opacity: 1, scale: 1, rotate: 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] }}
+          initial={{ x: 72, opacity: 1, scale: 1 }}
+          animate={{ x: [72, 43, 11, 0, 0, 0, 0], opacity: [1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.6, 0.2, 0, 0, 0] }}
           transition={transition}
         >
           ✉️
         </motion.span>
         <motion.div
-          style={{ gridRow: 1, gridColumn: 1 }}
-          className="w-8 h-8 rounded-full bg-white shadow-[0_0_48px_22px_rgba(255,255,255,0.95)]"
+          style={{ gridRow: 1, gridColumn: 1, ...willChange }}
+          className="w-7 h-7 rounded-full bg-white shadow-[0_0_36px_16px_rgba(255,255,255,0.95)]"
           initial={{ opacity: 0, scale: 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] }}
+          animate={{ opacity: [0, 0, 0.4, 0.95, 1, 0.4, 0], scale: [0, 0, 0.7, 1.8, 2.2, 1.1, 0] }}
           transition={transition}
         />
         <motion.span
-          style={{ gridRow: 1, gridColumn: 1 }}
+          style={{ gridRow: 1, gridColumn: 1, ...willChange }}
           className="text-9xl"
           initial={{ opacity: 0, scale: 0.3 }}
-          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] }}
+          animate={{ opacity: [0, 0, 0, 0.15, 0.5, 0.9, 1], scale: [0.3, 0.3, 0.3, 0.4, 0.6, 0.95, 1] }}
           transition={transition}
         >
           💌
@@ -55,28 +56,28 @@ export default function LoveFusion({ className = '' }: { className?: string }) {
 
       <div className="grid place-items-center h-14 mt-1">
         <motion.span
-          style={{ gridRow: 1, gridColumn: 1 }}
+          style={{ gridRow: 1, gridColumn: 1, ...willChange }}
           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, -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] }}
+          animate={{ x: [-60, -36, -8, 0, 0, 0, 0], opacity: [1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.6, 0.2, 0, 0, 0] }}
           transition={transition}
         >
           love
         </motion.span>
         <motion.span
-          style={{ gridRow: 1, gridColumn: 1 }}
+          style={{ gridRow: 1, gridColumn: 1, ...willChange }}
           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] }}
+          animate={{ x: [60, 36, 8, 0, 0, 0, 0], opacity: [1, 1, 0.5, 0, 0, 0, 0], scale: [1, 1, 0.6, 0.2, 0, 0, 0] }}
           transition={transition}
         >
           envelope
         </motion.span>
         <motion.span
-          style={{ gridRow: 1, gridColumn: 1 }}
+          style={{ gridRow: 1, gridColumn: 1, ...willChange }}
           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.25, 0.75, 1, 1], scale: [0.6, 0.6, 0.6, 0.6, 0.65, 0.9, 1.15, 1] }}
+          animate={{ opacity: [0, 0, 0, 0.15, 0.5, 0.9, 1], scale: [0.6, 0.6, 0.6, 0.65, 0.8, 0.95, 1] }}
           transition={transition}
         >
           <span className="bg-gradient-to-r from-white to-yellow-300 bg-clip-text text-transparent">lovelope</span>