<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Houda Ltd. | Vertical Rectangular Glass</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"></script> <style> :root { --text: #ffffff; --text-dim: rgba(255,255,255,0.6); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background: #000; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } #app-container { position: relative; width: 96vw; height: 92vh; border-radius: 40px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); } #canvas-container { position: absolute; inset: 0; z-index: 1; } /* UI Overlays */ .interface { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; pointer-events: none; color: var(--text); } nav { padding: 40px 60px; display: flex; justify-content: space-between; align-items: center; pointer-events: auto; } .logo { display: flex; align-items: center; gap: 12px; } .logo-box { width: 32px; height: 32px; background: #fff; border-radius: 8px; } .nav-links { display: flex; gap: 30px; list-style: none; } .nav-links a { color: var(--text-dim); text-decoration: none; font-size: 14px; } .btn-demo { background: #fff; color: #000; padding: 10px 24px; border-radius: 100px; font-weight: 600; text-decoration: none; font-size: 14px; } .hero { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } h1 { font-size: clamp(48px, 6vw, 84px); font-weight: 400; line-height: 1.05; margin-bottom: 24px; } h1 i { font-family: serif; font-style: italic; } .hero p { max-width: 520px; color: var(--text-dim); line-height: 1.6; font-size: 18px; margin-bottom: 40px; } .cta { display: flex; gap: 16px; pointer-events: auto; } .btn-p { background: #fff; color: #000; padding: 16px 36px; border-radius: 100px; text-decoration: none; font-weight: 600; } .btn-s { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); padding: 16px 36px; border-radius: 100px; text-decoration: none; color: #fff; } </style> </head> <body> <div id="app-container"> <div id="canvas-container"></div> <div class="interface"> <nav> <div class="logo"> <div class="logo-box"></div> <div><div style="font-weight: 700; font-size: 15px;">Houda Ltd.</div><div style="font-size: 11px; opacity: 0.5;">Agency</div></div> </div> <ul class="nav-links"> <li><a href="#" style="color:#fff">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">About</a></li> <li><a href="#">FAQ's</a></li> </ul> <div class="nav-right"><a href="#" class="btn-demo">Book A Demo</a></div> </nav> <section class="hero"> <h1>Smarter Systems.<br><i>Better Outcomes.</i></h1> <p>Our AI automation platform eliminates repetitive tasks and empowers your team to focus on high-impact work.</p> <div class="cta"> <a href="#" class="btn-p">Get Started Now</a> <a href="#" class="btn-s">See It In Action</a> </div> </section> </div> </div> <script id="vertexShader" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform float uTime; uniform vec2 uResolution; varying vec2 vUv; float hash(float n) { return fract(sin(n) * 43758.5453123); } // THE MOVING GRADIENT (Behind the glass) vec3 getBackground(vec2 uv) { float t = uTime * 0.4; vec2 p = uv - 0.5; p.x *= uResolution.x / uResolution.y; float d1 = length(p - vec2(sin(t)*0.7, cos(t*0.5)*0.3)); float d2 = length(p - vec2(cos(t*0.3)*0.8, sin(t*0.8)*0.2)); vec3 col = vec3(0.005, 0.01, 0.02); // Deep Dark Base col += vec3(0.0, 0.4, 0.5) * (0.2 / (d1 + 0.4)); // Moving Teal col += vec3(0.1, 0.6, 0.7) * (0.15 / (d2 + 0.5)); // Moving Cyan return col; } void main() { vec2 uv = vUv; // 1. CREATE RECTANGULAR VERTICAL PANES float numPanes = 14.0; float paneId = floor(uv.x * numPanes); float paneUvX = fract(uv.x * numPanes); // 2. REFRACTION // Each pane gets a unique but fixed offset to distort the background float offset = hash(paneId) * 0.2; vec2 refractedUv = uv; refractedUv.x += offset; refractedUv.y += sin(uTime * 0.2 + paneId) * 0.05; // Slight organic drift vec3 bgColor = getBackground(refractedUv); // 3. SHARD VISIBILITY (Edge Highlights) // Draw a bright line at the start/end of each pane (x=0 and x=1) float edge = smoothstep(0.02, 0.0, paneUvX) + smoothstep(0.98, 1.0, paneUvX); // Vary edge brightness based on paneId for "fractal" feel float edgeIntensity = hash(paneId + 10.0) * 0.4; vec3 finalColor = mix(bgColor, vec3(0.4, 0.8, 0.9), edge * edgeIntensity); // 4. TEXTURE & GRAIN float grain = (fract(sin(dot(uv, vec2(12.98, 78.23))) * 43758.54) - 0.5) * 0.08; finalColor += grain; // Vignette finalColor *= smoothstep(1.3, 0.5, length(uv - 0.5)); gl_FragColor = vec4(finalColor, 1.0); } </script> <script> const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const renderer = new THREE.WebGLRenderer({ antialias: true }); const container = document.getElementById('app-container'); renderer.setSize(container.clientWidth, container.clientHeight); document.getElementById('canvas-container').appendChild(renderer.domElement); const geometry = new THREE.PlaneGeometry(2, 2); const uniforms = { uTime: { value: 0 }, uResolution: { value: new THREE.Vector2(container.clientWidth, container.clientHeight) } }; const material = new THREE.ShaderMaterial({ uniforms, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); scene.add(new THREE.Mesh(geometry, material)); function animate(time) { uniforms.uTime.value = time * 0.001; renderer.render(scene, camera); requestAnimationFrame(animate); } window.addEventListener('resize', () => { renderer.setSize(container.clientWidth, container.clientHeight); uniforms.uResolution.value.set(container.clientWidth, container.clientHeight); }); animate(); </script> </body> </html>

Code & assets

Design System