<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BrowseFlow | Productivity Layer</title> <style> :root { --bg-color: #050505; --text-main: #ffffff; --text-dim: #888888; --glass: rgba(255, 255, 255, 0.02); --border: rgba(255, 255, 255, 0.08); --accent: #ffae42; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-color); color: var(--text-main); font-family: 'Inter', -apple-system, system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; } #glCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; position: relative; z-index: 10; } .logo { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px;} .nav-links { display: flex; gap: 2rem; } .nav-links a { color: #aaa; text-decoration: none; font-size: 0.85rem; } .hero { padding: 8rem 5% 2rem; max-width: 1200px; } h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 500; letter-spacing: -3px; line-height: 1; margin-bottom: 2rem; background: linear-gradient(180deg, #fff 40%, #555 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero p.subheadline { color: var(--text-dim); font-size: 1.2rem; max-width: 480px; line-height: 1.6; margin-bottom: 2.5rem; } .cta-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 6rem; } .btn-white { background: white; color: black; padding: 0.8rem 1.6rem; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 0.95rem; } .btn-link { color: white; text-decoration: none; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } /* Bottom Section Grid */ .bottom-layout { display: grid; grid-template-columns: 1fr 2fr; /* Testimonials left, Cards right */ gap: 4rem; padding: 0 5% 5rem; align-items: flex-end; } /* Testimonials Section */ .testimonials { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 2rem; } .avatar-stack { display: flex; align-items: center; } .avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg-color); margin-right: -10px; background: #222; } .testimonial-text { color: var(--text-dim); font-size: 0.85rem; max-width: 260px; line-height: 1.5; } /* Right Side Cards */ .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid var(--border); border-radius: 20px; padding: 2rem; height: 280px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; } /* Mockup Visuals inside cards */ .card-visual { position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; height: 100px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; } .card-visual::before { content: ''; position: absolute; top: 10px; left: 10px; width: 30px; height: 4px; background: var(--border); border-radius: 2px; box-shadow: 0 8px 0 var(--border), 0 16px 0 var(--border); } .card h3 { font-size: 1.1rem; font-weight: 400; color: #ccc; letter-spacing: -0.2px; } @media (max-width: 1024px) { .bottom-layout { grid-template-columns: 1fr; gap: 2rem; } .hero { padding-top: 5rem; } h1 { font-size: 3.5rem; } } </style> </head> <body> <canvas id="glCanvas"></canvas> <nav> <div class="logo"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20Z"/></svg> BrowseFlow </div> <div class="nav-links"> <a href="#">Features</a> <a href="#">About Us</a> <a href="#">Benefits</a> </div> <a href="#" class="btn-white" style="padding: 0.5rem 1.2rem; border-radius: 6px;">Log In</a> </nav> <main> <section class="hero"> <h1>A Handy Tool For<br>Faster Browsing!</h1> <p class="subheadline">Check out this cool system for today's web productivity! It makes handling tabs, bookmarks, and sessions a breeze.</p> <div class="cta-row"> <a href="#" class="btn-white">Get Started</a> <a href="#" class="btn-link">Customer requests ></a> </div> </section> <div class="bottom-layout"> <section class="testimonials"> <div class="avatar-stack"> <img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=1"> <img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=2"> <img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=3"> <img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=4"> </div> <p class="testimonial-text">Loved by over 100 businesses and customers around the globe, we've built a solid reputation!</p> </section> <section class="cards-grid"> <div class="card"> <div class="card-visual" style="background: linear-gradient(135deg, rgba(255,174,66,0.1), transparent);"></div> <h3>Crafted To Perfection</h3> </div> <div class="card"> <div class="card-visual"></div> <h3>Designed To Be Fast</h3> </div> </section> </div> </main> <script id="vs" type="x-shader/x-vertex"> attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } </script> <script id="fs" type="x-shader/x-fragment"> precision mediump float; uniform vec2 u_res; uniform float u_time; uniform vec2 u_mouse; float noise(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec2 uv = gl_FragCoord.xy / u_res; // The light source is at the top center-right vec2 center = vec2(0.68 + (u_mouse.x - 0.5) * 0.03, 1.15); vec2 p = uv - center; // Sharp, intense vertical beam source float beamWidth = 0.1 + uv.y * 0.5; float beam = pow(max(0.0, 1.0 - abs(p.x) / beamWidth), 18.0); // Top hotspot glow (The "Sun" effect) float hotspot = smoothstep(1.0, 0.75, uv.y) * exp(-abs(p.x) * 12.0) * 4.0; // Wide atmospheric glow float glow = exp(-length(p * vec2(1.0, 0.3)) * 4.0) * 0.8; vec3 color = vec3(1.0, 0.7, 0.35) * (beam + hotspot + glow); // Grain Texture float n = (noise(uv + u_time * 0.01) - 0.5) * 0.2; color += n * (beam + hotspot + 0.1); // Strong falloff towards the bottom color *= smoothstep(-0.2, 0.8, uv.y); gl_FragColor = vec4(color * 0.8, 1.0); } </script> <script> const canvas = document.getElementById('glCanvas'); const gl = canvas.getContext('webgl'); let mX = 0.5, mY = 0.5; window.addEventListener('mousemove', (e) => { mX = e.clientX / window.innerWidth; mY = 1.0 - (e.clientY / window.innerHeight); }); function createShader(gl, type, id) { const s = gl.createShader(type); gl.shaderSource(s, document.getElementById(id).text); gl.compileShader(s); return s; } const prog = gl.createProgram(); gl.attachShader(prog, createShader(gl, gl.VERTEX_SHADER, 'vs')); gl.attachShader(prog, createShader(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, "position"); gl.enableVertexAttribArray(pos); gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0); const uRes = gl.getUniformLocation(prog, "u_res"); const uTime = gl.getUniformLocation(prog, "u_time"); const uMouse = 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.uniform2f(uRes, canvas.width, canvas.height); gl.uniform1f(uTime, t * 0.001); gl.uniform2f(uMouse, mX, mY); gl.drawArrays(gl.TRIANGLES, 0, 6); requestAnimationFrame(loop); } requestAnimationFrame(loop); </script> </body> </html>

Code & assets

Design System