https://blog.maximeheckel.com/_next/static/chunks/2703.db6765c198f6d79f.js

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

1{if(!F||!N.current.left||!E.current)return!1;let e=(m-n)/(h-n)*E.current.getBoundingClientRect().width;return e>N.current.left.left-16&&e<N.current.left.right+16},[h,n,m,F]),ea=(0,f.useMemo)(()=>{if(!F||!N.current.right||!E.current)return!1;let e=(m-n)/(h-n)*E.current.getBoundingClientRect().width;return e<N.current.right.right+16&&e>N.current.right.left-16},[h,n,m,F]);return(0,i.jsxs)(b,{id:A,"aria-label":C,"aria-valuemin":n,"aria-valuemax":h,"aria-valuenow":m,"aria-disabled":g,"aria-valuetext":"".concat(C,": ").concat(m),ref:E,defaultValue:x,min:n,max:h,step:v,value:m,disabled:g,onValueChange:p,size:V,render:(0,i.jsx)(d.P.div,{onPointerMove:er,onPointerUp:()=>{O.set(1),L.set(1),Y.set(0),q.set(1),I.current=!1},onPointerDown:e=>{B.current=e.clientX,I.current=!0},style:{opacity:g?.4:1,transformOrigin:Q,scaleX:j?O:J,scaleY:j?L:K,x:j?Y:Z}}),children:[(0,i.jsx)(w,{size:V,children:(0,i.jsxs)(y,{children:[(0,i.jsx)(M,{render:(0,i.jsx)(d.P.div,{ref:T,style:{borderRadius:"sm"===V?"8px":"12px",scaleX:j?q:$,width:j?en:et,"--left-offset":0===m?"8px":"auto","--right-offset":0===m?"auto":"8px","--thumb-opacity":eo||ea?0:1,transformOrigin:"left center",minWidth:0===m?"1px":"auto"},children:(0,i.jsx)(r.b,{border:!1,style:{zIndex:"unset !important",backdropFilter:"unset !important"}})})}),(0,i.jsx)(R,{})]})}),ei&&!S?(0,i.jsx)(k,{"aria-hidden":"true",children:Array.from({length:Math.floor((h-n)/v)+1}).map((e,t)=>{let r=n+t*v,a=(r-n)/(h-n)*100;return(0,i.jsx)(o.a,{css:{position:"absolute",left:"calc(".concat(a,"% - 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<n+.3*(h-n)||r>n+.8*(h-n)?0:1}},t)})}):null,(0,i.jsxs)(z,{children:[C?(0,i.jsx)(a.c,{id:"".concat(A,"-label"),as:"label",htmlFor:A,size:"2",weight:"4",variant:"secondary",ref:_,children:C}):null,(0,i.jsx)(a.c,{variant:"primary",size:"2",style:{fontVariantNumeric:"tabular-nums"},weight:"4",ref:G,children:U||m.toFixed(2)})]})]})}},32703:(e,t,n)=>{n.r(t),n.d(t,{DitheredMotionMaskDemo:()=>d});var i=n(67002),r=n(63933),o=n(77809),a=n(67445),s=n(16466),l=n(74795),u=n(1100);let c="#version 300 es\nprecision highp float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uVideo;\nuniform sampler2D uVideoPreviousFrame;\nuniform sampler2D uPreviousFrame;\nuniform vec2 uResolution;\nuniform vec2 uVideoSize;\nuniform float uMotionThreshold;\nuniform float uDecayRate;\nuniform float uPixelSize;\nuniform float split;\n\nconst float bayerMatrix4x4[16] = float[16](\n  0.0 / 16.0, 8.0 / 16.0, 2.0 / 16.0, 10.0 / 16.0,\n  12.0 / 16.0, 4.0 / 16.0, 14.0 / 16.0, 6.0 / 16.0,\n  3.0 / 16.0, 11.0 / 16.0, 1.0 / 16.0, 9.0 / 16.0,\n  15.0 / 16.0, 7.0 / 16.0, 13.0 / 16.0, 5.0 / 16.0\n);\n\nconst float bayerMatrix8x8[64] = float[64](\n  0.0 / 64.0, 48.0 / 64.0, 12.0 / 64.0, 60.0 / 64.0, 3.0 / 64.0, 51.0 / 64.0, 15.0 / 64.0, 63.0 / 64.0,\n  32.0 / 64.0, 16.0 / 64.0, 44.0 / 64.0, 28.0 / 64.0, 35.0 / 64.0, 19.0 / 64.0, 47.0 / 64.0, 31.0 / 64.0,\n  8.0 / 64.0, 56.0 / 64.0, 4.0 / 64.0, 52.0 / 64.0, 11.0 / 64.0, 59.0 / 64.0, 7.0 / 64.0, 55.0 / 64.0,\n  40.0 / 64.0, 24.0 / 64.0, 36.0 / 64.0, 20.0 / 64.0, 43.0 / 64.0, 27.0 / 64.0, 39.0 / 64.0, 23.0 / 64.0,\n  2.0 / 64.0, 50.0 / 64.0, 14.0 / 64.0, 62.0 / 64.0, 1.0 / 64.0, 49.0 / 64.0, 13.0 / 64.0, 61.0 / 64.0,\n  34.0 / 64.0, 18.0 / 64.0, 46.0 / 64.0, 30.0 / 64.0, 33.0 / 64.0, 17.0 / 64.0, 45.0 / 64.0, 29.0 / 64.0,\n  10.0 / 64.0, 58.0 / 64.0, 6.0 / 64.0, 54.0 / 64.0, 9.0 / 64.0, 57.0 / 64.0, 5.0 / 64.0, 53.0 / 64.0,\n  42.0 / 64.0, 26.0 / 64.0, 38.0 / 64.0, 22.0 / 64.0, 41.0 / 64.0, 25.0 / 64.0, 37.0 / 64.0, 21.0 / 64.0\n);\n\nfloat luminance(vec3 color) {\n  return dot(color, vec3(0.299, 0.587, 0.114));\n}\n\nvec2 getCoverVideoUv(vec2 uv) {\n  if (uVideoSize.x <= 0.0 || uVideoSize.y <= 0.0) {\n    return uv;\n  }\n\n  float canvasAspect = uResolution.x / uResolution.y;\n  float videoAspect = uVideoSize.x / uVideoSize.y;\n  vec2 coverUv = uv - 0.5;\n\n  if (canvasAspect > videoAspect) {\n    coverUv.y *= videoAspect / canvasAspect;\n  } else {\n    coverUv.x *= canvasAspect / videoAspect;\n  }\n\n  return coverUv + 0.5;\n}\n\nvec2 getPixelatedUv(vec2 uv) {\n  vec2 normalizedPixelSize = vec2(uPixelSize) / uResolution;\n\n  return normalizedPixelSize * (floor(uv / normalizedPixelSize) + 0.5);\n}\n\nfloat getDitherThreshold(vec2 uv) {\n  ivec2 coord = ivec2(mod(floor((uv * uResolution) / uPixelSize), 4.0));

1\n\n  return bayerMatrix4x4[coord.y * 4 + coord.x];\n}\n\nvoid main() {\n  vec2 videoUv = getCoverVideoUv(vUv);\n  vec3 currentFrame = texture(uVideo, videoUv).rgb;\n  vec3 outputColor = currentFrame;\n  float storedMask = 0.0;\n\n  if (vUv.x > split) {\n    vec2 pixelatedUv = getPixelatedUv(vUv);\n    vec2 pixelatedVideoUv = getCoverVideoUv(pixelatedUv);\n    vec3 pixelatedFrame = texture(uVideo, pixelatedVideoUv).rgb;\n    vec3 previousFrame = texture(uVideoPreviousFrame, pixelatedVideoUv).rgb;\n    float motion = luminance(abs(pixelatedFrame - previousFrame));\n    float rawMask = smoothstep(uMotionThreshold, uMotionThreshold + 0.04, motion);\n    float decayedMask = texture(uPreviousFrame, pixelatedUv).a * uDecayRate;\n    float motionMask = max(rawMask, decayedMask);\n    float activeMask = step(0.1, motionMask);\n\n    float ditheredMask = step(getDitherThreshold(vUv), motionMask) * activeMask;\n\n    storedMask = motionMask;\n    outputColor = mix(\n      vec3(0.1333, 0.5098, 0.9373),\n      vec3(1.0),\n      ditheredMask\n    );\n  }\n\n  fragColor = vec4(outputColor, storedMask);\n}\n",d=()=>{let[e,t]=(0,s.useState)(.5),n=(0,s.useDeferredValue)(e),d=(0,s.useRef)(null),f=(0,a.W)(d),h=(0,s.useId)();return(0,i.jsxs)(r.a,{alignItems:"center",direction:"column",gap:"4",css:{maxWidth:662,width:"100%"},children:[(0,i.jsx)(o.a,{ref:d,css:{width:"100%",aspectRatio:"16 / 10",borderRadius:"var(--border-radius-2)",overflow:"hidden"},children:f?(0,i.jsx)(l.Q,{fragmentShader:c,uniforms:{uDecayRate:.94,uMotionThreshold:.005,uPixelSize:4,uVideo:"https://cdn.maximeheckel.com/videos/footages/clouds.mp4",split:n},aspectRatio:"16 / 10"},c):null}),(0,i.jsx)(r.a,{direction:"column",gap:"4",css:{width:"100%","@md":{width:"50%",minWidth:135}},children:(0,i.jsx)(u.A,{id:"".concat(h,"-split"),label:"Split",min:0,max:1,step:.01,value:e,onChange:t})})]})}}}]);