23 行
1.0 KiB
TypeScript
23 行
1.0 KiB
TypeScript
import { useReducedMotion } from 'framer-motion'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import { clientAnimationTransition, clientMotionTokens } from '@/lib/clientAnimation'
|
|
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
|
|
|
|
|
export const useClientMotion = () => {
|
|
const settings = useClientBehaviourSettings ()
|
|
const osReduced = useReducedMotion ()
|
|
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]
|
|
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 }
|
|
}
|