<!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>“Create a "Software Identity - 60% Width Layout" component. Use GSAP for advanced animations, JetBrains Mono font. Use WebGL for GPU-accelerated rendering. Apply gradients, clip-path masks. Color palette: #e1ff00, #000000. Layout: Flexbox, full-screen fixed canvas background, full-viewport sizing. Interactivity: continuous animation loop, responsive resize handling.”