<!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>“Create a "Houda Ltd. | Vertical Rectangular Glass" component. Use Three.js for 3D WebGL rendering. Implement custom GLSL shaders for visual effects. Color palette: #ffffff. Layout: Flexbox, full-viewport sizing. Interactivity: continuous animation loop, responsive resize handling.”