'use client'; import React, { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react'; import { MeshGradient, type MeshGradientParams, type MeshGradientProps, } from '@paper-design/shaders-react'; import { animate, AnimatePresence, motion } from 'motion/react'; import { cn } from '@/lib/utils'; type GradientStep = Required< Pick< MeshGradientParams, | 'distortion' | 'swirl' | 'grainMixer' | 'grainOverlay' | 'speed' | 'scale' | 'rotation' | 'offsetX' | 'offsetY' > >; const DEFAULT_STEPS: GradientStep[] = [ { distortion: 0.3, swirl: 0.1, grainMixer: 0.16, grainOverlay: 0.15, speed: 0.45, scale: 1.0, rotation: 0, offsetX: 0, offsetY: 0, }, { distortion: 0.5, swirl: 0.3, grainMixer: 0.1, grainOverlay: 0.1, speed: 0.55, scale: 1.2, rotation: 15, offsetX: 0.1, offsetY: -0.05, }, { distortion: 0.4, swirl: 0.8, grainMixer: 0.2, grainOverlay: 0.1, speed: 0.38, scale: 0.9, rotation: -10, offsetX: -0.15, offsetY: 0.1, }, { distortion: 0.9, swirl: 0.5, grainMixer: 0.12, grainOverlay: 0.2, speed: 0.65, scale: 1.4, rotation: 25, offsetX: 0.05, offsetY: -0.1, }, { distortion: 0.25, swirl: 0.2, grainMixer: 0.6, grainOverlay: 0.5, speed: 0.5, scale: 1.1, rotation: -5, offsetX: -0.05, offsetY: 0.05, }, { distortion: 0.6, swirl: 0.9, grainMixer: 0.08, grainOverlay: 0.05, speed: 0.3, scale: 0.8, rotation: 35, offsetX: 0.12, offsetY: 0.08, }, { distortion: 0.15, swirl: 0.05, grainMixer: 0.5, grainOverlay: 0.4, speed: 0.6, scale: 1.3, rotation: -20, offsetX: -0.1, offsetY: -0.08, }, ]; const MeshGradientCardContext = createContext<{ messageIndex: number }>({ messageIndex: 0, }); type MeshGradientCardProps = Partial< Omit > & { steps?: GradientStep[]; interval?: number; children?: React.ReactNode; }; function MeshGradientCardRoot({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function MeshGradientCard({ className, children, colors = ['#fafafa', '#18181b', '#fafafa', '#18181b'], steps = DEFAULT_STEPS, interval = 4000, ...shaderProps }: MeshGradientCardProps) { const { config, messageIndex } = useGradientCycler(steps, interval); return ( {children} ); } function MeshGradientCardMessages({ children, className, }: { children?: React.ReactNode; className?: string; }) { const { messageIndex } = useContext(MeshGradientCardContext); const items = React.Children.toArray(children); const active = items[messageIndex % items.length]; return ( {React.isValidElement(active) ? React.cloneElement(active, { key: messageIndex, } as React.Attributes) : active} ); } function MeshGradientCardMessage({ children, className, }: { children?: React.ReactNode; className?: string; }) { return ( {children} ); } function useGradientCycler( steps: GradientStep[] = DEFAULT_STEPS, interval: number = 4000 ) { const [stepIndex, setStepIndex] = useState(0); const [config, setConfig] = useState(steps[0]); const animationRef = useRef | null>(null); const [messageIndex, setMessageIndex] = useState(0); const goToStep = useCallback( (n: number) => { if (n === stepIndex) return; animationRef.current?.stop(); const from = { ...config }; const to = steps[n]; animationRef.current = animate(from, to, { duration: 0.6, ease: 'easeOut', onUpdate: () => setConfig({ ...from }), }); setStepIndex(n); setMessageIndex((i) => i + 1); }, [stepIndex, config, steps] ); useEffect(() => { const id = setTimeout(() => { goToStep((stepIndex + 1) % steps.length); }, interval); return () => clearTimeout(id); }, [stepIndex, goToStep, steps.length, interval]); return { config, stepIndex, messageIndex, goToStep }; } export { MeshGradientCard, MeshGradientCardMessage, MeshGradientCardMessages, MeshGradientCardRoot, useGradientCycler, }; export type { GradientStep, MeshGradientCardProps };