Evandro Fonseca Junior
08dd046887
- Introduced DrawLine component for drawing animations. - Added LazyRevealImage component for lazy loading images with reveal animations. - Implemented TextDiffuseReveal for animated text reveals with staggered effects. - Created TopProgressBar for a dynamic loading indicator. - Added PointCloud mock for testing animations. - Developed useReducedMotion hook to handle user preferences for reduced motion. - Centralized animation configurations in config.ts for easier management. - Defined animation variants in variants.ts for consistent animation effects. - Established AnimationProvider to supply global animation settings. - Created tests for AnimationProvider and useReducedMotion hook. - Added SVG assets for branding and UI elements. - Documented frontend review plan and hero circuit board animation plan.
94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { createContext, useContext, type ReactNode } from "react";
|
|
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
|
|
import { animationConfig } from "@/app/lib/animations/config";
|
|
|
|
/**
|
|
* Animation Configuration Context
|
|
* Provides global animation settings including reduced motion detection
|
|
*/
|
|
interface AnimationConfig {
|
|
reducedMotion: boolean;
|
|
easings: typeof animationConfig.easings;
|
|
durations: typeof animationConfig.durations;
|
|
}
|
|
|
|
const AnimationContext = createContext<AnimationConfig | undefined>(undefined);
|
|
|
|
interface AnimationProviderProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* AnimationProvider
|
|
*
|
|
* Provider component that supplies global animation configuration through React context.
|
|
* Automatically detects user's reduced motion preference and provides centralized
|
|
* animation settings (easings, durations) to all child components.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // In app/layout.tsx
|
|
* <AnimationProvider>
|
|
* <YourApp />
|
|
* </AnimationProvider>
|
|
* ```
|
|
*
|
|
* @see useAnimationConfig - Hook to consume this context
|
|
*/
|
|
export function AnimationProvider({ children }: AnimationProviderProps) {
|
|
const reducedMotion = useReducedMotion();
|
|
|
|
const config: AnimationConfig = {
|
|
reducedMotion,
|
|
easings: animationConfig.easings,
|
|
durations: animationConfig.durations,
|
|
};
|
|
|
|
return (
|
|
<AnimationContext.Provider value={config}>
|
|
{children}
|
|
</AnimationContext.Provider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* useAnimationConfig
|
|
*
|
|
* Hook to access global animation configuration from AnimationProvider context.
|
|
* Provides reduced motion state, easing curves, and duration presets.
|
|
*
|
|
* @returns {AnimationConfig} Animation configuration object
|
|
* @throws {Error} If used outside of AnimationProvider
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* function MyComponent() {
|
|
* const { reducedMotion, easings, durations } = useAnimationConfig();
|
|
*
|
|
* return (
|
|
* <motion.div
|
|
* animate={{
|
|
* opacity: 1,
|
|
* y: reducedMotion ? 0 : 20
|
|
* }}
|
|
* transition={{
|
|
* duration: durations.normal,
|
|
* ease: easings.easeOut
|
|
* }}
|
|
* />
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|
|
export function useAnimationConfig(): AnimationConfig {
|
|
const context = useContext(AnimationContext);
|
|
|
|
if (context === undefined) {
|
|
throw new Error("useAnimationConfig must be used within AnimationProvider");
|
|
}
|
|
|
|
return context;
|
|
}
|