{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/dXMoFu7V9NbxJuWGeX9h/8zU7so8TlI4oIVv2mQOr/ColorCycle.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,Color}from\"framer\";import{motion}from\"framer-motion\";/**\n * COLOR CYCLE\n * By Benjamin den Boer\n *\n * @framerIntrinsicWidth 200\n * @framerIntrinsicHeight 200\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */ export default function ColorCycle(props){const{colors,radius,randomStart,animOptions,animRepeat,animPause}=props;let shuffledColors=colors;colors.push(colors[0]);if(randomStart){shuffledColors=colors.map(value=>({value,sort:Math.random()})).sort((a,b)=>a.sort-b.sort).map(({value})=>Color.toHslString(Color(value)));shuffledColors.push(shuffledColors[0]);}return /*#__PURE__*/ _jsx(motion.div,{style:{width:\"100%\",height:\"100%\",backgroundColor:shuffledColors[0],borderRadius:radius,willChange:\"background-color\"},animate:{backgroundColor:[...shuffledColors]},transition:{...animOptions,repeat:animRepeat&&Infinity,repeatType:animRepeat&&\"loop\",repeatDelay:animPause}});};ColorCycle.defaultProps={radius:0,colors:[\"#0CF\",\"#2DD\",\"#F64\",\"#99F\"],randomStart:false,animOptions:{type:\"tween\",ease:[0,0,1,1],duration:1},animRepeat:true,animPause:0};ColorCycle.displayName=\"Color Cycle\";addPropertyControls(ColorCycle,{radius:{type:ControlType.Number,min:0,max:1e3,step:1,displayStepper:true,defaultValue:0},colors:{type:ControlType.Array,control:{type:ControlType.Color},defaultValue:ColorCycle.defaultProps.colors},animOptions:{type:ControlType.Transition,title:\"Transition\",defaultValue:ColorCycle.defaultProps.animOptions},randomStart:{type:ControlType.Boolean,title:\"Randomize\",defaultValue:ColorCycle.defaultProps.randomStart},animRepeat:{type:ControlType.Boolean,title:\"Repeat\",defaultValue:ColorCycle.defaultProps.animRepeat},animPause:{type:ControlType.Number,title:\"Pause\",min:0,max:10,displayStepper:true,step:1,defaultValue:ColorCycle.defaultProps.animPause}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ColorCycle\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"200\",\"framerIntrinsicWidth\":\"200\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ColorCycle.map"],
  "mappings": "wEAUmB,SAARA,EAA4BC,EAAM,CAAC,GAAK,CAAC,OAAAC,EAAO,OAAAC,EAAO,YAAAC,EAAY,YAAAC,EAAY,WAAAC,EAAW,UAAAC,CAAS,EAAEN,EAAUO,EAAeN,EAAO,OAAAA,EAAO,KAAKA,EAAO,CAAC,CAAC,EAAKE,IAAaI,EAAeN,EAAO,IAAIO,IAAQ,CAAC,MAAAA,EAAM,KAAK,KAAK,OAAO,CAAC,EAAE,EAAE,KAAK,CAACC,EAAEC,IAAID,EAAE,KAAKC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,MAAAF,CAAK,IAAIG,EAAM,YAAYA,EAAMH,CAAK,CAAC,CAAC,EAAED,EAAe,KAAKA,EAAe,CAAC,CAAC,GAAwBK,EAAKC,EAAO,IAAI,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,gBAAgBN,EAAe,CAAC,EAAE,aAAaL,EAAO,WAAW,kBAAkB,EAAE,QAAQ,CAAC,gBAAgB,CAAC,GAAGK,CAAc,CAAC,EAAE,WAAW,CAAC,GAAGH,EAAY,OAAOC,GAAY,IAAS,WAAWA,GAAY,OAAO,YAAYC,CAAS,CAAC,CAAC,CAAE,CAAEP,EAAW,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,OAAO,OAAO,MAAM,EAAE,YAAY,GAAM,YAAY,CAAC,KAAK,QAAQ,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,WAAW,GAAK,UAAU,CAAC,EAAEA,EAAW,YAAY,cAAce,EAAoBf,EAAW,CAAC,OAAO,CAAC,KAAKgB,EAAY,OAAO,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,eAAe,GAAK,aAAa,CAAC,EAAE,OAAO,CAAC,KAAKA,EAAY,MAAM,QAAQ,CAAC,KAAKA,EAAY,KAAK,EAAE,aAAahB,EAAW,aAAa,MAAM,EAAE,YAAY,CAAC,KAAKgB,EAAY,WAAW,MAAM,aAAa,aAAahB,EAAW,aAAa,WAAW,EAAE,YAAY,CAAC,KAAKgB,EAAY,QAAQ,MAAM,YAAY,aAAahB,EAAW,aAAa,WAAW,EAAE,WAAW,CAAC,KAAKgB,EAAY,QAAQ,MAAM,SAAS,aAAahB,EAAW,aAAa,UAAU,EAAE,UAAU,CAAC,KAAKgB,EAAY,OAAO,MAAM,QAAQ,IAAI,EAAE,IAAI,GAAG,eAAe,GAAK,KAAK,EAAE,aAAahB,EAAW,aAAa,SAAS,CAAC,CAAC",
  "names": ["ColorCycle", "props", "colors", "radius", "randomStart", "animOptions", "animRepeat", "animPause", "shuffledColors", "value", "a", "b", "Color", "p", "motion", "addPropertyControls", "ControlType"]
}