https://makelane.ai/assets/OceanDirection-DWgmO1kz.js

1import{r as m,j as o}from"./index-Bj4e8vdO.js";const g=[{name:"Moonlit Blue",oceanColor:"#0b1f3f",moonColor:"#6fa8ff",horizonColor:"#020814",waveHeight:25,waveSpeed:1.2,glowIntensity:.7,atmosphere:.4},{name:"Deep Indigo",oceanColor:"#050b2a",moonColor:"#9fb7ff",horizonColor:"#01030a",waveHeight:35,waveSpeed:.9,glowIntensity:.6,atmosphere:.6},{name:"Electric Teal",oceanColor:"#0b2f3f",moonColor:"#5fffd9",horizonColor:"#021018",waveHeight:20,waveSpeed:1.8,glowIntensity:.8,atmosphere:.3},{name:"Midnight Violet",oceanColor:"#1a0b3f",moonColor:"#c89bff",horizonColor:"#050214",waveHeight:40,waveSpeed:.7,glowIntensity:.9,atmosphere:.7}],Y=l=>{const a=Number.parseInt(l.slice(1),16);return{r:a>>16&255,g:a>>8&255,b:a&255}},C=(l,a,s)=>l+(a-l)*s,ee=(l,a,s)=>{const r=Y(l),p=Y(a);return`rgb(${Math.round(C(r.r,p.r,s))} ${Math.round(C(r.g,p.g,s))} ${Math.round(C(r.b,p.b,s))})`};function te(){const l=m.useRef(null),a=m.useRef(g[0]),s=m.useRef(g[0]),[r,p]=m.useState(g[0]),[z,S]=m.useState(0),[P,E]=m.useState(!0),[j,J]=m.useState(!1),[$,K]=m.useState(!0),Q=(t,e=!1)=>{const i=g[t];S(t),p(i),s.current=i,e||E(!1)},x=(t,e)=>{const i={...s.current,name:"Custom",[t]:e};s.current=i,p(i),E(!1)};return m.useEffect(()=>{if(!P)return;const t=window.setInterval(()=>{S(e=>{const i=(e+1)%g.length;return s.current=g[i],p(g[i]),i})},12e3);return()=>window.clearInterval(t)},[P]),m.useEffect(()=>{const t=l.current,e=t==null?void 0:t.getContext("2d");if(!t||!e)return;let i=0,k=0,c=0,n=0,F=performance.now();const L=()=>{const u=Math.min(window.devicePixelRatio||1,2);c=window.innerWidth,n=window.innerHeight,t.width=Math.round(c*u),t.height=Math.round(n*u),t.style.width=`${c}px`,t.style.height=`${n}px`,e.setTransform(u,0,0,u,0,0)},W=u=>{const q=Math.min((u-F)/16.667,2);F=u;const b=s.current,y=a.current,M=1-Math.pow(.975,q),U=j?(Math.sin(u/4200)+1)*.08:0;a.current={...b,waveHeight:C(y.waveHeight,b.waveHeight,M),waveSpeed:C(y.waveSpeed,b.waveSpeed,M),glowIntensity:C(y.glowIntensity,b.glowIntensity,M),atmosphere:C(y.atmosphere,b.atmosphere,M)};const d=a.current;k+=.01*q,e.clearRect(0,0,c,n);const I=e.createLinearGradient(0,0,0,n);I.addColorStop(0,ee("#050816",d.moonColor,Math.min(1,d.glowIntensity+U))),I.addColorStop(.46,d.horizonColor),I.addColorStop(1,"#000000"),e.fillStyle=I,e.fillRect(0,0,c,n);const f=c*(c<700?.72:.68),_=n*.2,v=Math.max(24,Math.min(48,c*.035)),R=e.createRadialGradient(f,_,0,f,_,v*(3.2+d.glowIntensity));R.addColorStop(0,d.moonColor),R.addColorStop(.18,`${d.moonColor}aa`),R.addColorStop(1,"transparent"),e.fillStyle=R,e.fillRect(f-v*5,_-v*5,v*10,v*10),e.fillStyle="#f8fbff",e.beginPath(),e.arc(f,_,v,0,Math.PI*2),e.fill();const h=n*.45,A=e.createLinearGradient(0,h,0,n);A.addColorStop(0,d.oceanColor),A.addColorStop(1,"#00030a"),e.fillStyle=A,e.fillRect(0,h,c,n-h);for(let H=0;H<8;H+=1){const D=H/8,Z=h+D*(n-h),B=d.waveHeight*(.24+D*.52),V=d.waveSpeed*(.4+H*.08);e.beginPath();for(let w=-8;w<=c+8;w+=8){const X=Z+Math.sin(w*.011+k*V)*B*.42+Math.cos(w*.022-k*V*.65)*B*.18;w===-8?e.moveTo(w,X):e.lineTo(w,X)}e.lineTo(c,n),e.lineTo(0,n),e.closePath(),e.fillStyle=`rgba(16, 65, 116, ${.055+D*.07})`,e.fill()}const O=e.createLinearGradient(f,h,f,n);O.addColorStop(0,`rgba(255,255,255,${d.glowIntensity*.55})`),O.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=O,e.beginPath(),e.moveTo(f-36,h),e.lineTo(f+36,h),e.lineTo(f+90,n),e.lineTo(f-90,n),e.closePath(),e.fill();const T=e.createLinearGradient(0,h-n*.12,0,h+n*.08);T.addColorStop(0,"transparent"),T.addColorStop(.5,`rgba(166, 204, 255, ${d.atmosphere*.16})`),T.addColorStop(1,"transparent"),e.fillStyle=T,e.fillRect(0,h-n*.12,c,n*.2),i=window.requestAnimationFrame(W)};return L(),window.addEventListener("resize",L),i=window.requestAnimationFrame(W),()=>{window.cancelAnimationFrame(i),window.removeEventListener("resize",L)}},[j]),o.jsxs("main",{className:"ocean-direction",children:[o.jsx("canvas",{ref:l,className:"ocean-direction__canvas","aria-hidden":"true"}),o.jsxs("div",{className:"ocean-direction__identity",children:[o.jsx("span",{children:"MakeLane / Creative Direction"}),o.jsx("strong",{children:"Ocean Study 01"})]}),o.jsx("button",{className:"ocean-direction__panel-toggle",type:"button","aria-expanded":$,onClick:()=>K(t=>

1!t),children:$?"Hide controls":"Tune scene"}),o.jsxs("aside",{className:"ocean-direction__panel","data-open":$,"aria-label":"Ocean effects controls",children:[o.jsxs("header",{children:[o.jsx("p",{children:"Atmosphere lab"}),o.jsx("h1",{children:"Ocean Effects"}),o.jsx("span",{children:"Shape the motion, light, and color of this direction."})]}),o.jsx(N,{label:"Wave height",value:r.waveHeight,min:5,max:60,onChange:t=>x("waveHeight",t)}),o.jsx(N,{label:"Wave speed",value:r.waveSpeed,min:.2,max:3,step:.1,onChange:t=>x("waveSpeed",t)}),o.jsx(N,{label:"Moon glow",value:r.glowIntensity,min:0,max:1,step:.05,onChange:t=>x("glowIntensity",t)}),o.jsx(N,{label:"Atmosphere",value:r.atmosphere,min:0,max:1,step:.05,onChange:t=>x("atmosphere",t)}),o.jsxs("div",{className:"ocean-direction__colors",children:[o.jsx(G,{label:"Ocean",value:r.oceanColor,onChange:t=>x("oceanColor",t)}),o.jsx(G,{label:"Moon",value:r.moonColor,onChange:t=>x("moonColor",t)}),o.jsx(G,{label:"Horizon",value:r.horizonColor,onChange:t=>x("horizonColor",t)})]}),o.jsxs("label",{className:"ocean-direction__switch",children:[o.jsx("input",{type:"checkbox",checked:P,onChange:t=>E(t.target.checked)}),o.jsx("span",{})," Autoplay presets"]}),o.jsxs("div",{className:"ocean-direction__actions",children:[o.jsx("button",{type:"button",onClick:()=>Q((z+1)%g.length),children:"Next preset"}),o.jsxs("button",{type:"button","aria-pressed":j,onClick:()=>J(t=>!t),children:["Color drift ",j?"on":"off"]})]}),o.jsxs("footer",{children:[o.jsx("span",{children:"Preset"}),o.jsx("strong",{children:r.name})]})]}),o.jsx("p",{className:"ocean-direction__status",children:"Local concept · limited · no default changed"})]})}function N({label:l,value:a,min:s,max:r,step:p=1,onChange:z}){return o.jsxs("label",{className:"ocean-direction__control",children:[o.jsxs("span",{children:[l,o.jsx("output",{children:a.toFixed(p<1?2:0)})]}),o.jsx("input",{type:"range",min:s,max:r,step:p,value:a,onChange:S=>z(Number(S.target.value))})]})}function G({label:l,value:a,onChange:s}){return o.jsxs("label",{children:[o.jsx("span",{children:l}),o.jsx("input",{type:"color",value:a,"aria-label":`${l} color`,onChange:r=>s(r.target.value)})]})}export{te as default};