https://html-in-canvas.vercel.app/_next/static/chunks/0~j_qpww.pqfl.js

1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,7670,e=>{"use strict";function t(){for(var e,t,a=0,r="",n=arguments.length;a<n;a++)(e=arguments[a])&&(t=function e(t){var a,r,n="";if("string"==typeof t||"number"==typeof t)n+=t;else if("object"==typeof t)if(Array.isArray(t)){var l=t.length;for(a=0;a<l;a++)t[a]&&(r=e(t[a]))&&(n&&(n+=" "),n+=r)}else for(r in t)t[r]&&(n&&(n+=" "),n+=r);return n}(e))&&(r&&(r+=" "),r+=t);return r}e.s(["clsx",0,t,"default",0,t])},95057,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0});var r={formatUrl:function(){return o},formatWithValidation:function(){return c},urlObjectKeys:function(){return i}};for(var n in r)Object.defineProperty(a,n,{enumerable:!0,get:r[n]});let l=e.r(90809)._(e.r(98183)),s=/https?|ftp|gopher|file/;function o(e){let{auth:t,hostname:a}=e,r=e.protocol||"",n=e.pathname||"",o=e.hash||"",i=e.query||"",c=!1;t=t?encodeURIComponent(t).replace(/%3A/i,":")+"@":"",e.host?c=t+e.host:a&&(c=t+(~a.indexOf(":")?`[${a}]`:a),e.port&&(c+=":"+e.port)),i&&"object"==typeof i&&(i=String(l.urlQueryToSearchParams(i)));let u=e.search||i&&`?${i}`||"";return r&&!r.endsWith(":")&&(r+=":"),e.slashes||(!r||s.test(r))&&!1!==c?(c="//"+(c||""),n&&"/"!==n[0]&&(n="/"+n)):c||(c=""),o&&"#"!==o[0]&&(o="#"+o),u&&"?"!==u[0]&&(u="?"+u),n=n.replace(/[?#]/g,encodeURIComponent),u=u.replace("#","%23"),`${r}${c}${n}${u}${o}`}let i=["auth","hash","host","hostname","href","path","pathname","port","protocol","query","search","slashes"];function c(e){return o(e)}},18581,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"useMergedRef",{enumerable:!0,get:function(){return n}});let r=e.r(71645);function n(e,t){let a=(0,r.useRef)(null),n=(0,r.useRef)(null);return(0,r.useCallback)(r=>{if(null===r){let e=a.current;e&&(a.current=null,e());let t=n.current;t&&(n.current=null,t())}else e&&(a.current=l(e,r)),t&&(n.current=l(t,r))},[e,t])}function l(e,t){if("function"!=typeof e)return e.current=t,()=>{e.current=null};{let a=e(t);return"function"==typeof a?a:()=>e(null)}}("function"==typeof a.default||"object"==typeof a.default&&null!==a.default)&&void 0===a.default.__esModule&&(Object.defineProperty(a.default,"__esModule",{value:!0}),Object.assign(a.default,a),t.exports=a.default)},73668,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"isLocalURL",{enumerable:!0,get:function(){return l}});let r=e.r(18967),n=e.r(52817);function l(e){if(!(0,r.isAbsoluteUrl)(e))return!0;try{let t=(0,r.getLocationOrigin)(),a=new URL(e,t);return a.origin===t&&(0,n.hasBasePath)(a.pathname)}catch(e){return!1}}},84508,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"errorOnce",{enumerable:!0,get:function(){return r}});let r=e=>{}},22016,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0});var r={default:function(){return v},useLinkStatus:function(){return b}};for(var n in r)Object.defineProperty(a,n,{enumerable:!0,get:r[n]});let l=e.r(90809),s=e.r(43476),o=l._(e.r(71645)),i=e.r(95057),c=e.r(8372),u=e.r(18581),d=e.r(18967),h=e.r(5550);e.r(33525);let f=e.r(88540),m=e.r(91949),p=e.r(73668),g=e.r(9396);function v(t){var a,r;let n,l,v,[b,y]=(0,o.useOptimistic)(m.IDLE_LINK_STATUS),A=(0,o.useRef)(null),{href:H,as:j,children:w,prefetch:M=null,passHref:E,replace:V,shallow:Z,scroll:_,onClick:N,onMouseEnter:P,onTouchStart:k,legacyBehavior:O=!1,onNavigate:C,transitionTypes:R,ref:T,unstable_dynamicOnHover:F,...L}=t;n=w,O&&("string"==typeof n||"number"==typeof n)&&(n=(0,s.jsx)("a",{children:n}));let S=o.default.useContext(c.AppRouterContext),I=!1!==M,B=!1!==M?null===(r=M)||"auto"===r?g.FetchStrategy.PPR:g.FetchStrategy.Full:g.FetchStrategy.PPR,q="string"==typeof(a=j||H)?a:(0,i.formatUrl)(a);if(O){if(n?.$$typeof===Symbol.for("react.lazy"))throw Object.defineProperty(Error("`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>

1` tag."),"__NEXT_ERROR_CODE",{value:"E863",enumerable:!1,configurable:!0});l=o.default.Children.only(n)}let z=O?l&&"object"==typeof l&&l.ref:T,U=o.default.useCallback(e=>(null!==S&&(A.current=(0,m.mountLinkInstance)(e,q,S,B,I,y)),()=>{A.current&&((0,m.unmountLinkForCurrentNavigation)(A.current),A.current=null),(0,m.unmountPrefetchableInstance)(e)}),[I,q,S,B,y]),$={ref:(0,u.useMergedRef)(U,z),onClick(t){O||"function"!=typeof N||N(t),O&&l.props&&"function"==typeof l.props.onClick&&l.props.onClick(t),!S||t.defaultPrevented||function(t,a,r,n,l,s,i){if("u">typeof window){let c,{nodeName:u}=t.currentTarget;if("A"===u.toUpperCase()&&((c=t.currentTarget.getAttribute("target"))&&"_self"!==c||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||t.nativeEvent&&2===t.nativeEvent.which)||t.currentTarget.hasAttribute("download"))return;if(!(0,p.isLocalURL)(a)){n&&(t.preventDefault(),location.replace(a));return}if(t.preventDefault(),s){let e=!1;if(s({preventDefault:()=>{e=!0}}),e)return}let{dispatchNavigateAction:d}=e.r(99781);o.default.startTransition(()=>{d(a,n?"replace":"push",!1===l?f.ScrollBehavior.NoScroll:f.ScrollBehavior.Default,r.current,i)})}}(t,q,A,V,_,C,R)},onMouseEnter(e){O||"function"!=typeof P||P(e),O&&l.props&&"function"==typeof l.props.onMouseEnter&&l.props.onMouseEnter(e),S&&I&&(0,m.onNavigationIntent)(e.currentTarget,!0===F)},onTouchStart:function(e){O||"function"!=typeof k||k(e),O&&l.props&&"function"==typeof l.props.onTouchStart&&l.props.onTouchStart(e),S&&I&&(0,m.onNavigationIntent)(e.currentTarget,!0===F)}};return(0,d.isAbsoluteUrl)(q)?$.href=q:O&&!E&&("a"!==l.type||"href"in l.props)||($.href=(0,h.addBasePath)(q)),v=O?o.default.cloneElement(l,$):(0,s.jsx)("a",{...L,...$,children:n}),(0,s.jsx)(x.Provider,{value:b,children:v})}e.r(84508);let x=(0,o.createContext)(m.IDLE_LINK_STATUS),b=()=>(0,o.useContext)(x);("function"==typeof a.default||"object"==typeof a.default&&null!==a.default)&&void 0===a.default.__esModule&&(Object.defineProperty(a.default,"__esModule",{value:!0}),Object.assign(a.default,a),t.exports=a.default)},20770,69464,e=>{"use strict";var t=e.i(43476),a=e.i(71645);let r=(0,a.createContext)({color:"currentColor",size:"1em",weight:"regular",mirrored:!1}),n=a.forwardRef((e,t)=>{let{alt:n,color:l,size:s,weight:o,mirrored:i,children:c,weights:u,...d}=e,{color:h="currentColor",size:f,weight:m="regular",mirrored:p=!1,...g}=a.useContext(r);return a.createElement("svg",{ref:t,xmlns:"http://www.w3.org/2000/svg",width:null!=s?s:f,height:null!=s?s:f,fill:null!=l?l:h,viewBox:"0 0 256 256",transform:i||p?"scale(-1, 1)":void 0,...g,...d},!!n&&a.createElement("title",null,n),c,u.get(null!=o?o:m))});n.displayName="IconBase",e.s(["default",0,n],69464);let l=new Map([["bold",a.createElement(a.Fragment,null,a.createElement("path",{d:"M228,128a12,12,0,0,1-12,12H69l51.52,51.51a12,12,0,0,1-17,17l-72-72a12,12,0,0,1,0-17l72-72a12,12,0,0,1,17,17L69,116H216A12,12,0,0,1,228,128Z"}))],["duotone",a.createElement(a.Fragment,null,a.createElement("path",{d:"M112,56V200L40,128Z",opacity:"0.2"}),a.createElement("path",{d:"M216,120H120V56a8,8,0,0,0-13.66-5.66l-72,72a8,8,0,0,0,0,11.32l72,72A8,8,0,0,0,120,200V136h96a8,8,0,0,0,0-16ZM104,180.69,51.31,128,104,75.31Z"}))],["fill",a.createElement(a.Fragment,null,a.createElement("path",{d:"M224,128a8,8,0,0,1-8,8H120v64a8,8,0,0,1-13.66,5.66l-72-72a8,8,0,0,1,0-11.32l72-72A8,8,0,0,1,120,56v64h96A8,8,0,0,1,224,128Z"}))],["light",a.createElement(a.Fragment,null,a.createElement("path",{d:"M222,128a6,6,0,0,1-6,6H54.49l61.75,61.76a6,6,0,1,1-8.48,8.48l-72-72a6,6,0,0,1,0-8.48l72-72a6,6,0,0,1,8.48,8.48L54.49,122H216A6,6,0,0,1,222,128Z"}))],["regular",a.createElement(a.Fragment,null,a.createElement("path",{d:"M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"}))],["thin",a.createElement(a.Fragment,null,a.createElement("path",{d:"M220,128a4,4,0,0,1-4,4H49.66l65.17,65.17a4,4,0,0,1-5.66,5.66l-72-72a4,4,0,0,1,0-5.66l72-72a4,4,0,0,1,5.66,5.66L49.66,124H216A4,4,0,0,1,220,128Z"}))]]),s=a.forwardRef((e,t)=>a.createElement(n,{ref:t,...e,weights:l}));s.displayName="ArrowLeftIcon";var o=e.i(22016),i=e.i(18566);let c=({className:e})=>(0,t.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 29 19",fill:"

1currentColor",className:e,children:[(0,t.jsx)("path",{d:"M26.98 17.513q-1.09.902-2.818.902-1.73 0-2.856-.902-1.128-.9-1.128-2.668 0-1.729 1.128-2.63 1.127-.902 2.856-.902t2.818.901q1.128.903 1.128 2.631 0 1.73-1.128 2.668"}),(0,t.jsx)("path",{d:"M20.18 0q.865 0 .865.714v.15q0 .527-1.09 1.466-1.089.94-1.428 1.766L13.68 17.062q-.338.977-1.315.977H9.057q-.864 0-1.353-.977L1.992 4.096q-.3-.676-1.165-1.653Q0 1.428 0 .864v-.15Q0 0 .864 0h8.644q.827 0 .827.752v.15q0 .375-.338.902a4 4 0 0 0-.489.902q-.113.413.188 1.503l3.232 8.493L15.67 5.15q.414-1.58.113-2.18a3.6 3.6 0 0 0-.902-1.165q-.564-.564-.564-.902v-.15q0-.752.865-.752z"})]});e.s(["Footer",0,()=>{let e=(0,i.usePathname)();return(0,t.jsxs)("footer",{className:"absolute inset-x-4 bottom-4 z-10 flex items-center justify-between",children:["/"!==e?(0,t.jsx)(o.default,{href:"/","aria-label":"Go back",className:"text-background/50 hover:text-background",children:(0,t.jsx)(s,{weight:"bold",className:"size-6"})}):(0,t.jsx)("span",{}),(0,t.jsx)(o.default,{href:"https://www.vittoretrivi.dev",target:"_blank",className:"text-background/50 hover:text-background",children:(0,t.jsx)(c,{className:"text-background/50 h-5"})})]})}],20770)},49786,5687,e=>{"use strict";var t=e.i(43476),a=e.i(71645);let r=a.forwardRef((e,t)=>{let{alt:r,color:n="currentColor",size:l="1em",weight:s="regular",mirrored:o=!1,children:i,weights:c,...u}=e;return a.createElement("svg",{ref:t,xmlns:"http://www.w3.org/2000/svg",width:l,height:l,fill:n,viewBox:"0 0 256 256",transform:o?"scale(-1, 1)":void 0,...u},!!r&&a.createElement("title",null,r),i,c.get(s))});r.displayName="SSRBase";let n=new Map([["bold",a.createElement(a.Fragment,null,a.createElement("path",{d:"M232,44H160a43.86,43.86,0,0,0-32,13.85A43.86,43.86,0,0,0,96,44H24A12,12,0,0,0,12,56V200a12,12,0,0,0,12,12H96a20,20,0,0,1,20,20,12,12,0,0,0,24,0,20,20,0,0,1,20-20h72a12,12,0,0,0,12-12V56A12,12,0,0,0,232,44ZM96,188H36V68H96a20,20,0,0,1,20,20V192.81A43.79,43.79,0,0,0,96,188Zm124,0H160a43.71,43.71,0,0,0-20,4.83V88a20,20,0,0,1,20-20h60Z"}))],["duotone",a.createElement(a.Fragment,null,a.createElement("path",{d:"M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z",opacity:"0.2"}),a.createElement("path",{d:"M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"}))],["fill",a.createElement(a.Fragment,null,a.createElement("path",{d:"M240,56V200a8,8,0,0,1-8,8H160a24,24,0,0,0-24,23.94,7.9,7.9,0,0,1-5.12,7.55A8,8,0,0,1,120,232a24,24,0,0,0-24-24H24a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H88a32,32,0,0,1,32,32v87.73a8.17,8.17,0,0,0,7.47,8.25,8,8,0,0,0,8.53-8V80a32,32,0,0,1,32-32h64A8,8,0,0,1,240,56Z"}))],["light",a.createElement(a.Fragment,null,a.createElement("path",{d:"M232,50H160a38,38,0,0,0-32,17.55A38,38,0,0,0,96,50H24a6,6,0,0,0-6,6V200a6,6,0,0,0,6,6H96a26,26,0,0,1,26,26,6,6,0,0,0,12,0,26,26,0,0,1,26-26h72a6,6,0,0,0,6-6V56A6,6,0,0,0,232,50ZM96,194H30V62H96a26,26,0,0,1,26,26V204.31A37.86,37.86,0,0,0,96,194Zm130,0H160a37.87,37.87,0,0,0-26,10.32V88a26,26,0,0,1,26-26h66Z"}))],["regular",a.createElement(a.Fragment,null,a.createElement("path",{d:"M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"}))],["thin",a.createElement(a.Fragment,null,a.createElement("path",{d:"M232,52H160a36,36,0,0,0-32,19.54A36,36,0,0,0,96,52H24a4,4,0,0,0-4,4V200a4,4,0,0,0,4,4H96a28,28,0,0,1,28,28,4,4,0,0,0,8,0,28,28,0,0,1,28-28h72a4,4,0,0,0,4-4V56A4,4,0,0,0,232,52ZM96,196H28V60H96a28,28,0,0,1,28,28V209.4A35.93,35.93,0,0,0,96,196Zm132,0H160a35.94,35.94,0,0,0-28,13.41V88a28,28,0,0,1,28-28h68Z"}))]]),l=a.forwardRef((e,t)=>a.createElement(r,{ref:t,...e,weights:n}));l.displayName="BookOpenIcon";let s=new Map([["bold",a.createElement(a.Fragment,null,a.createElement("path",{d:"M212.62,75.17A63.7,63.7,0,0,0,206.39,26,12,12,0,0,0,196,20a63.71,63.71,0,0,0-50,24H126A63.71,63.71,0,0,0,76,20a12,12,0,0,0-10.39,6,63.7,63.7,0,0,0-6.23,49.17A61.5,61.5,0,0,0,52,104v8a60.1,60.1,0,0,0,45.76,58.28A43.66,43.66,0,0,0,92,192v4H76a20,20,0,0,1-20-20,44.05,44.05,0,0,0-44-44,12,12,0,0,0,0,24,20,20,0,0,1,20,20,44.05,44.05,0,0,0,44,44H92v12a12,12,0,0,0,24,0V192a20,20,0,0,1,40,0v40a12,12,0,0,0,24,0V192a43.66,43.66,0,0,0-5.76-21.72A60.1,60.1,0,0,0,220,112v-8A61.5,61.5,0,0,0,212.62,75.17ZM196,112a36,36,0,0,1-36,36H112a36,36,0,0,1-36-36v-8a37.87,37.87,0,0,1,6.13-2

10.12,11.65,11.65,0,0,0,1.58-11.49,39.9,39.9,0,0,1-.4-27.72,39.87,39.87,0,0,1,26.41,17.8A12,12,0,0,0,119.82,68h32.35a12,12,0,0,0,10.11-5.53,39.84,39.84,0,0,1,26.41-17.8,39.9,39.9,0,0,1-.4,27.72,12,12,0,0,0,1.61,11.53A37.85,37.85,0,0,1,196,104Z"}))],["duotone",a.createElement(a.Fragment,null,a.createElement("path",{d:"M208,104v8a48,48,0,0,1-48,48H136a32,32,0,0,1,32,32v40H104V192a32,32,0,0,1,32-32H112a48,48,0,0,1-48-48v-8a49.28,49.28,0,0,1,8.51-27.3A51.92,51.92,0,0,1,76,32a52,52,0,0,1,43.83,24h32.34A52,52,0,0,1,196,32a51.92,51.92,0,0,1,3.49,44.7A49.28,49.28,0,0,1,208,104Z",opacity:"0.2"}),a.createElement("path",{d:"M208.3,75.68A59.74,59.74,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58,58,0,0,0,208.3,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.76,41.76,0,0,1,200,104Z"}))],["fill",a.createElement(a.Fragment,null,a.createElement("path",{d:"M216,104v8a56.06,56.06,0,0,1-48.44,55.47A39.8,39.8,0,0,1,176,192v40a8,8,0,0,1-8,8H104a8,8,0,0,1-8-8V216H72a40,40,0,0,1-40-40A24,24,0,0,0,8,152a8,8,0,0,1,0-16,40,40,0,0,1,40,40,24,24,0,0,0,24,24H96v-8a39.8,39.8,0,0,1,8.44-24.53A56.06,56.06,0,0,1,56,

1112v-8a58.14,58.14,0,0,1,7.69-28.32A59.78,59.78,0,0,1,69.07,28,8,8,0,0,1,76,24a59.75,59.75,0,0,1,48,24h24a59.75,59.75,0,0,1,48-24,8,8,0,0,1,6.93,4,59.74,59.74,0,0,1,5.37,47.68A58,58,0,0,1,216,104Z"}))],["light",a.createElement(a.Fragment,null,a.createElement("path",{d:"M206.13,75.92A57.79,57.79,0,0,0,201.2,29a6,6,0,0,0-5.2-3,57.77,57.77,0,0,0-47,24H123A57.77,57.77,0,0,0,76,26a6,6,0,0,0-5.2,3,57.79,57.79,0,0,0-4.93,46.92A55.88,55.88,0,0,0,58,104v8a54.06,54.06,0,0,0,50.45,53.87A37.85,37.85,0,0,0,98,192v10H72a26,26,0,0,1-26-26A38,38,0,0,0,8,138a6,6,0,0,0,0,12,26,26,0,0,1,26,26,38,38,0,0,0,38,38H98v18a6,6,0,0,0,12,0V192a26,26,0,0,1,52,0v40a6,6,0,0,0,12,0V192a37.85,37.85,0,0,0-10.45-26.13A54.06,54.06,0,0,0,214,112v-8A55.88,55.88,0,0,0,206.13,75.92ZM202,112a42,42,0,0,1-42,42H112a42,42,0,0,1-42-42v-8a43.86,43.86,0,0,1,7.3-23.69,6,6,0,0,0,.81-5.76,45.85,45.85,0,0,1,1.43-36.42,45.85,45.85,0,0,1,35.23,21.1A6,6,0,0,0,119.83,62h32.34a6,6,0,0,0,5.06-2.76,45.83,45.83,0,0,1,35.23-21.11,45.85,45.85,0,0,1,1.43,36.42,6,6,0,0,0,.79,5.74A43.78,43.78,0,0,1,202,104Z"}))],["regular",a.createElement(a.Fragment,null,a.createElement("path",{d:"M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"}))],["thin",a.createElement(a.Fragment,null,a.createElement("path",{d:"M203.94,76.16A55.73,55.73,0,0,0,199.46,30,4,4,0,0,0,196,28a55.78,55.78,0,0,0-46,24H122A55.78,55.78,0,0,0,76,28a4,4,0,0,0-3.46,2,55.73,55.73,0,0,0-4.48,46.16A53.78,53.78,0,0,0,60,104v8a52.06,52.06,0,0,0,52,52h1.41A36,36,0,0,0,100,192v12H72a28,28,0,0,1-28-28A36,36,0,0,0,8,140a4,4,0,0,0,0,8,28,28,0,0,1,28,28,36,36,0,0,0,36,36h28v20a4,4,0,0,0,8,0V192a28,28,0,0,1,56,0v40a4,4,0,0,0,8,0V192a36,36,0,0,0-13.41-28H160a52.06,52.06,0,0,0,52-52v-8A53.78,53.78,0,0,0,203.94,76.16ZM204,112a44.05,44.05,0,0,1-44,44H112a44.05,44.05,0,0,1-44-44v-8a45.76,45.76,0,0,1,7.71-24.89,4,4,0,0,0,.53-3.84,47.82,47.82,0,0,1,2.1-39.21,47.8,47.8,0,0,1,38.12,22.1A4,4,0,0,0,119.83,60h32.34a4,4,0,0,0,3.37-1.84,47.8,47.8,0,0,1,38.12-22.1,47.82,47.82,0,0,1,2.1,39.21,4,4,0,0,0,.53,3.83A45.85,45.85,0,0,1,204,104Z"}))]]),o=a.forwardRef((e,t)=>a.createElement(r,{ref:t,...e,weights:s}));o.displayName="GithubLogoIcon";let i=new Map([["bold",a.createElement(a.Fragment,null,a.createElement("path",{d:"M200,36H56A20,20,0,0,0,36,56V200a20,20,0,0,0,20,20H200a20,20,0,0,0,20-20V56A20,20,0,0,0,200,36Zm-4,80H140V60h56ZM116,60v56H60V60ZM60,140h56v56H60Zm80,56V140h56v56Z"}))],["duotone",a.createElement(a.Fragment,null,a.createElement("path",{d:"M208,56V200a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H200A8,8,0,0,1,208,56Z",opacity:"0.2"}),a.createElement("path",{d:"M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,80H136V56h64ZM120,56v64H56V56ZM56,136h64v64H56Zm144,64H136V136h64v64Z"}))],["fill",a.createElement(a.Fragment,null,a.createElement("path",{d:"M216,56v60a4,4,0,0,1-4,4H136V44a4,4,0,0,1,4-4h60A16,16,0,0,1,216,56ZM116,40H56A16,16,0,0,0,40,56v60a4,4,0,0,0,4,4h76V44A4,4,0,0,0,116,40Zm96,96H136v76a4,4,0,0,0,4,4h60a16,16,0,0,0,16-16V140A4,4,0,0,0,212,136ZM40,140v60a16,16,0,0,0,16,16h60a4,4,0,0,0,4-4V136H44A4,4,0,0,0,40,140Z"}))],["light",a.createElement(a.Fragment,null,a.createElement("path",{d:"M200,42H56A14,14,0,0,0,42,56V200a14,14,0,0,0,14,14H200a14,14,0,0,0,14-14V56A14,14,0,0,0,200,42Zm2,14v66H134V54h66A2,2,0,0,1,202,56ZM56,54h66v68H54V56A2,2,0,0,1,56,54ZM54,200V134h68v68H56A2,2,0,0,1,54,200Zm146,2H134V134h68v66A2,2,0,0,1,200,202Z"}))],["regular",a.createElement(a.Fragment,null,a.createElement("path",{d:"M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,80H136V56h64ZM120,56v64H56V56ZM56,136h64v64H56Zm144,64H136V136h64v64Z"}))],["thin",a.createElement(a.Fragment,null,a.createElement("path",{d:"M200,44H56A12,12,0,0,0,44,56V200a12,12,0,0,0,12,12H200a12,12,0,0,0,12-12V56A12,12,0,0,0,200,44Zm4,12v68H132V52h68A4,4,0,0,1,204,56ZM56,52h68v72H52V56A4,4,0,0,1,56,52ZM52,200V132h72v72H56A4,4,0,0,1,52,200Zm148,4H132V132h72v68A4,4,0,0,1,200,204Z"}))]]),c=a.forwardRef((e,t)=>

1a.createElement(r,{ref:t,...e,weights:i}));c.displayName="GridFourIcon";var u=e.i(22016);let d=[{href:"https://tympanus.net/codrops/2026/05/13/exploring-the-html-in-canvas-proposal",label:"Tutorial",Icon:l},{href:"https://github.com/motiontx/html-in-canvas",label:"GitHub",Icon:o},{href:"https://tympanus.net/codrops/hub",label:"All demos",Icon:c}];e.s(["Header",0,()=>(0,t.jsxs)("header",{className:"sticky top-0 z-50 flex items-center justify-between p-4",children:[(0,t.jsx)(u.default,{href:"/",className:"text-background text-md font-semibold tracking-tight whitespace-nowrap",children:"HTML-in-Canvas Experiments"}),(0,t.jsx)("nav",{"aria-label":"Primary",className:"flex items-center gap-4 text-sm",children:d.map(({href:e,label:a,Icon:r})=>(0,t.jsxs)(u.default,{href:e,target:"_blank",rel:"noopener noreferrer","aria-label":a,title:a,className:"text-background/70 hover:text-background transition-colors flex items-center gap-2",children:[(0,t.jsx)(r,{className:"size-4","aria-hidden":!0}),(0,t.jsx)("span",{className:"hidden sm:inline",children:a})]},e))})]})],49786);var h=e.i(7670);e.s(["GridBackground",0,({className:e})=>(0,t.jsx)("div",{className:(0,h.default)("pointer-events-none fixed inset-0",e),children:(0,t.jsx)("div",{className:(0,h.default)("absolute inset-0 overflow-hidden opacity-50","after:absolute after:-inset-47 after:-top-0.5 after:left-0 after:bg-[url(/grid.svg)] after:bg-center after:opacity-40","after:mask-[radial-gradient(circle_at_calc(50%-94px)_calc(50%-93px),#fff_40%,transparent_75%)]")})})],5687)},67585,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"BailoutToCSR",{enumerable:!0,get:function(){return n}});let r=e.r(32061);function n({reason:e,children:t}){if("u"<typeof window)throw Object.defineProperty(new r.BailoutToCSRError(e),"__NEXT_ERROR_CODE",{value:"E394",enumerable:!1,configurable:!0});return t}},9885,(e,t,a)=>{"use strict";function r(e){return e.split("/").map(e=>encodeURIComponent(e)).join("/")}Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"encodeURIPath",{enumerable:!0,get:function(){return r}})},52157,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"PreloadChunks",{enumerable:!0,get:function(){return i}});let r=e.r(43476),n=e.r(74080),l=e.r(63599),s=e.r(9885),o=e.r(43369);function i({moduleIds:e}){if("u">typeof window)return null;let t=l.workAsyncStorage.getStore();if(void 0===t)return null;let a=[];if(t.reactLoadableManifest&&e){let r=t.reactLoadableManifest;for(let t of e){if(!r[t])continue;let e=r[t].files;a.push(...e)}}if(0===a.length)return null;let c=(0,o.getAssetTokenQuery)();return(0,r.jsx)(r.Fragment,{children:a.map(e=>{let a=`${t.assetPrefix}/_next/${(0,s.encodeURIPath)(e)}${c}`;return e.endsWith(".css")?(0,r.jsx)("link",{precedence:"dynamic",href:a,rel:"stylesheet",as:"style",nonce:t.nonce},e):((0,n.preload)(a,{as:"script",fetchPriority:"low",nonce:t.nonce}),null)})})}},69093,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"default",{enumerable:!0,get:function(){return c}});let r=e.r(43476),n=e.r(71645),l=e.r(67585),s=e.r(52157);function o(e){return{default:e&&"default"in e?e.default:e}}let i={loader:()=>Promise.resolve(o(()=>null)),loading:null,ssr:!0},c=function(e){let t={...i,...e},a=(0,n.lazy)(()=>t.loader().then(o)),c=t.loading;function u(e){let o=c?(0,r.jsx)(c,{isLoading:!0,pastDelay:!0,error:null}):null,i=!t.ssr||!!t.loading,u=i?n.Suspense:n.Fragment,d=t.ssr?(0,r.jsxs)(r.Fragment,{children:["u"<typeof window?(0,r.jsx)(s.PreloadChunks,{moduleIds:t.modules}):null,(0,r.jsx)(a,{...e})]}):(0,r.jsx)(l.BailoutToCSR,{reason:"next/dynamic",children:(0,r.jsx)(a,{...e})});return(0,r.jsx)(u,{...i?{fallback:o}:{},children:d})}return u.displayName="LoadableComponent",u}},70703,(e,t,a)=>{"use strict";Object.defineProperty(a,"__esModule",{value:!0}),Object.defineProperty(a,"default",{enumerable:!0,get:function(){return n}});let r=e.r(55682)._(e.r(69093));function n(e,t){let a={};"function"==typeof e&&(a.loader=e);let n={...a,...t};return(0,r.default)({...n,modules:n.loadableGenerated?.modules})}("function"==typeof a.default||"object"==typeof a.default&&null!==a.default)&&void 0===a.default.__esModule&&(Object.defineProperty(a.default,"__esMo

1dule",{value:!0}),Object.assign(a.default,a),t.exports=a.default)},59677,e=>{"use strict";var t=e.i(43476),a=e.i(70703),r=e.i(71645),n=e.i(20770),l=e.i(49786),s=e.i(5687),o=e.i(22016);let i=({children:e,page:a})=>(0,t.jsxs)("div",{className:"relative flex h-full w-full items-center justify-center bg-blue-100 p-24 selection:bg-blue-950 selection:text-blue-100",children:[(0,t.jsx)("div",{className:"absolute inset-0 flex w-full max-w-xl flex-col items-center justify-center text-blue-950",children:e}),(0,t.jsxs)("div",{className:"absolute right-0 bottom-8 left-0 text-center font-serif text-sm text-blue-950/60",children:[a," / ",2]})]}),c=()=>(0,t.jsx)(i,{page:1,children:(0,t.jsxs)("div",{className:"flex flex-col items-center gap-8 text-center font-serif",children:[(0,t.jsx)("div",{className:"text-xs tracking-[0.45em] text-blue-950/75 uppercase",children:"A Study In"}),(0,t.jsxs)("h1",{className:"text-5xl leading-tight font-semibold tracking-tight",children:["HTML",(0,t.jsx)("span",{className:"mx-3 font-light text-blue-950/75 italic",children:"in"}),"Canvas"]}),(0,t.jsx)("div",{className:"h-px w-24 bg-blue-950/50"}),(0,t.jsx)(o.default,{className:"text-base text-blue-950/75 lowercase italic",href:"https://github.com/WICG/html-in-canvas",target:"_blank",children:"https://github.com/WICG/html-in-canvas"}),(0,t.jsx)("p",{className:"text-xs tracking-[0.45em] text-blue-950/75 uppercase",children:"By Vitto"}),(0,t.jsx)("div",{className:"pointer-events-none absolute inset-2 border-2 border-blue-950"}),(0,t.jsx)("div",{className:"pointer-events-none absolute inset-4 border-2 border-blue-950/50"})]})}),u=()=>(0,t.jsx)(i,{page:2,children:(0,t.jsxs)("div",{className:"flex flex-col items-center gap-8 text-center font-serif",children:[(0,t.jsx)("div",{className:"text-xs tracking-[0.45em] text-blue-950/75 uppercase",children:"The Crazy Ones"}),(0,t.jsx)("div",{className:"h-px w-16 bg-blue-950/50"}),(0,t.jsxs)("div",{className:"flex max-w-md flex-col gap-2 text-base leading-relaxed text-blue-950/90 italic",children:[(0,t.jsx)("p",{children:"Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius."}),(0,t.jsx)("p",{className:"font-bold",children:"Because the people who are crazy enough to think they can change the world, are the ones who do."})]}),(0,t.jsx)("div",{className:"h-px w-16 bg-blue-950/50"}),(0,t.jsxs)("div",{className:"text-xs tracking-[0.45em] text-blue-950/75 uppercase",children:["Apple, ",(0,t.jsx)("span",{children:"1997"})]})]})});var d=e.i(7670);let h=({id:e,children:a,active:n=!0})=>{let l=(0,r.useRef)(null),s=(0,r.useRef)(null);return(0,r.useEffect)(()=>{let e=l.current,t=s.current;if(!e||!t)return;let a=e.getContext("2d");if(!a)return;e.onpaint=()=>{a.reset(),a.drawElementImage(t,0,0)};let r=()=>{let t=Math.max(1,e.clientWidth),a=Math.max(1,e.clientHeight);e.width!==t&&(e.width=t),e.height!==a&&(e.height=a),e.requestPaint()},n=new ResizeObserver(r);return n.observe(e),r(),()=>{n.disconnect(),e.onpaint=null}},[]),(0,t.jsx)("canvas",{ref:l,id:e,layoutsubtree:"true",suppressHydrationWarning:!0,className:(0,d.default)("absolute inset-0 h-full w-full",n?"":"pointer-events-none"),children:(0,t.jsx)("div",{ref:s,className:"h-full w-full",children:a})})},f=(0,a.default)(()=>e.A(73819).then(e=>e.Curl),{loadableGenerated:{modules:[92414]},ssr:!1});e.s(["default",0,()=>{let[e,a]=(0,r.useState)(!1);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Header,{}),(0,t.jsx)(s.GridBackground,{className:"bg-codrops"}),(0,t.jsx)("main",{className:"absolute inset-0 flex flex-col items-center justify-center px-4 py-16",children:(0,t.jsxs)("div",{className:"relative aspect-[1/1.6] w-full max-w-lg border border-blue-950/50 shadow-2xl",children:[(0,t.jsx)(h,{id:"back",active:e,children:(0,t.jsx)(u,{})}),(0,t.jsx)(h,{id:"front",active:!e,children:(0,t.jsx)(c,{})}),(0,t.jsx)(f,{showingBack:e,onToggle:()=>a(e=>!e)})]})}),(0,t.jsx)(n.Footer,{})]})}],59677)},73819,e=>{e.v(t=>Promise.all(["static/chunks/149dvyj7t4.yw.js","static/chunks/0g9wclz8l~ch8.js"].map(t=>e.l(t))).then(()=>t(92414)))}]);