{"version":3,"file":"Color_Cycle.i29PhmJS.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/mUSkEcGWPqR87iCk3y9E/u1mCNjW0VKEpJ63i1AAu/Color_Cycle.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{useInView,useAnimationControls}from\"framer-motion\";import{createStore}from\"https://framer.com/m/framer/store.js@^1.0.0\";const useStore=createStore({colors:[\"#EEF35F\",\"#EEF35F\"],animate:true});export function withColorCycleController(Component){return props=>{const[store,setStore]=useStore();const ref=useRef(null);const isInView=useInView(ref);useEffect(()=>{if(isInView&&!store.animate){setStore({animate:true});}else if(!isInView&&store.animate){setStore({animate:false});}},[ref,isInView,store,setStore]);return /*#__PURE__*/ _jsx(Component,{...props,ref:ref});};}export function withBGColorCycle(Component){return props=>{const[store,setStore]=useStore();const controls=useAnimationControls();useEffect(()=>{if(store.animate){controls.start({backgroundColor:[...store.colors]});}else{controls.stop();}},[controls,store]);return /*#__PURE__*/ _jsx(Component,{...props,style:{...props.style,backgroundColor:store.colors[0],willChange:\"background-color\"},animate:controls,transition:{type:\"tween\",duration:20,repeat:Infinity,repeatType:\"reverse\"}});};}export function withColorCycle(Component){return props=>{const[store,setStore]=useStore();const controls=useAnimationControls();useEffect(()=>{if(store.animate){controls.start({color:[...store.colors]});}else{controls.stop();}},[controls,store]);return /*#__PURE__*/ _jsx(Component,{...props,style:{...props.style,color:store.colors[0],willChange:\"color\"},animate:controls,transition:{type:\"tween\",duration:20,repeat:Infinity,repeatType:\"reverse\"}});};} // Attempted this: https://codesandbox.io/s/framer-motion-morphsvg-example-dp7to?from-embed=&file=/src/App.tsx\n // export function withAccentCycle(Component): ComponentType {\n //     return (props) => {\n //         const [store, setStore] = useStore()\n //         const [colorIndex, setColorIndex] = useState(0)\n //         const progress = useMotionValue(0)\n //         const input = [0, 1, 2, 3]\n //         const colors = [\"red\", \"yellow\", \"green\", \"blue\"]\n //         const color = useTransform(progress, input, colors)\n //         useEffect(() => {\n //             const animation = animate(progress, colorIndex, {\n //                 duration: 1,\n //                 ease: \"linear\",\n //                 onComplete: () => {\n //                     if (colorIndex === colors.length - 1) {\n //                         progress.set(0)\n //                         setColorIndex(0)\n //                     } else {\n //                         setColorIndex(colorIndex + 1)\n //                     }\n //                 },\n //             })\n //             return () => animation.stop()\n //         }, [colorIndex])\n //         return <Component accent={color} {...props} />\n //     }\n // }\n\nexport const __FramerMetadata__ = {\"exports\":{\"withColorCycleController\":{\"type\":\"reactHoc\",\"name\":\"withColorCycleController\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withBGColorCycle\":{\"type\":\"reactHoc\",\"name\":\"withBGColorCycle\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withColorCycle\":{\"type\":\"reactHoc\",\"name\":\"withColorCycle\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Color_Cycle.map"],"mappings":"8NAAsR,SAAgB,EAAyB,EAAU,CAAC,MAAO,IAAO,CAAC,GAAK,CAAC,EAAM,GAAU,GAAU,CAAO,EAAIA,EAAO,KAAK,CAAO,EAAS,EAAU,EAAI,CAAqK,OAApK,MAAc,CAAI,GAAU,CAAC,EAAM,QAAS,EAAS,CAAC,QAAQ,GAAK,CAAC,CAAU,CAAC,GAAU,EAAM,SAAS,EAAS,CAAC,QAAQ,GAAM,CAAC,EAAI,CAAC,EAAI,EAAS,EAAM,EAAS,CAAC,CAAsB,EAAK,EAAU,CAAC,GAAG,EAAU,MAAI,CAAC,qBAA/lB,IAAoC,IAA0D,IAAqE,CAAM,EAAS,EAAY,CAAC,OAAO,CAAC,UAAU,UAAU,CAAC,QAAQ,GAAK,CAAC"}