<!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>“Create a "Evolute | Institutional Crypto Infrastructure" component. Implement custom GLSL shaders for visual effects. Apply glass-morphism / backdrop blur, gradients, layered shadows, hover transitions. Color palette: #ff7e33, #050302. Layout: Flexbox, full-screen fixed canvas background, full-viewport sizing. Interactivity: mouse tracking, click interactions, continuous animation loop. Use procedural noise for organic visual effects.”