https://roonaworks.com/assets/Marche-BwqDsFqt.js

1import{r as b,j as r}from"./motion-DGRgQXlV.js";import{t as D,ae as q,af as H,ag as O,am as L}from"./index-Ctk6rm_c.js";import"./react-UaWSC_qi.js";const w=120,V="/personnage/marche/",W=3,G=[.12,-.16,.1];function X(m){const p=new Set,g=[],h=s=>{p.has(s)||(p.add(s),g.push(s))};h(0),h(m-1);let d=m-1;for(;d>1;){for(let s=0;s<m;s+=d)h(Math.min(m-1,Math.round(s+d/2)));d=Math.ceil(d/2)}for(let s=0;s<m;s++)h(s);return g}const J=()=>{const m=b.useRef(null),p=b.useRef(null),g=b.useRef(null),h=D("signature")||"Bye-bye busywork.",d=q(p),s=H();b.useEffect(()=>{const u=m.current,i=p.current,a=g.current;if(!u||!i||!a)return;const x=a.getContext("2d");if(!x)return;const y=O();let k=0,j=!0,M=!1,R=!1;const n={p:0,vx:0,sk:0,lum:0,mr:0,dessinee:-1},f=new Array(w).fill(null),N=()=>{const t=i.getBoundingClientRect(),e=Math.min(1.5,window.devicePixelRatio||1);a.width=Math.max(2,Math.round(t.width*e)),a.height=Math.max(2,Math.round(t.height*e)),a.style.width=Math.round(t.width)+"px",a.style.height=Math.round(t.height)+"px",n.dessinee=-1};N();const E=new ResizeObserver(()=>{N()});E.observe(i);const P=t=>{const e=f[t];if(!e||!e.naturalWidth)return;const l=Math.max(a.width/e.naturalWidth,a.height/e.naturalHeight),c=e.naturalWidth*l,o=e.naturalHeight*l;x.clearRect(0,0,a.width,a.height),x.drawImage(e,(a.width-c)/2,(a.height-o)/2,c,o),n.dessinee=t},z=t=>{for(let e=0;e<w;e++){if(f[t+e])return t+e;if(f[t-e])return t-e}return-1},A=()=>{if(R)return;R=!0;const t=y?[0]:X(w);let e=0;const l=()=>{for(;e<6&&t.length;){const c=t.shift();e++;const o=new Image;o.decoding="async",o.src=V+String(c+1).padStart(3,"0")+".webp";const v=()=>{f[c]=o,e--,l()};o.decode().then(v).catch(()=>{o.onload=v,o.onerror=()=>{e--,l()}})}};l()},I=()=>{const t=u.getBoundingClientRect(),e=window.innerHeight||1;return Math.min(1,Math.max(0,-t.top/Math.max(1,t.height-e)))},B=()=>{if(!j||(k=requestAnimationFrame(B),!M))return;n.p+=(I()-n.p)*.3;{const o=u.getBoundingClientRect(),v=window.innerHeight||1,S=Math.min(Math.max(0,-o.top),Math.max(0,o.height-v));i.style.transform="translate3d(0,"+S.toFixed(1)+"px,0)"}const t=y?0:Math.round(n.p*(w-1)),e=z(t);e>=0&&e!==n.dessinee&&P(e);const l=y?0:s();n.vx+=(Math.max(-90,Math.min(90,-l*.04))-n.vx)*.1,n.sk+=(Math.max(-14,Math.min(14,l*.01))-n.sk)*.1,n.lum+=(Math.min(1,Math.abs(l)/1400)-n.lum)*.08;const c=d();n.mr+=((c.force>0?280:0)-n.mr)*.14,i.style.setProperty("--p",n.p.toFixed(4)),i.style.setProperty("--vx",n.vx.toFixed(2)+"px"),i.style.setProperty("--sk",n.sk.toFixed(2)+"deg"),i.style.setProperty("--lum",n.lum.toFixed(3)),i.style.setProperty("--mx",(c.x<-1e3?-9999:c.x).toFixed(1)+"px"),i.style.setProperty("--my",(c.y<-1e3?-9999:c.y).toFixed(1)+"px"),i.style.setProperty("--mr",n.mr.toFixed(1)+"px")},C=new IntersectionObserver(t=>{M=t[0].isIntersecting,M&&A()},{rootMargin:"1000px 0px"});return C.observe(u),k=requestAnimationFrame(B),()=>{j=!1,C.disconnect(),E.disconnect(),cancelAnimationFrame(k)}},[d,s]);const F=u=>Array.from({length:W},(i,a)=>r.jsx("div",{className:"ma-rangee"+(a===1?" ma-milieu":""),style:{"--k":G[a]},children:r.jsx("div",{className:"ma-file",children:[0,1,2].map(x=>r.jsxs("span",{className:"ma-mot font-display"+(u?" ma-plein":" ma-contour"),children:[h,"  ",h,"  "]},x))})},a));return r.jsxs("div",{ref:m,"aria-hidden":"true",className:"ma-piste",children:[r.jsx("style",{children:T}),r.jsxs("div",{ref:p,className:"ma-scene",children:[r.jsx("img",{className:"ma-poster",src:"/personnage/traversee-poster.webp",alt:"",decoding:"async"}),r.jsx("canvas",{ref:g,className:"ma-toile"}),r.jsx("div",{className:"ma-couche",children:F(!1)}),r.jsx("div",{className:"ma-couche ma-couche-pleine",children:F(!0)}),r.jsx("i",{className:"ma-bords"}),r.jsx("i",{className:"ma-grain"}),r.jsx("i",{className:"ma-bas"})]})]})},T=`
2/* La piste : ce que le visiteur défile. La scène reste plein écran pendant ce temps. */
3.ma-piste { position: relative; width: 100%; height: 260vh; height: 260svh; background: #07050B }
4.ma-scene {
5  --p: 0; --vx: 0px; --sk: 0deg; --lum: 0; --mx: -9999px; --my: -9999px; --mr: 0px;
6  position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
7  background: #000; will-change: transform;
8}
9.ma-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0 }
10.ma-toile { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block }
11.ma-couche {
12  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: .04em;
13  font-size: clamp(3.2rem, 11.5vw, 10rem);
14}
15.ma-couche-pleine {
16  -webkit-mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
17  mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
18}
19/* Chaque rangée glisse avec l avancement, dans son sens, et penche avec la vitesse. */
20.ma-rangee {
21  transform: translateX(calc(var(--vx) + (var(--p) - .5) * var(--k) * 100vw)) skewX(var(--sk));
22  transform-origin: center; will-change: transform;
23}
24.ma-file { display: flex; width: max-content; margin-left: -33.3333%; justify-content: center }
25.ma-mot { white-space: nowrap; font-weight: 800; line-height: .98; letter-spacing: -.045em }
26.ma-contour { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255, calc(.34 + .5 * var(--lum))) }
27.ma-milieu .ma-contour { color: #fff; -webkit-text-stroke: 0 }
28.ma-plein { color: transparent; background: linear-gradient(100deg, #A34EF3, #C06BFF 50%, #8E7BFF); -webkit-background-clip: text; background-clip: text }
29.ma-milieu .ma-plein { background: linear-gradient(100deg, #C06BFF, #E9D5FF); -webkit-background-clip: text; background-clip: text }
30.ma-bords { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, #000, transparent 8%, transparent 92%, #000) }
31.ma-grain {
32  position: absolute; inset: -60px; z-index: 4; pointer-events: none;
33  background-image: ${L}; opacity: .16; mix-blend-mode: overlay;
34  animation: ma-bouge 1.1s steps(1) infinite;
35}
36@keyframes ma-bouge { 0% { transform: translate(0,0) } 25% { transform: translate(-22px,14px) } 50% { transform: translate(16px,-20px) } 75% { transform: translate(-12px,-10px) } 100% { transform: translate(18px,12px) } }
37.ma-bas { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, #07050B 0%, transparent 8%, transparent 90%, #07050B 100%) }
38@media (prefers-reduced-motion: reduce) { .ma-grain { animation: none } .ma-rangee { transform: none } .ma-piste { height: 100vh; height: 100svh } }
39`;export{J as default};