#434

frontend/src/lib/useClientMotion.ts

@@ -0,0 +1,19 @@
+import { useReducedMotion } from 'framer-motion'
+
+import { clientAnimationTransition, clientMotionTokens } from '@/lib/clientAnimation'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
+
+
+export const useClientMotion = () => {
+  const settings = useClientBehaviourSettings ()
+  const osReduced = useReducedMotion ()
+  const mode = osReduced ? 'reduced' : settings.animation ?? 'normal'
+  const reduced = mode !== 'normal'
+  const duration = (kind: keyof typeof clientMotionTokens.durationMS) =>
+      reduced ? 0 : clientMotionTokens.durationMS[kind]
+  const transition = (kind: keyof typeof clientMotionTokens.durationMS) =>
+      clientAnimationTransition (mode, {
+          normal: { duration: duration (kind) / 1000, ease: clientMotionTokens.easing },
+          reduced: { duration: 0 } })
+  return { reduced, duration, transition, easing: clientMotionTokens.cssEasing }
+}