<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Software Identity - 60% Width Layout</title> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <style> :root { --neon-color: #E1FF00; --black: #000000; --font-mono: 'JetBrains Mono', monospace; --font-impact: 'Impact', 'Arial Narrow Bold', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { background-color: var(--neon-color); color: var(--black); overflow: hidden; height: 100%; } /* --- LOADER --- */ #loader { position: fixed; inset: 0; background: var(--black); z-index: 100; padding: 50px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } #percent-text { position: absolute; top: 50px; left: 50px; font-family: var(--font-mono); font-size: 8rem; font-weight: 800; line-height: 1; background: linear-gradient(to top, var(--neon-color) 0%, #222 0%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #random-text { position: absolute; bottom: 50px; right: 50px; width: 70vw; text-align: right; font-family: var(--font-impact); font-size: 8vw; line-height: 0.85; text-transform: uppercase; color: var(--neon-color); } /* --- MAIN CONTENT --- */ #main-content { opacity: 0; padding: 60px; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; position: relative; transform: scale(0.9); } header { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; font-weight: 700; } .identity-guidelines { font-family: var(--font-mono); writing-mode: vertical-rl; position: absolute; right: 60px; top: 60px; font-size: 11px; } .content-wrap { /* Restricting the main text area to 60% of viewport width */ width: 60vw; position: relative; z-index: 5; } .tag { font-family: var(--font-mono); background: var(--black); color: var(--neon-color); display: inline-block; padding: 8px 16px; font-size: 1.4rem; margin-bottom: 30px; text-transform: uppercase; font-weight: 800; } .headline { font-family: var(--font-mono); font-size: 4.5rem; /* Adjusted for 60% container */ line-height: 0.95; text-transform: uppercase; font-weight: 800; letter-spacing: -2px; margin-bottom: 40px; word-break: keep-all; /* Prevents awkward stretching */ } .char-container { display: inline-block; overflow: hidden; vertical-align: bottom; } .char { display: inline-block; transform: translateY(100%); } .description { font-family: var(--font-mono); max-width: 450px; font-size: 1rem; line-height: 1.5; margin-left: 100px; font-weight: 400; } footer { display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .footer-logo-big { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; } canvas { position: fixed; top: 0; left: 0; pointer-events: none; z-index: -1; opacity: 0.15; } </style> </head> <body> <div id="loader"> <div id="percent-text">00</div> <div id="random-text">READY_LINK</div> </div> <canvas id="webgl-bg"></canvas> <main id="main-content"> <header> <div><svg width="30" height="20" viewBox="0 0 30 20"><rect width="30" height="4" fill="black"/><rect width="30" height="4" fill="black" y="8"/><rect width="30" height="4" fill="black" y="16"/></svg></div> <div style="text-align: center;">VIRTUAL_MACHINE_SPEC<br>v4.0.2 — STABLE_BUILD</div> <div>#0x40</div> <div class="identity-guidelines">CORE_ENGINE_GUIDELINES</div> </header> <div class="content-wrap"> <div class="tag" id="tag-text">SYSTEMS</div> <h1 class="headline" id="headline"></h1> <p class="description" id="desc-text"></p> </div> <footer> <div class="footer-logo-big">BINARY_FLOW.</div> <div>©2026 — NEON_LOGIC.</div> <div style="font-size: 1.4rem; font-weight: 800;">STK.</div> </footer> </main> <script> const softwareData = [ { tag: "LATENCY_CONTROL", head: "Speed is a feature, not a consequence of better hardware.", desc: "Our architecture prioritizes low-level memory safety. By reducing overhead in the execution layer, we achieve sub-millisecond response times." }, { tag: "DISTRIBUTED_LOGIC", head: "The network is reliable only if your code expects it to fail.", desc: "Building systems that thrive on chaos. We utilize partition-tolerant algorithms to ensure consistency across geo-replicated clusters." } ]; const loadingStrings = ["BOOTING_CORE", "MAPPING_DOM", "CACHING_V8", "LOAD_SCRIPTS", "SYNC_SERVERS"]; let currentIndex = 0; const headlineEl = document.getElementById('headline'); const tagEl = document.getElementById('tag-text'); const descEl = document.getElementById('desc-text'); const percentEl = document.getElementById('percent-text'); const randomTextEl = document.getElementById('random-text'); // --- Smooth Fibonacci Loader --- const fib = [0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 100]; let fibStep = 0; let displayVal = { value: 0 }; function animateToNextFib() { if (fibStep < fib.length - 1) { fibStep++; gsap.to(displayVal, { value: fib[fibStep], duration: 0.7 + Math.random(), ease: "power2.inOut", onUpdate: () => { percentEl.innerText = Math.floor(displayVal.value).toString().padStart(2, '0'); percentEl.style.background = `linear-gradient(to top, var(--neon-color) ${displayVal.value}%, #222 ${displayVal.value}%)`; percentEl.style.webkitBackgroundClip = "text"; }, onComplete: animateToNextFib }); } else { startMainTransition(); } } // Random Impact Text Rotation setInterval(() => { const str = loadingStrings[Math.floor(Math.random() * loadingStrings.length)]; gsap.to(randomTextEl, { opacity: 0, x: 20, duration: 0.2, onComplete: () => { randomTextEl.innerText = str; gsap.to(randomTextEl, { opacity: 1, x: 0, duration: 0.2 }); }}); }, 3000); function splitText(element, text) { element.innerHTML = ''; text.split('').forEach(char => { const container = document.createElement('span'); container.classList.add('char-container'); const span = document.createElement('span'); span.innerText = char === ' ' ? '\u00A0' : char; span.classList.add('char'); container.appendChild(span); element.appendChild(container); }); } function cycleContent() { const data = softwareData[currentIndex]; const outTl = gsap.timeline(); if (headlineEl.children.length > 0) { outTl.to(".char", { y: "-110%", duration: 0.4, stagger: 0.005, ease: "power2.in" }); outTl.to([tagEl, descEl], { opacity: 0, y: -10, duration: 0.3 }, "-=0.2"); } outTl.add(() => { tagEl.innerText = data.tag; descEl.innerText = data.desc; splitText(headlineEl, data.head); gsap.timeline() .to(".char", { y: "0%", duration: 0.7, stagger: 0.01, ease: "expo.out" }) .fromTo([tagEl, descEl], { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.5, stagger: 0.1 }, "-=0.4"); }); currentIndex = (currentIndex + 1) % softwareData.length; gsap.delayedCall(5, cycleContent); } function startMainTransition() { const masterTl = gsap.timeline({ delay: 0.5 }); masterTl.to("#loader", { clipPath: "polygon(0 0, 100% 0, 100% 0%, 0% 0%)", duration: 1, ease: "expo.inOut" }); masterTl.to("#main-content", { opacity: 1, scale: 1, duration: 1, ease: "power4.out", onStart: () => cycleContent() }, "-=0.8"); } animateToNextFib(); // Background Grain const canvas = document.getElementById('webgl-bg'); const ctx = canvas.getContext('2d'); function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function renderGrain() { const imageData = ctx.createImageData(canvas.width, canvas.height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const val = Math.random() * 255; data[i] = data[i+1] = data[i+2] = val; data[i+3] = 12; } ctx.putImageData(imageData, 0, 0); requestAnimationFrame(renderGrain); } window.addEventListener('resize', resize); resize(); renderGrain(); </script> </body> </html>

Code & assets

Design System