UNPKG

@gv-sh/specgen-user

Version:

[![Version](https://img.shields.io/badge/version-0.14.1-blue.svg)](https://github.com/gv-sh/specgen-user)

1 lines 6.68 kB
"use strict";(self.webpackChunk_gv_sh_specgen_user=self.webpackChunk_gv_sh_specgen_user||[]).push([[502],{502:(e,t,n)=>{n.r(t),n.d(t,{default:()=>p});var r=n(9950),o=n(2074),a=n(2257),s=n(7226),i=n(3437),l=n(5073),c=n(3445);var d=n(4414);function u(){const e=(0,r.useRef)(),t=(0,r.useRef)(new s.I9Y(-100,-100));return(0,r.useEffect)((()=>{const n=e.current;if(!n||"undefined"===typeof window)return;let r=n.offsetWidth,o=n.offsetHeight;const a=[new s.Q1f(14772032),new s.Q1f(28342),new s.Q1f(15841320)],d=new i.JeP({canvas:n,antialias:!0});d.setPixelRatio(window.devicePixelRatio>1?2:1),d.setSize(r,o),d.setClearColor(0,0);const u=new s.Z58,h=new s.ubm(50,r/o,.1,2e3);h.position.set(0,0,350);const m=new s.tBo;m.params.Points.threshold=6;const p=new s.YJl;u.add(p);const f=new s.Tap;f.crossOrigin="";const x=f.load("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAz1BMVEX////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////LRjS1AAAARHRSTlMAAXQGVQ0Qf+1UxKXMkNth67fqI6StG/IzjPCE8e7XYFbVJI0dfcvjgMPY7Pnlpjsi4DrW2hweiQyPEoqLgdmI5PX63dUi/vUAAAFvSURBVHhepddnU/JAAATgvUgSUkFBqhQFewd7e9v+/9/0jiPjiIaQ3D7f72aSa7tYpRXsRweHbbJ9eBDtBy2U0pkM+c1w0kFBrrPLTLuOi/U8v8qVqr6HfGZUZ676yCDHXsi1wgZWquywgJ0KspkuC+oaZNiIWFi0kTF+kyVs/pjBNFlK02DZL5Z0jyUBS1tai6seS+td4ZM5poVjgwWMaKWGBW+LVrY8fPBpycc7PFRpqerinUNrDgCYG1pLDYAZBTMAjxQkAIYUnAC3lEwRUDJGn5I+tinZRkxJjHNKrtGm5BTUnMkTyJ8g/0R5GeWNpG/lsXqYppTcAScUvAFI1CvtkoJLACbVrnX9YYE7oKWBKz6uR+rz/oSFmhgwYEJaCA0+NWxCVgNfVMSYBzyzpBc56qphW437auEQK49cunKY2rraVzPI5x3lFc9Xr1D1nTPT3HFRUCdJ+U2adFBKK/Av4t9/+HfwL77wV9f//7ErSpBKzt70AAAAAElFTkSuQmCC"),w=2e3,A=new Float32Array(6e3),g=new Float32Array(w),v=new Float32Array(6e3),y=new s.LoY,C=new s.THS(A,3);y.setAttribute("position",C);const M=new s.THS(g,1);y.setAttribute("size",M);const S=new s.THS(v,3);y.setAttribute("customColor",S);const j=[];function P(e,t){const n=e.clone();n.multiplyScalar(2*(Math.random()-.5)+1),l.K3.to(e,3*Math.random()+10,{x:n.x,y:n.y,z:n.z,yoyo:!0,repeat:-1,delay:5*-Math.random(),ease:c.MO.easeNone,onUpdate:()=>{C.array[3*t]=e.x,C.array[3*t+1]=e.y,C.array[3*t+2]=e.z}})}for(let e=0;e<w;e++){const t=new s.Pq0;t.color=Math.floor(Math.random()*a.length),t.theta=Math.random()*Math.PI*2,t.phi=(1-Math.sqrt(Math.random()))*Math.PI/2*(Math.random()>.5?1:-1),t.x=Math.cos(t.theta)*Math.cos(t.phi),t.y=Math.sin(t.phi),t.z=Math.sin(t.theta)*Math.cos(t.phi),t.multiplyScalar(120+5*(Math.random()-.5)),t.scaleX=5,Math.random()>.5&&P(t,e),j.push(t),t.toArray(A,3*e),a[t.color].toArray(v,3*e),g[e]=5}const b=document.getElementById("wrapVertexShader"),F=document.getElementById("wrapFragmentShader");if(!b||!F)return;const U=new s.BKk({uniforms:{pointTexture:{value:x}},vertexShader:b.textContent,fragmentShader:F.textContent,transparent:!0}),z=new s.ONl(y,U);u.add(z);const B=new s.LoY,T=[],E=[];for(let e=j.length-1;e>=0;e--){const t=j[e];for(let n=j.length-1;n>=0;n--)if(e!==n&&t.distanceTo(j[n])<12){T.push(t.x,t.y,t.z),T.push(j[n].x,j[n].y,j[n].z);const e=a[t.color];E.push(e.r,e.g,e.b),E.push(e.r,e.g,e.b)}}B.setAttribute("position",new s.qtW(T,3)),B.setAttribute("color",new s.qtW(E,3));const N=new s.mrM({color:16777215,transparent:!0,opacity:.1,vertexColors:!0}),k=new s.DXC(B,N);p.add(k);let _,R,Y=[],I=[];function L(){m.setFromCamera(t.current,h);const e=m.intersectObjects([z]);Y=[],e.forEach((e=>{let{index:t}=e;Y.push(t),I.includes(t)||function(e){const t=j[e];t.tl=new c.oh,t.tl.to(t,1,{scaleX:15,ease:c.Oq.easeOut.config(2,.2),onUpdate:()=>{M.array[e]=t.scaleX}})}(t)})),I.forEach((e=>{Y.includes(e)||function(e){const t=j[e];t.tl.to(t,.4,{scaleX:5,ease:c.ys.easeOut,onUpdate:()=>{M.array[e]=t.scaleX}})}(e)})),I=[...Y],M.needsUpdate=!0,C.needsUpdate=!0,d.render(u,h)}function V(){r=n.offsetWidth,o=n.offsetHeight,h.aspect=r/o,h.updateProjectionMatrix(),d.setSize(r,o)}function X(e){const a=n.getBoundingClientRect();t.current.x=(e.clientX-a.left)/r*2-1,t.current.y=-(e.clientY-a.top)/o*2+1}return function e(){L(),_=requestAnimationFrame(e)}(),window.addEventListener("mousemove",X),window.addEventListener("resize",(()=>{clearTimeout(R),R=setTimeout(V,200)})),()=>{cancelAnimationFrame(_),window.removeEventListener("mousemove",X),window.removeEventListener("resize",V)}}),[]),(0,d.jsx)("canvas",{ref:e,className:"w-full h-full"})}const h=()=>(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("script",{type:"x-shader/x-vertex",id:"wrapVertexShader",dangerouslySetInnerHTML:{__html:"\n attribute float size;\n attribute vec3 customColor;\n varying vec3 vColor;\n \n void main() {\n vColor = customColor;\n vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\n gl_PointSize = size * (350.0 / -mvPosition.z);\n gl_Position = projectionMatrix * mvPosition;\n }\n "}}),(0,d.jsx)("script",{type:"x-shader/x-fragment",id:"wrapFragmentShader",dangerouslySetInnerHTML:{__html:"\n varying vec3 vColor;\n uniform sampler2D pointTexture;\n \n void main() {\n vec4 textureColor = texture2D(pointTexture, gl_PointCoord);\n if (textureColor.a < 0.3) discard;\n gl_FragColor = vec4(vColor, 0.65) * textureColor;\n }\n "}})]});var m=n(5006);const p=e=>{let{onClearSession:t}=e;const{removeAllParameters:n}=(0,m.K)();return(0,r.useEffect)((()=>{n(),t&&t()}),[n,t]),(0,d.jsx)("div",{className:"flex items-center justify-center h-full",children:(0,d.jsxs)("div",{className:"fixed w-full h-screen overflow-hidden",children:[(0,d.jsx)(u,{}),(0,d.jsx)(h,{}),(0,d.jsx)("div",{className:"content__inner absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-white",children:(0,d.jsxs)("div",{className:"max-w-4xl mx-auto px-8",children:[(0,d.jsxs)("h1",{className:"text-[84px] font-bold text-primary leading-[72px] mb-8 tracking-tight",children:["What kind of ",(0,d.jsx)("em",{children:"futures"})," do you envision?"]}),(0,d.jsx)("p",{className:"text-[24px] text-muted-foreground mb-8 font-regular",children:"Explore speculative futures with us\u2014challenge your assumptions, question what is possible, and create the future you desire."}),(0,d.jsxs)(o.N_,{to:"/parameters",className:"inline-flex items-center bg-primary text-primary-foreground px-6 py-3 rounded-md text-lg font-light hover:bg-primary/90 transition-colors",children:["Get Started",(0,d.jsx)(a.A,{className:"ml-2 h-5 w-5"})]})]})})]})})}}}]);