(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[47290],{2243:(e,s,t)=>{"use strict";t.d(s,{Ay:()=>r.default});var r=t(68296)},19859:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>_});var r=t(87687),n=t(52751),o=t(31928),a=t(54401),l=t(66557),i=t(68852),c=t(20120);let d=e=>{let{delay:s}=e,[t,o]=n.useState(0);return(0,l.A)(()=>{o((t+1)%7)},s),(0,r.jsx)(r.Fragment,{children:(0,i.y1)(0,6).map(e=>(0,r.jsx)(p,{children:(0,r.jsx)(u,{"data-status":t===e?"on":"off",style:{transition:"opacity ".concat(.9*s,"ms")}})},e))})},p=(0,o.I)("div")({name:"LightSocket",class:"l1aw4b38",propsAsIs:!1}),u=(0,o.I)("div")({name:"Light",class:"l1xsg8m3",propsAsIs:!1}),m=()=>{let e=(0,a.A)();return(0,r.jsx)(c.Ay,{id:"old-rainbow-method",initialValues:{speed:3},controlPosition:"top",controlStyles:{gridTemplateColumns:"min(360px, 100%)",justifyContent:"center"},controls:[(0,r.jsx)(c.oP,{id:"speed",label:"Speed",min:1,max:5,step:.5},"speed")],children:s=>{let{speed:t}=s,n=(0,i.S8)(t,1,5,300,60);return(0,r.jsx)(d,{delay:e?1e7:n})}})};t(18734);var h=t(39211);let w=["hsl(1deg, 96%, 55%)","hsl(25deg, 100%, 50%)","hsl(40deg, 100%, 50%)","hsl(45deg, 100%, 50%)","hsl(66deg, 100%, 45%)","hsl(130deg, 100%, 40%)","hsl(177deg, 100%, 35%)","hsl(230deg, 100%, 45%)","hsl(240deg, 100%, 45%)","hsl(260deg, 100%, 55%)","hsl(325deg, 100%, 48%)"],x=w.length,y="function"==typeof window.CSS.registerProperty,g=(e,s)=>"--magic-rainbow-color-".concat(e,"-").concat(s),b=e=>{let{id:s,intervalDelay:t=2e3}=e,r=window.matchMedia("(prefers-reduced-motion: no-preference)"),o=y&&r.matches,{current:a}=n.useRef(s||(0,i.$C)());n.useEffect(()=>{o&&(0,i.y1)(0,3).map(e=>{let s=g(a,e),t=w[e];try{CSS.registerProperty({name:s,initialValue:t,syntax:"<color>",inherits:!1})}catch(e){}})},[o,a]);let l=(0,h.A)(t);return(0,i.y1)(0,3).reduce((e,s)=>{let t=o?l:0,r=g(a,s),n=w[(t+s)%x];return{...e,[r]:n}},{})},f=(0,o.I)("button")({name:"ButtonElem",class:"b172izsv",propsAsIs:!1});t(90483);let j=(0,o.I)("div")({name:"Wrapper",class:"w1tcyud1",propsAsIs:!1}),v=(0,o.I)(function(e){let{id:s,children:t,intervalDelay:n=1300,...o}=e,a=1.25*n,l=b({id:s,intervalDelay:n}),i=Object.keys(l);return(0,r.jsx)(f,{...o,style:{...l,transition:"\n          ".concat(i[0]," ").concat(a,"ms linear,\n          ").concat(i[1]," ").concat(a,"ms linear,\n          ").concat(i[2]," ").concat(a,"ms linear\n        "),background:"\n          radial-gradient(\n            circle at top left,\n            var(".concat(i[2],"),\n            var(").concat(i[1],"),\n            var(").concat(i[0],")\n          )\n        ")},children:t})})({name:"WrappedButton",class:"w1rmz4w4",propsAsIs:!0}),I=()=>(0,r.jsx)(j,{children:(0,r.jsx)(v,{id:"demo-button",children:"Magic Rainbow Button"})});t(97707);var A=t(2243);let k=(0,o.I)("div")({name:"OutputWrapper",class:"okvelqy",propsAsIs:!1}),S=(0,o.I)("div")({name:"Parent",class:"p12jk5sx",propsAsIs:!1}),z=(0,o.I)("div")({name:"Wrapper",class:"w1wwtqs",propsAsIs:!1}),C=(0,o.I)("div")({name:"Backdrop",class:"b1a35tee",propsAsIs:!1}),q=(0,o.I)("div")({name:"Row",class:"r1use8x3",propsAsIs:!1}),P=(0,o.I)("button")({name:"Button",class:"bdnwsmm",propsAsIs:!1}),B=(0,o.I)("div")({name:"Front",class:"f1uwdfyk",propsAsIs:!1}),E=(0,o.I)("div")({name:"Back",class:"bfersic",propsAsIs:!1}),R=(0,o.I)("div")({name:"RainbowGradient",class:"ruz0wo8",propsAsIs:!1}),W=()=>{let e=(0,a.A)();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c.Ay,{id:"old-rainbow-method",initialValues:{rotation:0},outputWrapper:k,controlPosition:"top",controlStyles:{gridTemplateColumns:"min(360px, 100%)",justifyContent:"center"},controls:[(0,r.jsx)(c.oP,{id:"rotation",label:"Reveal",min:0,max:70},"rotation")],children:e=>{let{rotation:s}=e,t=(0,i.S8)(s,0,80,1,.75);return(0,r.jsx)(S,{children:(0,r.jsxs)(z,{style:{transform:"rotateY(".concat(-.5*s,"deg)")},children:[(0,r.jsxs)(B,{"data-include-shadow":s>0,style:{transform:"translateZ(".concat(.2*s,"px)")},children:[(0,r.jsx)(C,{style:{height:100,opacity:t}}),(0,r.jsxs)(q,{children:[(0,r.jsx)(C,{style:{height:60,opacity:t}}),(0,r.jsx)(P,{children:"Subscribe"}),(0,r.jsx)(C,{style:{height:60,opacity:t}})]}),(0,r.jsx)(C,{style:{height:100,opacity:t}})]}),(0,r.jsx)(E,{style:{transform:"translateZ(-".concat(.2*s,"px)")},children:(0,r.jsx)(R,{})})]})})}}),e&&(0,r.jsx)(A.Ay,{type:"warning",children:"It appears that you've opted to reduce motion, in your Operating System settings. This blog tries to respect this query, which means that these demos have been disabled, since they rely heavily on motion."})]})};t(89908);let _=function(e){let{variant:s}=e;if("casino-lights"===s)return(0,r.jsx)(m,{});if("demo-button"===s)return(0,r.jsx)(I,{});if("old-method"===s)return(0,r.jsx)(W,{});throw Error("Unrecognized variant: "+s)}},18734:e=>{e.exports={l1aw4b38:"l1aw4b38",l1xsg8m3:"l1xsg8m3"}},97707:e=>{e.exports={w1tcyud1:"w1tcyud1",w1rmz4w4:"w1rmz4w4"}},90483:e=>{e.exports={b172izsv:"b172izsv"}},89908:e=>{e.exports={okvelqy:"okvelqy",p12jk5sx:"p12jk5sx",w1wwtqs:"w1wwtqs",b1a35tee:"b1a35tee",r1use8x3:"r1use8x3",bdnwsmm:"bdnwsmm",f1uwdfyk:"f1uwdfyk",bfersic:"bfersic",ruz0wo8:"ruz0wo8","gradientGo-ruz0wo8":"gradientGo-ruz0wo8"}}}]);
//# sourceMappingURL=47290.858fdc0fe8b97c08.js.map