fix(landing): preserve the footer liquid morph

Author: waleedlatif1

apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.test.tsx

@@ -89,8 +89,9 @@ describe('FooterWordmarkLoop', () => {
     expect(html).toContain('aria-hidden="true"')
     expect(html).toContain('data-stage="wm" opacity="1"')
     expect(html).toContain('data-stage="orb" opacity="0"')
-    expect(html).toContain('stdDeviation="0.55"')
-    expect(html).toContain('data-goo-group="" filter="none"')
+    expect(html).toContain('stdDeviation="0"')
+    expect(html).toMatch(/filter="url\(#fwl-goo-/)
+    expect(html).toContain('values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"')
     expect(html).not.toContain('<feGaussianBlur in="goo"')
     for (const shape of SHAPES) {
       expect(html).toContain(`data-stage="${shape}" opacity="0"`)
@@ -102,14 +103,14 @@ describe('FooterWordmarkLoop', () => {
 
   it('plays the master timeline: wordmark, orb, the seven shapes, orb, wordmark', () => {
     expect(attr('[data-stage="wm"]', 'opacity')).toBe('1.0000')
-    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.550')
-    expect(attr('[data-goo-group]', 'filter')).toBe('none')
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.000')
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/1\.000 -?0\.000$/)
 
     advanceTo(2700)
     expect(attr('[data-stage="wm"]', 'opacity')).toBe('0.0000')
     expect(attr('[data-stage="orb"]', 'opacity')).toBe('1.0000')
     expect(attr('[data-goo]', 'stdDeviation')).toBe('5.000')
-    expect(attr('[data-goo-group]', 'filter')).toMatch(/^url\(#fwl-goo-/)
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/40\.000 -19\.000$/)
 
     advanceTo(3900)
     expect(attr('[data-stage="metaballs"]', 'opacity')).toBe('1.0000')
@@ -126,25 +127,51 @@ describe('FooterWordmarkLoop', () => {
     advanceTo(16000)
     expect(attr('[data-stage="wm"]', 'opacity')).toBe('1.0000')
     expect(attr('[data-stage="thinking"]', 'opacity')).toBe('0.0000')
-    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.550')
-    expect(attr('[data-goo-group]', 'filter')).toBe('none')
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.000')
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/1\.000 -?0\.000$/)
 
     advanceTo(CYCLE_MS + 2700)
     expect(attr('[data-stage="orb"]', 'opacity')).toBe('1.0000')
     expect(attr('[data-stage="wm"]', 'opacity')).toBe('0.0000')
   })
 
-  it('returns to an unfiltered wordmark when reduced motion is enabled mid-morph', () => {
+  it('returns to an identity filter when reduced motion is enabled mid-morph', () => {
     advanceTo(2700)
-    expect(attr('[data-goo-group]', 'filter')).toMatch(/^url\(#fwl-goo-/)
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/40\.000 -19\.000$/)
 
     reducedMotion = true
     act(() => onMotionPreference?.())
 
     expect(pending).toHaveLength(0)
     expect(attr('[data-stage="wm"]', 'opacity')).toBe('1.0000')
     expect(attr('[data-stage="orb"]', 'opacity')).toBe('0.0000')
-    expect(attr('[data-goo-group]', 'filter')).toBe('none')
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/1\.000 -?0\.000$/)
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.000')
+  })
+
+  it('eases the same filter to identity at both wordmark boundaries', () => {
+    advanceTo(1300)
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.000')
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/1\.000 -?0\.000$/)
+
+    advanceTo(1301)
+    expect(Number(attr('[data-goo]', 'stdDeviation'))).toBeLessThan(0.001)
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/1\.000 -?0\.000$/)
+
+    advanceTo(1800)
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/40\.000 -19\.000$/)
+
+    advanceTo(2500)
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('5.000')
+
+    advanceTo(15199)
+    expect(Number(attr('[data-goo]', 'stdDeviation'))).toBeLessThan(0.001)
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/1\.000 -?0\.000$/)
+
+    advanceTo(15200)
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.000')
+    expect(attr('[data-goo-matrix]', 'values')).toMatch(/1\.000 -?0\.000$/)
+    expect(host?.querySelector('feComposite')).toBeNull()
   })
 
   it('stops requesting frames on unmount', () => {

apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx

@@ -356,8 +356,7 @@ interface StageNode {
 
 interface GooFilterNodes {
   blur: SVGFEGaussianBlurElement
-  group: SVGGElement
-  url: string
+  matrix: SVGFEColorMatrixElement
 }
 
 /**
@@ -415,13 +414,17 @@ function paintFrame(
     smooth(T_LOGO_HOLD_END, T_INTRO_END, t),
     1 - smooth(T_OUTRO_START, T_OUTRO_END, t)
   )
-  const deviation = round(GOO_LO + (GOO_HI - GOO_LO) * liquid)
+  /** Ease the filter to identity at rest without overlaying the unfiltered shapes. */
+  const strength = Math.min(
+    smooth(T_LOGO_HOLD_END, T_LOGO_HOLD_END + MORPH, t),
+    1 - smooth(T_OUTRO_END - MORPH, T_OUTRO_END, t)
+  )
+  const deviation = round((GOO_LO + (GOO_HI - GOO_LO) * liquid) * strength)
   if (goo.blur.getAttribute('stdDeviation') !== deviation) {
     goo.blur.setAttribute('stdDeviation', deviation)
   }
-  /** Resting vectors retain native antialiasing; only the liquid morph needs raster filtering. */
-  const filter = liquid > 0 ? goo.url : 'none'
-  if (goo.group.getAttribute('filter') !== filter) goo.group.setAttribute('filter', filter)
+  const matrix = `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${round(1 + 39 * strength)} ${round(-19 * strength)}`
+  if (goo.matrix.getAttribute('values') !== matrix) goo.matrix.setAttribute('values', matrix)
 }
 
 interface FooterWordmarkLoopProps {
@@ -463,9 +466,9 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
     const svg = svgRef.current
     if (!svg) return
     const blur = svg.querySelector<SVGFEGaussianBlurElement>('[data-goo]')
-    const group = svg.querySelector<SVGGElement>('[data-goo-group]')
-    if (!blur || !group) return
-    const goo: GooFilterNodes = { blur, group, url: `url(#${gooId})` }
+    const matrix = svg.querySelector<SVGFEColorMatrixElement>('[data-goo-matrix]')
+    if (!blur || !matrix) return
+    const goo: GooFilterNodes = { blur, matrix }
 
     const stages: StageNode[] = Array.from(
       svg.querySelectorAll<SVGGElement>('[data-stage]'),
@@ -528,7 +531,7 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
       observer?.disconnect()
       reducedMotion?.removeEventListener('change', onMotionPreference)
     }
-  }, [gooId])
+  }, [])
 
   return (
     <div className={cn('relative mx-auto aspect-[5/3] w-[clamp(180px,17vw,320px)]', className)}>
@@ -547,13 +550,14 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
             height='160%'
             colorInterpolationFilters='sRGB'
           >
-            <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={GOO_LO} result='blur' />
+            <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={0} result='blur' />
             {/* A steep threshold: the melt between shapes keeps its liquid
                 merges, but every edge resolves within a pixel, so the mark
                 stays crisp at the cycle's full blur. */}
             <feColorMatrix
+              data-goo-matrix=''
               in='blur'
-              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 40 -19'
+              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0'
               result='goo'
             />
           </filter>
@@ -581,8 +585,7 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
         </defs>
 
         <g
-          data-goo-group=''
-          filter='none'
+          filter={`url(#${gooId})`}
           fill={`url(#${inkId})`}
           stroke={`url(#${inkId})`}
           strokeWidth={0}