<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Evolute | Institutional Crypto Infrastructure</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css"> <style> :root { --primary-orange: #ff7e33; --bg-dark: #050302; --font-geist: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; background: var(--bg-dark); color: white; overflow: hidden; font-family: var(--font-geist); -webkit-font-smoothing: antialiased; } #canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; } .overlay { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.4) 100%); pointer-events: none; } nav, main, .bottom-logo { pointer-events: auto; } nav { width: 100%; display: flex; justify-content: space-between; padding: 40px 60px; align-items: center; } .logo { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.05em; text-transform: lowercase; } .logo span { color: var(--primary-orange); } .nav-pill { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.1); padding: 8px 24px; border-radius: 40px; backdrop-filter: blur(12px); display: flex; gap: 20px; } .nav-pill a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.85rem; font-weight: 400; transition: color 0.2s ease; } .nav-pill a:hover { color: white; } .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .badge { background: rgba(61, 31, 13, 0.4); border: 1px solid var(--primary-orange); color: var(--primary-orange); padding: 5px 14px; border-radius: 20px; font-size: 0.7rem; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } h1 { font-size: 5rem; font-weight: 400; letter-spacing: -0.06em; margin-bottom: 18px; line-height: 1.05; } p { max-width: 580px; color: rgba(255,255,255,0.45); line-height: 1.6; margin-bottom: 35px; font-size: 1.1rem; font-weight: 300; } .btn-white { background: white; color: black; padding: 14px 32px; border-radius: 40px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: transform 0.2s ease, opacity 0.2s ease; } .btn-white:hover { transform: translateY(-1px); opacity: 0.9; } .btn-dark { background: rgba(0,0,0,0.6); color: white; padding: 14px 32px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.15); margin-left: 12px; cursor: pointer; font-weight: 500; font-size: 0.95rem; backdrop-filter: blur(10px); } .bottom-logo { position: absolute; bottom: 50px; width: 80px; height: 80px; background: radial-gradient(circle, #ff9e44 0%, #000 75%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(255, 126, 51, 0.4); } </style> </head> <body> <canvas id="canvas"></canvas> <div class="overlay"> <nav> <div class="logo">evolute<span>.</span></div> <div class="nav-pill"> <a href="#">Network</a> <a href="#">Staking</a> <a href="#">Governance</a> <a href="#">Docs</a> </div> <button class="btn-white" style="padding: 9px 22px; font-size: 0.85rem;">Launch App</button> </nav> <main class="hero"> <div class="badge">Beta is live! Click to learn more.</div> <h1>Evolve your Assets.<br>Secure the Future.</h1> <p>Evolute is a premier crypto infrastructure for modular liquidity, cross-chain validation, and institutional scale.</p> <div> <button class="btn-white">Enter Ecosystem</button> <button class="btn-dark">Whitepaper</button> </div> </main> <div class="bottom-logo"> <div style="width: 30px; height: 30px; background: #fff; border-radius: 50%; opacity: 0.9;"></div> </div> </div> <script> const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl'); let mouse = { x: 0.5, y: 0.5 }; window.addEventListener('mousemove', (e) => { mouse.x = e.clientX / window.innerWidth; mouse.y = 1.0 - (e.clientY / window.innerHeight); }); const vs = `attribute vec2 pos; void main() { gl_Position = vec4(pos, 0.0, 1.0); }`; const fs = ` precision highp float; uniform float u_time; uniform vec2 u_res; uniform vec2 u_mouse; float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f*f*(3.0-2.0*f); return mix(mix(hash(i + vec2(0,0)), hash(i + vec2(1,0)), u.x), mix(hash(i + vec2(0,1)), hash(i + vec2(1,1)), u.x), u.y); } void main() { vec2 uv = gl_FragCoord.xy / u_res.xy; vec2 centeredUv = (gl_FragCoord.xy - 0.5 * u_res.xy) / min(u_res.y, u_res.x); // Original Background Structure float columns = 8.0; float colIndex = floor(uv.x * columns); float colEdge = step(0.02, fract(uv.x * columns)); // Mouse Wave Logic float dist = length(uv - u_mouse); float wave = sin(dist * 12.0 - u_time * 2.5) * smoothstep(0.45, 0.0, dist); // Fractal Movement inside the columns float speed = u_time * 0.15; float n = noise(vec2(uv.x * 2.0, uv.y * 1.5 - speed + colIndex + wave * 0.25)); n += 0.5 * noise(vec2(uv.x * 4.0, uv.y * 3.0 + speed + wave * 0.15)); // Gradient mapping float light = smoothstep(0.3, 0.7, n); vec3 baseColor = vec3(0.04, 0.02, 0.01); vec3 orange = vec3(1.0, 0.4, 0.1); vec3 highlight = vec3(1.0, 0.8, 0.5); vec3 finalColor = mix(baseColor, orange, light); finalColor = mix(finalColor, highlight, pow(light, 4.0)); float mask = colEdge; float centerGlow = 1.0 - length(centeredUv * 0.8); gl_FragColor = vec4(finalColor * mask * (centerGlow + 0.2), 1.0); } `; function compile(gl, type, src) { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; } const prog = gl.createProgram(); gl.attachShader(prog, compile(gl, gl.VERTEX_SHADER, vs)); gl.attachShader(prog, compile(gl, gl.FRAGMENT_SHADER, fs)); gl.linkProgram(prog); gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), gl.STATIC_DRAW); const pos = gl.getAttribLocation(prog, "pos"); gl.enableVertexAttribArray(pos); gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0); const tLoc = gl.getUniformLocation(prog, "u_time"); const rLoc = gl.getUniformLocation(prog, "u_res"); const mLoc = gl.getUniformLocation(prog, "u_mouse"); function loop(t) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform1f(tLoc, t * 0.005); gl.uniform2f(rLoc, canvas.width, canvas.height); gl.uniform2f(mLoc, mouse.x, mouse.y); gl.drawArrays(gl.TRIANGLES, 0, 6); requestAnimationFrame(loop); } requestAnimationFrame(loop); </script> </body> </html>

Code & assets

Design System