fix(landing): prevent theme flashes and sharpen footer animation

Author: waleedlatif1

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

@@ -15,6 +15,8 @@ const CYCLE_MS = 17_100
 
 let pending: FrameRequestCallback[] = []
 let clock = 0
+let reducedMotion = false
+let onMotionPreference: (() => void) | undefined
 let root: Root | null = null
 let host: HTMLDivElement | null = null
 
@@ -40,15 +42,23 @@ beforeEach(() => {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   pending = []
   clock = 0
+  reducedMotion = false
+  onMotionPreference = undefined
   const stubs = {
     requestAnimationFrame: (cb: FrameRequestCallback) => pending.push(cb),
     cancelAnimationFrame: () => {
       pending = []
     },
     matchMedia: () => ({
-      matches: false,
-      addEventListener: () => {},
-      removeEventListener: () => {},
+      get matches() {
+        return reducedMotion
+      },
+      addEventListener: (_type: string, listener: () => void) => {
+        onMotionPreference = listener
+      },
+      removeEventListener: () => {
+        onMotionPreference = undefined
+      },
     }),
   }
   for (const [name, value] of Object.entries(stubs)) {
@@ -80,6 +90,8 @@ describe('FooterWordmarkLoop', () => {
     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).not.toContain('<feGaussianBlur in="goo"')
     for (const shape of SHAPES) {
       expect(html).toContain(`data-stage="${shape}" opacity="0"`)
     }
@@ -91,11 +103,13 @@ 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')
 
     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-/)
 
     advanceTo(3900)
     expect(attr('[data-stage="metaballs"]', 'opacity')).toBe('1.0000')
@@ -113,12 +127,26 @@ describe('FooterWordmarkLoop', () => {
     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')
 
     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', () => {
+    advanceTo(2700)
+    expect(attr('[data-goo-group]', 'filter')).toMatch(/^url\(#fwl-goo-/)
+
+    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')
+  })
+
   it('stops requesting frames on unmount', () => {
     advanceTo(500)
     act(() => root?.unmount())

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

@@ -43,11 +43,9 @@ const ORB_BEAT = 450
 /** Closing hold on the wordmark before the loop wraps back to the opening hold. */
 const HOLD_LOGO_END = 1700
 const TAIL = 200
-/** Goo blur while liquid (through the cycle) and while crisp (the wordmark). */
+/** Blur range for the filtered portion of the morph. */
 const GOO_HI = 5
 const GOO_LO = 0.55
-/** Post-threshold blur, about half a device pixel at the mark's largest size. */
-const EDGE_SMOOTHING = 0.16
 /**
  * Shapes that restart from compact when they appear and play exactly one pulse
  * of this many ms (just under a loop, so the dots reach the edge without
@@ -356,13 +354,19 @@ interface StageNode {
   key: StageKey
 }
 
+interface GooFilterNodes {
+  blur: SVGFEGaussianBlurElement
+  group: SVGGElement
+  url: string
+}
+
 /**
  * Paints one frame of the choreography at `t` ms into the cycle by writing
  * SVG attributes directly - no React render per frame.
  */
 function paintFrame(
   t: number,
-  blur: SVGFEGaussianBlurElement,
+  goo: GooFilterNodes,
   stages: StageNode[],
   anims: AnimatedNode[]
 ): void {
@@ -412,7 +416,12 @@ function paintFrame(
     1 - smooth(T_OUTRO_START, T_OUTRO_END, t)
   )
   const deviation = round(GOO_LO + (GOO_HI - GOO_LO) * liquid)
-  if (blur.getAttribute('stdDeviation') !== deviation) blur.setAttribute('stdDeviation', deviation)
+  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)
 }
 
 interface FooterWordmarkLoopProps {
@@ -454,7 +463,9 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
     const svg = svgRef.current
     if (!svg) return
     const blur = svg.querySelector<SVGFEGaussianBlurElement>('[data-goo]')
-    if (!blur) return
+    const group = svg.querySelector<SVGGElement>('[data-goo-group]')
+    if (!blur || !group) return
+    const goo: GooFilterNodes = { blur, group, url: `url(#${gooId})` }
 
     const stages: StageNode[] = Array.from(
       svg.querySelectorAll<SVGGElement>('[data-stage]'),
@@ -475,7 +486,7 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
     const tick = (now: number) => {
       if (previous !== null) elapsed += Math.min(now - previous, MAX_FRAME_STEP)
       previous = now
-      paintFrame(elapsed % CYCLE_MS, blur, stages, anims)
+      paintFrame(elapsed % CYCLE_MS, goo, stages, anims)
       frame = requestAnimationFrame(tick)
     }
     const play = () => {
@@ -492,7 +503,7 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
       if (reducedMotion?.matches) {
         pause()
         elapsed = 0
-        paintFrame(0, blur, stages, anims)
+        paintFrame(0, goo, stages, anims)
       } else {
         play()
       }
@@ -517,7 +528,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)}>
@@ -545,11 +556,6 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
               values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 40 -19'
               result='goo'
             />
-            {/* The threshold discards the rasterizer's edge coverage, so at the
-                resting blur the wordmark's edge fell inside a device pixel and
-                stair-stepped at the largest size. A sub-pixel blur after it
-                restores ordinary anti-aliasing without touching the melt. */}
-            <feGaussianBlur in='goo' stdDeviation={EDGE_SMOOTHING} />
           </filter>
           <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
             <stop style={INK_STOP_INNER} />
@@ -575,7 +581,8 @@ export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
         </defs>
 
         <g
-          filter={`url(#${gooId})`}
+          data-goo-group=''
+          filter='none'
           fill={`url(#${inkId})`}
           stroke={`url(#${inkId})`}
           strokeWidth={0}

apps/sim/app/_shell/providers/theme-provider.test.tsx

@@ -9,6 +9,7 @@ const { mockUsePathname } = vi.hoisted(() => ({ mockUsePathname: vi.fn() }))
 
 vi.mock('next/navigation', () => ({ usePathname: mockUsePathname }))
 
+import { syncThemeToNextThemes } from '@/lib/core/utils/theme'
 import { ThemeProvider } from '@/app/_shell/providers/theme-provider'
 
 let root: Root
@@ -37,6 +38,15 @@ function render(pathname: string) {
 
 beforeEach(() => {
   vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  /** The global storage mock is not a native jsdom Storage instance. */
+  vi.stubGlobal(
+    'StorageEvent',
+    class extends window.StorageEvent {
+      constructor(type: string, init: StorageEventInit) {
+        super(type, { ...init, storageArea: null })
+      }
+    }
+  )
   stubDarkOs()
   localStorage.clear()
   document.documentElement.className = ''
@@ -74,4 +84,61 @@ describe('ThemeProvider theme stores', () => {
     localStorage.setItem('sim-landing-theme', 'dark')
     expect(render('/login')).toContain('light')
   })
+
+  it.each(['/', '/blog', '/customers/example'])(
+    'keeps %s light when account settings resolve dark',
+    (pathname) => {
+      localStorage.setItem('sim-theme', 'dark')
+      const classes = render(pathname)
+      expect(classes).toContain('light')
+
+      act(() => syncThemeToNextThemes('dark'))
+
+      expect(classes).toContain('light')
+      expect(classes).not.toContain('dark')
+    }
+  )
+
+  it('preserves the landing footer choice when account settings change', () => {
+    localStorage.setItem('sim-landing-theme', 'dark')
+    const classes = render('/workflows')
+
+    act(() => syncThemeToNextThemes('light'))
+
+    expect(classes).toContain('dark')
+    expect(localStorage.getItem('sim-landing-theme')).toBe('dark')
+    expect(localStorage.getItem('sim-theme')).toBe('light')
+  })
+
+  it('preserves the forced auth theme when account settings resolve', () => {
+    const classes = render('/login')
+
+    act(() => syncThemeToNextThemes('dark'))
+
+    expect(classes).toContain('light')
+    expect(classes).not.toContain('dark')
+  })
+
+  it('updates the workspace theme when account settings resolve', () => {
+    localStorage.setItem('sim-theme', 'light')
+    const classes = render('/workspace/ws-1/home')
+    expect(classes).toContain('light')
+
+    act(() => syncThemeToNextThemes('dark'))
+
+    expect(classes).toContain('dark')
+    expect(classes).not.toContain('light')
+    expect(document.documentElement.style.colorScheme).toBe('dark')
+  })
+
+  it('resolves the workspace system theme through the active provider', () => {
+    localStorage.setItem('sim-theme', 'light')
+    const classes = render('/workspace/ws-1/home')
+
+    act(() => syncThemeToNextThemes('system'))
+
+    expect(classes).toContain('dark')
+    expect(document.documentElement.style.colorScheme).toBe('dark')
+    expect(localStorage.getItem('sim-theme')).toBe('system')
+  })
 })

apps/sim/lib/core/utils/theme.test.ts

@@ -25,15 +25,15 @@ describe('syncThemeToNextThemes', () => {
     expect(add).not.toHaveBeenCalled()
   })
 
-  it('repairs the document class without emitting a redundant storage event', () => {
+  it('leaves document classes to the active theme provider', () => {
     localStorage.setItem('sim-theme', 'dark')
     document.documentElement.classList.add('light')
     const dispatchEvent = vi.spyOn(window, 'dispatchEvent')
 
     syncThemeToNextThemes('dark')
 
     expect(dispatchEvent).not.toHaveBeenCalled()
-    expect(document.documentElement.classList.contains('dark')).toBe(true)
-    expect(document.documentElement.classList.contains('light')).toBe(false)
+    expect(document.documentElement.classList.contains('light')).toBe(true)
+    expect(document.documentElement.classList.contains('dark')).toBe(false)
   })
 })

apps/sim/lib/core/utils/theme.ts

@@ -5,6 +5,8 @@
 /**
  * Updates the theme in next-themes by dispatching a storage event.
  * This works by updating localStorage and notifying next-themes of the change.
+ * The active provider owns document classes, including forced themes and the
+ * landing surface's independent preference.
  * @param theme - The desired theme ('system', 'light', or 'dark')
  */
 export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
@@ -24,17 +26,4 @@ export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
       })
     )
   }
-
-  const root = document.documentElement
-  const appliedTheme =
-    theme === 'system'
-      ? window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
-      : theme
-  const oppositeTheme = appliedTheme === 'dark' ? 'light' : 'dark'
-  if (root.classList.contains(appliedTheme) && !root.classList.contains(oppositeTheme)) return
-
-  root.classList.remove('light', 'dark')
-  root.classList.add(appliedTheme)
 }