https://blog.maximeheckel.com/_next/static/chunks/5713.4de16f7b66cd6e0c.js

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

1{if(!X||!O.current.left||!D.current)return!1;let e=(m-i)/(h-i)*D.current.getBoundingClientRect().width;return e>O.current.left.left-16&&e<O.current.left.right+16},[h,i,m,X]),es=(0,f.useMemo)(()=>{if(!X||!O.current.right||!D.current)return!1;let e=(m-i)/(h-i)*D.current.getBoundingClientRect().width;return e<O.current.right.right+16&&e>O.current.right.left-16},[h,i,m,X]);return(0,n.jsxs)(b,{id:E,"aria-label":S,"aria-valuemin":i,"aria-valuemax":h,"aria-valuenow":m,"aria-disabled":v,"aria-valuetext":"".concat(S,": ").concat(m),ref:D,defaultValue:x,min:i,max:h,step:g,value:m,disabled:v,onValueChange:p,size:P,render:(0,n.jsx)(d.P.div,{onPointerMove:er,onPointerUp:()=>{T.set(1),L.set(1),Y.set(0),q.set(1),A.current=!1},onPointerDown:e=>{W.current=e.clientX,A.current=!0},style:{opacity:v?.4:1,transformOrigin:Q,scaleX:B?T:J,scaleY:B?L:K,x:B?Y:Z}}),children:[(0,n.jsx)(w,{size:P,children:(0,n.jsxs)(R,{children:[(0,n.jsx)(z,{render:(0,n.jsx)(d.P.div,{ref:_,style:{borderRadius:"sm"===P?"8px":"12px",scaleX:B?q:$,width:B?ei: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,n.jsx)(r.b,{border:!1,style:{zIndex:"unset !important",backdropFilter:"unset !important"}})})}),(0,n.jsx)(y,{})]})}),en&&!M?(0,n.jsx)(j,{"aria-hidden":"true",children:Array.from({length:Math.floor((h-i)/g)+1}).map((e,t)=>{let r=i+t*g,s=(r-i)/(h-i)*100;return(0,n.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:r===m||r<i+.3*(h-i)||r>i+.8*(h-i)?0:1}},t)})}):null,(0,n.jsxs)(C,{children:[S?(0,n.jsx)(s.c,{id:"".concat(E,"-label"),as:"label",htmlFor:E,size:"2",weight:"4",variant:"secondary",ref:G,children:S}):null,(0,n.jsx)(s.c,{variant:"primary",size:"2",style:{fontVariantNumeric:"tabular-nums"},weight:"4",ref:N,children:k||m.toFixed(2)})]})]})}},45713:(e,t,i)=>{i.r(t),i.d(t,{WhiteDots:()=>d});var n=i(67002),r=i(63933),a=i(77809),s=i(16466),l=i(1100),o=i(74795);let u="#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform vec2 uResolution;\nuniform float uRadius;\nuniform float uPixelSize;\nuniform sampler2D uTexture;\n\nvoid main() {\n  vec2 uv = vUv;\n  vec2 normalizedPixelSize = uPixelSize / uResolution;\n  vec2 offsetUv = uv;

1\n\n  vec2 uvPixel = normalizedPixelSize * floor(uv / normalizedPixelSize);\n  vec4 color = texture(uTexture, uvPixel);\n\n  float luma = dot(vec3(0.2126, 0.7152, 0.0722), color.rgb);\n  \n  vec2 cellUv = fract(offsetUv / normalizedPixelSize);\n  vec2 toCenter = cellUv - 0.5;\n  float dist = length(toCenter);\n\n  float radius = uRadius * (1.0 - luma + 0.1);\n  float edgeWidth = fwidth(dist);\n  float circle = smoothstep(radius - edgeWidth, radius + edgeWidth, dist);\n\n  float circleMask = (1.0 - circle);\n  color = mix(color, vec4(1.0), circleMask);\n\n  fragColor = color;\n}\n",c=[8,16,32,64],d=()=>{let e=(0,s.useRef)(null),[t,i]=(0,s.useState)(.25),[d,f]=(0,s.useState)(1),h=c[d],g=(0,s.useDeferredValue)(t),p=(0,s.useDeferredValue)(h),m=(0,s.useId)();return(0,n.jsxs)(r.a,{alignItems:"center",direction:"column",gap:"4",css:{maxWidth:662,width:"100%"},children:[(0,n.jsx)(a.a,{ref:e,css:{width:"100%",borderRadius:"var(--border-radius-2)",overflow:"hidden",aspectRatio:"16 / 10"},children:(0,n.jsx)(o.Q,{fragmentShader:u,uniforms:{uRadius:g,uPixelSize:p,uTexture:"https://cdn.maximeheckel.com/images/backgrounds/landscape.mp4"},aspectRatio:"16 / 10"},u)}),(0,n.jsxs)(r.a,{direction:"column",gap:"4",css:{width:"100%","@md":{width:"50%",minWidth:135}},children:[(0,n.jsx)(l.A,{id:"".concat(m,"-pixelSize"),label:"Pixel Size",labelValue:"".concat(h," x ").concat(h),min:0,max:c.length-1,step:1,value:d,onChange:f,hideDots:!0}),(0,n.jsx)(l.A,{id:"".concat(m,"-radius"),label:"Radius",min:.1,max:.5,step:.01,value:t,onChange:i})]})]})}}}]);