{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/mPRjUI8M0iAJUNJozv5i/WDE0fIExM5yIo9hALN4E/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": "gJAA8M,IAAMA,EAASC,EAAY,CAAC,OAAO,CAAC,UAAU,SAAS,EAAE,QAAQ,EAAI,CAAC,EAAS,SAASC,EAAyBC,EAAU,CAAC,OAAOC,GAAO,CAAC,GAAK,CAACC,EAAMC,CAAQ,EAAEN,EAAS,EAAQO,EAAIC,EAAO,IAAI,EAAQC,EAASC,EAAUH,CAAG,EAAE,OAAAI,EAAU,IAAI,CAAIF,GAAU,CAACJ,EAAM,QAASC,EAAS,CAAC,QAAQ,EAAI,CAAC,EAAW,CAACG,GAAUJ,EAAM,SAASC,EAAS,CAAC,QAAQ,EAAK,CAAC,CAAG,EAAE,CAACC,EAAIE,EAASJ,EAAMC,CAAQ,CAAC,EAAuBM,EAAKT,EAAU,CAAC,GAAGC,EAAM,IAAIG,CAAG,CAAC,CAAE,CAAE,CAAQ,SAASM,EAAiBV,EAAU,CAAC,OAAOC,GAAO,CAAC,GAAK,CAACC,EAAMC,CAAQ,EAAEN,EAAS,EAAQc,EAASC,EAAqB,EAAE,OAAAJ,EAAU,IAAI,CAAIN,EAAM,QAASS,EAAS,MAAM,CAAC,gBAAgB,CAAC,GAAGT,EAAM,MAAM,CAAC,CAAC,EAAQS,EAAS,KAAK,CAAG,EAAE,CAACA,EAAST,CAAK,CAAC,EAAuBO,EAAKT,EAAU,CAAC,GAAGC,EAAM,MAAM,CAAC,GAAGA,EAAM,MAAM,gBAAgBC,EAAM,OAAO,CAAC,EAAE,WAAW,kBAAkB,EAAE,QAAQS,EAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,GAAG,OAAO,IAAS,WAAW,SAAS,CAAC,CAAC,CAAE,CAAE,CAAQ,SAASE,EAAeb,EAAU,CAAC,OAAOC,GAAO,CAAC,GAAK,CAACC,EAAMC,CAAQ,EAAEN,EAAS,EAAQc,EAASC,EAAqB,EAAE,OAAAJ,EAAU,IAAI,CAAIN,EAAM,QAASS,EAAS,MAAM,CAAC,MAAM,CAAC,GAAGT,EAAM,MAAM,CAAC,CAAC,EAAQS,EAAS,KAAK,CAAG,EAAE,CAACA,EAAST,CAAK,CAAC,EAAuBO,EAAKT,EAAU,CAAC,GAAGC,EAAM,MAAM,CAAC,GAAGA,EAAM,MAAM,MAAMC,EAAM,OAAO,CAAC,EAAE,WAAW,OAAO,EAAE,QAAQS,EAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,GAAG,OAAO,IAAS,WAAW,SAAS,CAAC,CAAC,CAAE,CAAE",
  "names": ["useStore", "createStore", "withColorCycleController", "Component", "props", "store", "setStore", "ref", "pe", "isInView", "useInView", "ue", "p", "withBGColorCycle", "controls", "useAnimationControls", "withColorCycle"]
}