import { useMemo } from '@wordpress/element'; import { colord } from 'colord'; import { motion, useReducedMotion } from 'framer-motion'; export const ViewportPulse = () => { const shouldReduceMotion = useReducedMotion(); const bannerMain = useMemo(() => { return getComputedStyle(document.documentElement) .getPropertyValue('--ext-banner-main') .trim(); }, []); const bannerMainWashed = useMemo(() => { return colord(bannerMain) .desaturate(0.3) .lighten(0.4) .alpha(0.2) .toRgbString(); }, [bannerMain]); const isLight = useMemo(() => colord(bannerMain).isLight(), [bannerMain]); const designMain = useMemo(() => { return getComputedStyle(document.documentElement) .getPropertyValue('--ext-design-main') .trim(); }, []); const mainColorLike = useMemo(() => { return colord(designMain).desaturate(0.3).alpha(0.2).toRgbString(); }, [designMain]); if (shouldReduceMotion) return null; const colorToUse = isLight ? mainColorLike : bannerMainWashed; return ( ); };