#434

frontend/src/lib/useClientMotion.ts

@@ -1,4 +1,5 @@
 import { useReducedMotion } from 'framer-motion'
+import { useEffect, useState } from 'react'
 
 import { clientAnimationTransition, clientMotionTokens } from '@/lib/clientAnimation'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
@@ -7,7 +8,9 @@ import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 export const useClientMotion = () => {
   const settings = useClientBehaviourSettings ()
   const osReduced = useReducedMotion ()
-  const mode = osReduced ? 'reduced' : settings.animation ?? 'normal'
+  const [hydrated, setHydrated] = useState (false)
+  useEffect (() => setHydrated (true), [])
+  const mode = hydrated ? (osReduced ? 'reduced' : settings.animation ?? 'normal') : 'normal'
   const reduced = mode !== 'normal'
   const duration = (kind: keyof typeof clientMotionTokens.durationMS) =>
       reduced ? 0 : clientMotionTokens.durationMS[kind]