36 lines
1015 B
TypeScript
36 lines
1015 B
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { MotionConfig } from "motion/react";
|
|
|
|
/**
|
|
* Centralize motion defaults: durations, easings, reduced-motion handling.
|
|
* Wrap the app in this provider (see app/layout.tsx).
|
|
*/
|
|
export function MotionConfigProvider({ children }: { children: React.ReactNode }) {
|
|
// Respect prefers-reduced-motion by simplifying animations
|
|
const prefersReducedMotion =
|
|
typeof window !== "undefined" &&
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
// Shared transition tokens
|
|
const duration = prefersReducedMotion ? 0 : 0.6;
|
|
const delay = prefersReducedMotion ? 0 : 0.0;
|
|
// A premium-feel cubic-bezier; slightly snappier in the end
|
|
const ease: [number, number, number, number] = [0.2, 0.8, 0.2, 1];
|
|
|
|
return (
|
|
<MotionConfig
|
|
reducedMotion={prefersReducedMotion ? "always" : "never"}
|
|
transition={{
|
|
duration,
|
|
ease,
|
|
delay,
|
|
}}
|
|
>
|
|
{children}
|
|
</MotionConfig>
|
|
);
|
|
}
|