https://blog.maximeheckel.com/_next/static/chunks/5768.aee8770fbe56964c.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5768],{1100:(e,t,a)=>{a.d(t,{A:()=>I});var i=a(67002),r=a(92342),n=a(77809),s=a(9642),l=a(17596),o=a(35627),d=a(35798),c=a(18734),u=a(42475),h=a(16466),p=a(97839),g=a(84727),x=a(58198),f=a(42566),m=a(75879),v=a(45448);let b=(0,v.g)(p.g,{position:"relative",display:"flex",alignItems:"center",userSelect:"none",touchAction:"none",width:"100%",overflow:"clip",backgroundColor:"oklch(from var(--gray-900) l c h / var(--opacity, 0.3))",cursor:"grab","&:active":{cursor:"grabbing"},"[data-disabled]":{cursor:"not-allowed !important"},"&:has(:focus-visible)":{outline:"2px solid var(--blue-800)",outlineOffset:2},variants:{size:{sm:{height:"34px",borderRadius:"8px"},md:{height:"48px",borderRadius:"12px"}}}}),y=(0,v.g)(g.X,{position:"relative",boxSizing:"border-box",display:"flex",alignItems:"center",width:"100%",touchAction:"none",userSelect:"none",variants:{size:{sm:{height:"34px"},md:{height:"48px"}}}}),j=(0,v.g)(x.h,{position:"relative",flexGrow:1,height:"100%",userSelect:"none"}),w=(0,v.g)(f.X,{userSelect:"none",position:"absolute",height:"100%","&::before":{content:'""',position:"absolute",top:"50%",transition:"opacity 0.15s ease-in-out",opacity:"var(--thumb-opacity, 1)",transform:"translate(-50%, -50%)",right:"var(--right-offset, auto)",left:"var(--left-offset, auto)",width:"2px",backgroundColor:"oklch(from var(--text-primary) l c h / var(--opacity, 0.5))",borderRadius:"9999px",height:"20px"}}),C=(0,v.g)(m.O,{display:"block",opacity:1,backgroundColor:"rgba(220, 38, 38, 0.0)",width:"20px",height:"44px",borderRadius:"9999px",position:"relative",zIndex:1,"&::before":{content:'""',position:"absolute",top:"50%",transform:"translate(-50%, -50%)",left:"50%",width:"2px",borderRadius:"9999px",height:"24px"}}),k=(0,v.g)(n.a,{position:"absolute",width:"100%",display:"flex",justifyContent:"space-between",padding:"0 16px",top:"50%",transform:"translateY(-50%)",fontSize:"12px",opacity:.9,pointerEvents:"none"}),R=(0,v.g)(n.a,{position:"absolute",inset:0,display:"flex",alignItems:"center",pointerEvents:"none"}),I=e=>{let{id:t,min:a,max:p,step:g=1,onChange:x,value:f,defaultValue:m,disabled:v,label:I,labelValue:S,hideDots:z,size:O="md"}=e,M=(0,l.I)(),B=(0,h.useId)(),E=t||B,[A,V]=(0,h.useState)(!1),W=(0,h.useRef)(0),P=(0,h.useRef)(!1),T=(0,h.useRef)(null),X=(0,h.useRef)(50),D=(0,h.useRef)(null),H=(0,h.useRef)(!0),F=(0,h.useRef)(null),G=(0,h.useRef)(null),L=(0,h.useRef)({left:null,right:null}),_=(0,o.d)(1),N=(0,o.d)(1),U=(0,o.d)(0),Y=(0,o.d)("left center"),q=(0,o.d)(1),J=(0,o.d)(0),K=(0,d.z)(_,{stiffness:700,damping:20,mass:1.2}),Q=(0,d.z)(N,{stiffness:700,damping:20,mass:1.2}),Z=(0,d.z)(U,{stiffness:700,damping:20,mass:1.2}),$=(0,d.z)(q,{stiffness:500,damping:40,mass:.5}),ee=(0,d.z)(J,{stiffness:300,damping:20,mass:.5}),et=(0,c.G)(ee,e=>"".concat(e,"%")),ea=(0,c.G)(J,e=>"".concat(e,"%")),ei=(0,h.useMemo)(()=>25>=Math.floor((p-a)/g)+1,[25,p,a,g]),er=(0,h.useCallback)(e=>{if(!P.current||!T.current)return;let t=e.clientX-W.current;if(ei){let a=T.current.getBoundingClientRect(),i=100*Math.max(0,Math.min(1,(e.clientX-a.left)/a.width));if(X.current=i,D.current){let e=D.current.getBoundingClientRect(),a=T.current.getBoundingClientRect(),r=e.width/a.width*100,n=Math.min(8/Math.max(e.width,16),.5);i<=100&&i>r&&t>0?q.set(1+n):i>=0&&i<r&&t<0?q.set(1-n):q.set(1)}}if(D.current&&T.current){let e=D.current.getBoundingClientRect(),a=T.current.getBoundingClientRect(),i=e.width/a.width*100,r=0;if(i>=99.9&&t>0?r=Math.min(.1*t,50):i<=.5&&t<0&&(r=Math.max(.1*t,-50)),0!==r){let e=Math.abs(r)/50,t=r>0?Math.min(3*e,2):Math.max(-2*e,-2);_.set(1+.02*e),N.set(1-.03*e),U.set(t),Y.set(r>0?"left center":"right center")}else _.set(1),N.set(1),U.set(0),Y.set("left center")}},[ei,q,_,N,U,Y]);(0,h.useEffect)(()=>{let e=()=>{if(F.current&&G.current&&T.current){let e=T.current.getBoundingClientRect(),t=F.current.getBoundingClientRect(),a=G.current.getBoundingClientRect();L.current={left:{...t,left:t.left-e.left,right:t.right-e.left,width:t.width},right:{...a,left:a.left-e.left,right:a.right-e.left,width:a.width}},V(!0)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),(0,h.useEffect)(()=>{let e=(f-a)/(p-a)*100;H.current?(ee.jump(e),H.current=!1):J.set(e)},[f,p,a,J,ee]);let en=(0,h.useMemo)(()=>

1{if(!A||!L.current.left||!T.current)return!1;let e=(f-a)/(p-a)*T.current.getBoundingClientRect().width;return e>L.current.left.left-16&&e<L.current.left.right+16},[p,a,f,A]),es=(0,h.useMemo)(()=>{if(!A||!L.current.right||!T.current)return!1;let e=(f-a)/(p-a)*T.current.getBoundingClientRect().width;return e<L.current.right.right+16&&e>L.current.right.left-16},[p,a,f,A]);return(0,i.jsxs)(b,{id:E,"aria-label":I,"aria-valuemin":a,"aria-valuemax":p,"aria-valuenow":f,"aria-disabled":v,"aria-valuetext":"".concat(I,": ").concat(f),ref:T,defaultValue:m,min:a,max:p,step:g,value:f,disabled:v,onValueChange:x,size:O,render:(0,i.jsx)(u.P.div,{onPointerMove:er,onPointerUp:()=>{_.set(1),N.set(1),U.set(0),q.set(1),P.current=!1},onPointerDown:e=>{W.current=e.clientX,P.current=!0},style:{opacity:v?.4:1,transformOrigin:Y,scaleX:M?_:K,scaleY:M?N:Q,x:M?U:Z}}),children:[(0,i.jsx)(y,{size:O,children:(0,i.jsxs)(j,{children:[(0,i.jsx)(w,{render:(0,i.jsx)(u.P.div,{ref:D,style:{borderRadius:"sm"===O?"8px":"12px",scaleX:M?q:$,width:M?ea:et,"--left-offset":0===f?"8px":"auto","--right-offset":0===f?"auto":"8px","--thumb-opacity":en||es?0:1,transformOrigin:"left center",minWidth:0===f?"1px":"auto"},children:(0,i.jsx)(r.b,{border:!1,style:{zIndex:"unset !important",backdropFilter:"unset !important"}})})}),(0,i.jsx)(C,{})]})}),ei&&!z?(0,i.jsx)(R,{"aria-hidden":"true",children:Array.from({length:Math.floor((p-a)/g)+1}).map((e,t)=>

1{let r=a+t*g,s=(r-a)/(p-a)*100;return(0,i.jsx)(n.a,{css:{position:"absolute",left:"calc(".concat(s,"% - 10px)"),transform:"translateX(-50%)",width:"4px",height:"4px",backgroundColor:"hsla(0, 0%, 100%, 0.3)",borderRadius:"9999px",transition:"opacity 0.15s ease-in-out",willChange:"opacity"},style:{opacity:r===f||r<a+.3*(p-a)||r>a+.8*(p-a)?0:1}},t)})}):null,(0,i.jsxs)(k,{children:[I?(0,i.jsx)(s.c,{id:"".concat(E,"-label"),as:"label",htmlFor:E,size:"2",weight:"4",variant:"secondary",ref:F,children:I}):null,(0,i.jsx)(s.c,{variant:"primary",size:"2",style:{fontVariantNumeric:"tabular-nums"},weight:"4",ref:G,children:S||f.toFixed(2)})]})]})}},10324:(e,t,a)=>{a.d(t,{iS:()=>n,lV:()=>l,mO:()=>s,np:()=>r});var i=a(45448);let r=(0,i.g)("div",{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gridGap:"32px","@media (max-width: 950px)":{padding:"0"},"> div":{width:"100%",maxWidth:"400px",marginLeft:"auto",marginRight:"auto"}}),n=(0,i.g)("div",{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"space-around",height:"475px",padding:"12px 0px"}),s=(0,i.g)("div",{margin:"30px 0px","@media (min-width: 1100px)":{position:"relative",maxWidth:"1000px",width:"calc(100% + 300px)",margin:"30px -150px"}}),l=(0,i.g)("form",{margin:"20px 0",width:"70%",zIndex:"1",display:"flex",flexDirection:"column",justifyContent:"space-around",fontSize:"14px",select:{border:"1px solid var(--accent)",boxShadow:"none",backgroundColor:"var(--emphasis)",color:"var(--accent)",height:"30px",borderRadius:"var(--border-radius-0)",padding:"5px"}})},67479:(e,t,a)=>{a.d(t,{l:()=>i.A});var i=a(68298)},68298:(e,t,a)=>{a.d(t,{A:()=>k});var i=a(67002),r=a(91495),n=a(13632),s=a(20682),l=a(36030),o=a(82618),d=a(9642),c=a(63933),u=a(23896),h=a(16466),p=a(72498),g=a(88316),x=a(34884),f=a(79192),m=a(53001),v=a(45448);let b=(0,v.g)(p.b,{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"var(--space-2)",padding:"var(--space-1) var(--space-3)",backgroundColor:"oklch(from var(--gray-900) l c h / var(--opacity, 0.3))",border:"var(--thickness, 1px) solid oklch(from var(--gray-1100) l c h / 5%)",borderRadius:"var(--border-radius-2)",height:"34px",cursor:"pointer",color:"var(--text-primary)",letterSpacing:"-0.022em",fontFamily:"var(--font-display)",fontWeight:"500",minWidth:"var(--min-width)",transition:"background-color 0.25s ease-in-out","&[disabled]":{cursor:"not-allowed",opacity:.4,filter:"grayscale(0.25)"},"&:hover:not([disabled])":{backgroundColor:"oklch(from var(--gray-900) l c h / var(--opacity, 0.4))"},"&:focus-visible:not([disabled])":{outline:"2px solid var(--blue-800)",outlineOffset:2,backgroundColor:"oklch(from var(--gray-900) l c h / var(--opacity, 0.4))"},variants:{size:{sm:{height:"34px"},md:{height:"48px",width:"100%"}}}}),y=(0,v.g)(g.w,{display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text-primary)"}),j=(0,v.g)(x.t,{borderRadius:"var(--border-radius-2)",backgroundColor:"oklch(from var(--gray-900) l c h / var(--opacity, 0.3))",backdropFilter:"blur(var(--blur, 12px)) saturate(var(--saturate, 1.15))",border:"var(--thickness, 1px) solid oklch(from var(--gray-1100) l c h / 15%)",color:"var(--color-gray-900)",minWidth:"var(--anchor-width)",transformOrigin:"var(--transform-origin)",transition:"transform 0.15s, opacity 0.15s",padding:"var(--space-1) 0px","&[data-starting-style], &[data-ending-style]":{opacity:0,transform:"scale(0.9)"},'&[data-side="none"]':{transition:"none",transform:"none",opacity:1,minWidth:"calc(var(--anchor-width) + 1rem)"},outline:"1px solid var(--color-gray-300)"}),w=(0,v.g)(f.e,{boxSizing:"border-box",outline:0,fontWeight:"var(--font-weight-500)",fontFamily:"var(--font-display)",fontSize:"var(--font-size-1)",letterSpacing:"-0.022em",padding:"var(--space-2) var(--space-2) var(--space-2) var(--space-3)",display:"flex",justifyContent:"space-between",alignItems:"center",gap:"var(--space-2)",cursor:"pointer",userSelect:"none",scrollMarginBlock:"0.25rem","@media (pointer: coarse)":{paddingBlock:"0.625rem"},"[data-side='none'] &":{paddingRight:"3rem"},"@media (hover: hover)":{"&[data-highlighted]":{zIndex:0,position:"relative",color:"var(--color-gray-50)"},"&[data-highlighted]::before":{content:"''",zIndex:-1,position:"absolute",insetBlock:0,insetInline:4,borderRadius:"var(--border-radius-1)",backgroundColor:"oklch(from var(--gray-900) l c h / var(--opacity, 0.3))"}}}),C=(0,v.g)(m.h,{display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text-primary)"}),k=e=>{let{id:t,triggerRef:a,items:p,value:g,onChange:x,minWidth:f,disabled:m,size:v="sm",label:k}=e,R=(0,h.useId)();return(0,i.jsxs)(r.H,{items:p,value:g,onValueChange:x,children:[(0,i.jsxs)(b,{id:t||R,ref:a,disabled:m,size:v,style:{"--min-width":"".concat(null!=f?f:124,"px")},children:[k&&"md"===v?(0,i.jsx)(d.c,{size:"2",weight:"4",variant:"secondary",children:k}):null,(0,i.jsxs)(c.a,{alignItems:"center",css:{width:"md"===v?"auto":"100%"},justifyContent:"space-between",gap:"1",children:[(0,i.jsx)(d.c,{size:"2",weight:"4",variant:"primary",children:(0,i.jsx)(n.y,{})}),(0,i.jsx)(y,{children:(0,i.jsx)(u.a.ChevronUpDown,{size:4})})]})]}),(0,i.jsx)(s.V,{children:(0,i.jsx)(l.l,{alignItemWithTrigger:!1,sideOffset:4,style:{outline:"none",zIndex:1,WebkitUserSelect:"none",userSelect:"none"},children:(0,i.jsx)(j,{children:(0,i.jsx)(o.B,{children:p.map(e=>{let{label:t,value:a}=e;return(0,i.jsxs)(w,{value:a,children:[t,(0,i.jsx)(C,{children:(0,i.jsx)(u.a.Check,{variant:"default",size:4})})]},t)})})})})})]})}},75768:(e,t,a)=>{a.r(t),a.d(t,{default:()=>x});var i=a(67002),r=a(13116),n=a(14699),s=a(63933),l=a(67445),o=a(42475),d=a(164

166),c=a(50883),u=a(67479),h=a(1100),p=a(10324);let g=[{label:"Linear",value:"linear"},{label:"EaseIn",value:"easeIn"},{label:"EaseOut",value:"easeOut"},{label:"EaseInOut",value:"easeInOut"},{label:"CircIn",value:"circIn"},{label:"CircOut",value:"circOut"},{label:"CircInOut",value:"circInOut"},{label:"BackIn",value:"backIn"},{label:"BackOut",value:"backOut"},{label:"BackInOut",value:"backInOut"},{label:"Anticipate",value:"anticipate"}],x=()=>{let e=(0,d.useRef)(null),t=(0,l.W)(e),[a,x]=d.useState("easeInOut"),[f,m]=d.useState(4),[v,b]=d.useState(4),[y,j]=d.useState(250),[w,C]=d.useState(230),[k,R]=d.useState(0),[I,S]=d.useState(0),z=(0,r.a)(f,300),O=(0,r.a)(w,300),M=(0,r.a)(v,300),B=(0,r.a)(y,300);d.useEffect(()=>{R(k+1)},[z,O,M]),d.useEffect(()=>{S(I+1)},[B]);let E="<motion.div\n    ...\n    transition={{\n      type: 'spring',\n      stiffness: ".concat(w,",\n      mass: ").concat(f,",\n      damping: ").concat(v,",\n    }}\n  />\n  "),A="<motion.div\n  ...\n  transition={{\n    type: 'tween',\n    ease: '".concat(a,"',\n    duration: 2,\n    ...\n  }}\n  />\n  "),V="<motion.div\n    ...\n    transition={{\n      type: 'inertia',\n      velocity: ".concat(y,",\n    }}\n  />\n\n\n  ");return(0,i.jsx)(p.mO,{ref:e,children:(0,i.jsxs)(p.np,{children:[(0,i.jsxs)(n.a,{depth:1,children:[(0,i.jsx)(n.a.Header,{children:"Spring"}),(0,i.jsxs)(p.iS,{children:[(0,i.jsx)(p.lV,{children:(0,i.jsxs)(s.a,{direction:"column",gap:5,children:[(0,i.jsx)(h.A,{id:"mass1","aria-label":"Mass",label:"Mass",min:1,max:10,value:f,onChange:e=>m(e)}),(0,i.jsx)(h.A,{id:"stiffness1","aria-label":"Stiffness",label:"Stiffness",min:1,max:500,value:w,onChange:e=>C(e)}),(0,i.jsx)(h.A,{id:"damping","aria-label":"Damping",label:"Damping",min:0,max:5,step:.1,value:v,onChange:e=>b(e)})]})}),(0,i.jsx)("div",{}),(0,i.jsx)(o.P.div,{style:{background:"linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)",height:"100px",width:"100px",borderRadius:"10px"},initial:{y:-100},animate:t?{y:0}:{y:-100},transition:{type:"spring",stiffness:w,mass:f,damping:v}},k)]}),(0,i.jsx)(c.HighlightedCodeText,{codeString:E,language:"javascript"})]}),(0,i.jsxs)(n.a,{depth:1,children:[(0,i.jsx)(n.a.Header,{children:"Tween"}),(0,i.jsxs)(p.iS,{children:[(0,i.jsx)(p.lV,{children:(0,i.jsx)(u.l,{"aria-label":"Easing type",id:"tween-type",items:g,value:a,onChange:e=>x(e)})}),(0,i.jsx)("div",{}),(0,i.jsx)(o.P.div,{style:{background:"linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)",height:"100px",width:"100px",borderRadius:"10px"},initial:{y:-120},animate:t?{y:20}:{y:-120},transition:{ease:a,repeat:1/0,repeatType:"reverse",repeatDelay:1,duration:2}},a)]}),(0,i.jsx)(c.HighlightedCodeText,{codeString:A,language:"javascript"})]}),(0,i.jsxs)(n.a,{depth:1,children:[(0,i.jsx)(n.a.Header,{children:"Inertia"}),(0,i.jsxs)(p.iS,{children:[(0,i.jsx)(p.lV,{children:(0,i.jsx)("div",{style:{display:"grid"},children:(0,i.jsx)(h.A,{id:"velocity","aria-label":"Velocity",label:"Velocity",min:1,max:500,value:y,onChange:e=>j(e)})})}),(0,i.jsx)("div",{}),(0,i.jsx)(o.P.div,{style:{background:"linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)",height:"100px",width:"100px",borderRadius:"10px"},initial:{y:-120},animate:t?{y:20}:{y:-120},transition:{type:"inertia",velocity:y,repeat:1/0,repeatType:"reverse"}},I)]}),(0,i.jsx)(c.HighlightedCodeText,{codeString:V,language:"javascript"})]})]})})}}}]);