https://blog.maximeheckel.com/_next/static/chunks/6006.6130746a052d2013.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6006],{1100:(e,t,r)=>{r.d(t,{A:()=>k});var i=r(67002),n=r(92342),a=r(77809),s=r(9642),l=r(17596),o=r(35627),c=r(35798),u=r(18734),d=r(42475),h=r(16466),f=r(97839),p=r(84727),g=r(58198),m=r(42566),x=r(75879),b=r(45448);let w=(0,b.g)(f.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"}}}}),v=(0,b.g)(p.X,{position:"relative",boxSizing:"border-box",display:"flex",alignItems:"center",width:"100%",touchAction:"none",userSelect:"none",variants:{size:{sm:{height:"34px"},md:{height:"48px"}}}}),y=(0,b.g)(g.h,{position:"relative",flexGrow:1,height:"100%",userSelect:"none"}),R=(0,b.g)(m.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"}}),j=(0,b.g)(x.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"}}),C=(0,b.g)(a.a,{position:"absolute",width:"100%",display:"flex",justifyContent:"space-between",padding:"0 16px",top:"50%",transform:"translateY(-50%)",fontSize:"12px",opacity:.9,pointerEvents:"none"}),z=(0,b.g)(a.a,{position:"absolute",inset:0,display:"flex",alignItems:"center",pointerEvents:"none"}),k=e=>{let{id:t,min:r,max:f,step:p=1,onChange:g,value:m,defaultValue:x,disabled:b,label:k,labelValue:M,hideDots:S,size:B="md"}=e,A=(0,l.I)(),E=(0,h.useId)(),I=t||E,[X,N]=(0,h.useState)(!1),F=(0,h.useRef)(0),G=(0,h.useRef)(!1),P=(0,h.useRef)(null),_=(0,h.useRef)(50),O=(0,h.useRef)(null),V=(0,h.useRef)(!0),L=(0,h.useRef)(null),Y=(0,h.useRef)(null),D=(0,h.useRef)({left:null,right:null}),U=(0,o.d)(1),W=(0,o.d)(1),q=(0,o.d)(0),H=(0,o.d)("left center"),J=(0,o.d)(1),K=(0,o.d)(0),Q=(0,c.z)(U,{stiffness:700,damping:20,mass:1.2}),T=(0,c.z)(W,{stiffness:700,damping:20,mass:1.2}),Z=(0,c.z)(q,{stiffness:700,damping:20,mass:1.2}),$=(0,c.z)(J,{stiffness:500,damping:40,mass:.5}),ee=(0,c.z)(K,{stiffness:300,damping:20,mass:.5}),et=(0,u.G)(ee,e=>"".concat(e,"%")),er=(0,u.G)(K,e=>"".concat(e,"%")),ei=(0,h.useMemo)(()=>25>=Math.floor((f-r)/p)+1,[25,f,r,p]),en=(0,h.useCallback)(e=>{if(!G.current||!P.current)return;let t=e.clientX-F.current;if(ei){let r=P.current.getBoundingClientRect(),i=100*Math.max(0,Math.min(1,(e.clientX-r.left)/r.width));if(_.current=i,O.current){let e=O.current.getBoundingClientRect(),r=P.current.getBoundingClientRect(),n=e.width/r.width*100,a=Math.min(8/Math.max(e.width,16),.5);i<=100&&i>n&&t>0?J.set(1+a):i>=0&&i<n&&t<0?J.set(1-a):J.set(1)}}if(O.current&&P.current){let e=O.current.getBoundingClientRect(),r=P.current.getBoundingClientRect(),i=e.width/r.width*100,n=0;if(i>=99.9&&t>0?n=Math.min(.1*t,50):i<=.5&&t<0&&(n=Math.max(.1*t,-50)),0!==n){let e=Math.abs(n)/50,t=n>0?Math.min(3*e,2):Math.max(-2*e,-2);U.set(1+.02*e),W.set(1-.03*e),q.set(t),H.set(n>0?"left center":"right center")}else U.set(1),W.set(1),q.set(0),H.set("left center")}},[ei,J,U,W,q,H]);(0,h.useEffect)(()=>{let e=()=>{if(L.current&&Y.current&&P.current){let e=P.current.getBoundingClientRect(),t=L.current.getBoundingClientRect(),r=Y.current.getBoundingClientRect();D.current={left:{...t,left:t.left-e.left,right:t.right-e.left,width:t.width},right:{...r,left:r.left-e.left,right:r.right-e.left,width:r.width}},N(!0)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),(0,h.useEffect)(()=>{let e=(m-r)/(f-r)*100;V.current?(ee.jump(e),V.current=!1):K.set(e)},[m,f,r,K,ee]);let ea=(0,h.useMemo)(()=>

1{if(!X||!D.current.left||!P.current)return!1;let e=(m-r)/(f-r)*P.current.getBoundingClientRect().width;return e>D.current.left.left-16&&e<D.current.left.right+16},[f,r,m,X]),es=(0,h.useMemo)(()=>{if(!X||!D.current.right||!P.current)return!1;let e=(m-r)/(f-r)*P.current.getBoundingClientRect().width;return e<D.current.right.right+16&&e>D.current.right.left-16},[f,r,m,X]);return(0,i.jsxs)(w,{id:I,"aria-label":k,"aria-valuemin":r,"aria-valuemax":f,"aria-valuenow":m,"aria-disabled":b,"aria-valuetext":"".concat(k,": ").concat(m),ref:P,defaultValue:x,min:r,max:f,step:p,value:m,disabled:b,onValueChange:g,size:B,render:(0,i.jsx)(d.P.div,{onPointerMove:en,onPointerUp:()=>{U.set(1),W.set(1),q.set(0),J.set(1),G.current=!1},onPointerDown:e=>{F.current=e.clientX,G.current=!0},style:{opacity:b?.4:1,transformOrigin:H,scaleX:A?U:Q,scaleY:A?W:T,x:A?q:Z}}),children:[(0,i.jsx)(v,{size:B,children:(0,i.jsxs)(y,{children:[(0,i.jsx)(R,{render:(0,i.jsx)(d.P.div,{ref:O,style:{borderRadius:"sm"===B?"8px":"12px",scaleX:A?J:$,width:A?er:et,"--left-offset":0===m?"8px":"auto","--right-offset":0===m?"auto":"8px","--thumb-opacity":ea||es?0:1,transformOrigin:"left center",minWidth:0===m?"1px":"auto"},children:(0,i.jsx)(n.b,{border:!1,style:{zIndex:"unset !important",backdropFilter:"unset !important"}})})}),(0,i.jsx)(j,{})]})}),ei&&!S?(0,i.jsx)(z,{"aria-hidden":"true",children:Array.from({length:Math.floor((f-r)/p)+1}).map((e,t)=>{let n=r+t*p,s=(n-r)/(f-r)*100;return(0,i.jsx)(a.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:n===m||n<r+.3*(f-r)||n>r+.8*(f-r)?0:1}},t)})}):null,(0,i.jsxs)(C,{children:[k?(0,i.jsx)(s.c,{id:"".concat(I,"-label"),as:"label",htmlFor:I,size:"2",weight:"4",variant:"secondary",ref:L,children:k}):null,(0,i.jsx)(s.c,{variant:"primary",size:"2",style:{fontVariantNumeric:"tabular-nums"},weight:"4",ref:Y,children:M||m.toFixed(2)})]})]})}},6006:(e,t,r)=>{r.r(t),r.d(t,{default:()=>d});var i=r(67002),n=r(45448),a=r(14699),s=r(63933),l=r(77809),o=r(16466),c=r(1100);let u=(0,n.c)({position:"absolute",top:0,left:0,width:100,height:100,borderRadius:"50%",mixBlendMode:"color-dodge"})(),d=e=>{let{enableSampling:t}=e,[r,n]=o.useState(5),[d,h]=o.useState(1),f=Array(d).fill(0);return(0,i.jsx)(a.a,{className:"maximeheckel-dark",title:t?"RGB Shift/Chromatic Aberration effect visualizer with samples":"RGB Shift/Chromatic Aberration effect visualizer",children:(0,i.jsxs)(a.a.Body,{as:s.a,direction:"column",dotMatrix:!0,gap:"6",children:[(0,i.jsxs)(l.a,{css:{margin:"24px auto",position:"relative",width:"fit-content",color:"white !important"},id:"wrapper",children:[(0,i.jsx)(l.a,{css:{margin:0,opacity:0,width:100,height:100},id:"static"}),f.map((e,t)=>(0,i.jsxs)(o.Fragment,{children:[(0,i.jsx)(l.a,{className:u,css:{background:"#f00",transform:"translate(".concat(-1*(5*r+t*r),"px, 0)"),willChange:"transform"},id:"red"},"".concat(t,"-red")),(0,i.jsx)(l.a,{className:u,css:{background:"#0f0",transform:"translate(".concat(t%2?t*r:-1*t*r,"px, 0)"),willChange:"transform"},id:"green"},"".concat(t,"-green")),(0,i.jsx)(l.a,{className:u,css:{background:"#00f",transform:"translate(".concat(5*r+t*r,"px, 0)"),willChange:"transform"},id:"green"},"".concat(t,"-blue"))]},t))]},"foo"),(0,i.jsxs)(s.a,{direction:"column",gap:"2",alignItems:"start",css:{width:"100%"},children:[(0,i.jsx)(c.A,{id:"split","aria-label":"Split intensity",label:"Split intensity",min:0,max:10,step:.1,value:r,onChange:e=>{n(e)}}),t?(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(c.A,{id:"samples",label:"Samples","aria-label":"Samples",min:1,max:10,step:1,value:d,onChange:e=>{h(e)}})}):null]})]})})}}}]);