From 5a054357fcf319df2b63ac269c2af3c70b2a06f6 Mon Sep 17 00:00:00 2001 From: jeanGaston Date: Wed, 29 Jul 2026 20:29:07 +0200 Subject: [PATCH] fix(logo): use linear easing between keyframes so motion doesn't stutter easeInOut was applied per-segment across all 6 keyframe boundaries, decelerating to zero velocity at each one - technically continuous but visually reads as discrete steps rather than one fluid motion. Switched to linear; the non-uniform spacing already baked into the `times` array (tight around the crossing, wide at the ends) now does the speed-shaping instead, without ever fully stopping mid-flight. Verified by sampling translateX every animation frame: previously would have shown velocity flattening at each keyframe boundary, now shows a steady ~1px/16ms monotonic decrease start to finish. Co-Authored-By: Claude Sonnet 5 --- src/components/LoveFusion.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/LoveFusion.tsx b/src/components/LoveFusion.tsx index 7f151cf..4f2ee43 100644 --- a/src/components/LoveFusion.tsx +++ b/src/components/LoveFusion.tsx @@ -10,8 +10,14 @@ const logoFont = Hachi_Maru_Pop({ weight: '400', subsets: ['latin'] }); // 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. +// linear (not easeInOut): with multi-point keyframes, easeInOut is applied +// per-segment, so it decelerates to zero velocity at every one of the 6 +// intermediate checkpoints - technically continuous but reads as jerky +// "steps" rather than one fluid motion. Linear + the non-uniform spacing +// of `times` (tight around the crossing, wide at the ends) shapes the +// speed instead, without ever fully stopping mid-flight. 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 transition = { duration: 1.8, times, ease: 'linear' as const }; const willChange = { willChange: 'transform, opacity' } as const; export default function LoveFusion({ className = '' }: { className?: string }) {