<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Founding Design - The Movement</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/font.css">
<style>
:root {
--primary-red: #E31E24;
--text-dark: #1a1a1a;
--text-muted: #666;
--bg-light: #f8f8f8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
height: 100%;
font-family: 'Geist Sans', sans-serif;
background-color: var(--bg-light);
color: var(--text-dark);
overflow: hidden;
}
#webgl-canvas {
position: fixed;
top: 0; left: 0;
z-index: 0;
width: 100%; height: 100%;
}
.ui-overlay {
position: relative;
z-index: 10;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 60px 20px;
pointer-events: none;
text-align: center;
}
.ui-overlay > * { pointer-events: auto; }
.steps {
display: flex;
gap: 25px;
font-size: 0.75rem;
font-weight: 600;
color: #bbb;
}
.step {
cursor: pointer;
transition: color 0.3s ease;
position: relative;
padding-bottom: 8px;
}
.step:hover { color: var(--text-dark); }
.step.active { color: var(--primary-red); }
.step.active::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 4px; height: 4px;
background: var(--primary-red);
border-radius: 50%;
}
.main-content {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.animate-item, footer {
opacity: 0;
filter: blur(10px);
transform: translateY(20px);
}
.badge {
display: inline-block;
background: var(--primary-red);
color: white;
padding: 8px 24px;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
margin-bottom: 30px;
}
h1 {
font-size: clamp(2.5rem, 9vw, 7.5rem);
line-height: 0.9;
font-weight: 500;
font-family: "Cal Sans";
margin-bottom: 40px;
letter-spacing: -0.05em;
}
.body-text {
font-size: 1.25rem;
line-height: 1.6;
color: var(--text-muted);
max-width: 750px;
margin: 0 auto;
}
.body-text p { margin-bottom: 24px; }
.highlight-red { color: var(--primary-red); font-weight: 600; }
.footer-tagline {
font-size: 1rem;
font-weight: 500;
margin-bottom: 20px;
color: var(--text-muted);
}
.arrow-btn {
width: 60px; height: 60px;
background: black; color: white;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto; cursor: pointer;
}
</style>
</head>
<body>
<canvas id="webgl-canvas"></canvas>
<div class="ui-overlay">
<nav class="steps">
<span class="step" data-content="vision">VISION</span>
<span class="step" data-content="strategy">STRATEGY</span>
<span class="step active" data-content="zero-one">0-1</span>
<span class="step" data-content="scale">SCALE</span>
</nav>
<div class="main-content">
<div class="badge animate-item" id="content-badge">Founding Design</div>
<h1 class="animate-item" id="content-title">Zero to One.<br>Chaos to<br>Craft.</h1>
<div class="body-text" id="content-body">
<p class="animate-item">Building in the early stages isn't about polish—it's about survival. Founding designers don't just push pixels; they define the core soul of the product.</p>
<p class="animate-item">It’s about making the intangible tangible. <span class="highlight-red">Ship, learn, and iterate.</span> In a startup, design is a competitive advantage, not a final step.</p>
<p class="animate-item">We’re building for the bold, the messy, and the relentless. This is where world-changing products begin.</p>
</div>
</div>
<footer class="animate-item">
<p class="footer-tagline" id="content-footer">Join the cohort of startup architects.</p>
<div class="arrow-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
const pageData = {
"vision": {
badge: "Vision",
title: "See What<br>Others<br>Miss.",
body: `<p class="animate-item">Vision is the ability to see the finished cathedral while you're still clearing the brush. It's the North Star that keeps the team moving through uncertainty.</p>
<p class="animate-item">We don't just build features; we build <span class="highlight-red">conviction.</span> A founding designer’s vision is the blueprint for the entire ecosystem.</p>
<p class="animate-item">You are the keeper of the "Why." While others focus on the present, you are designing for the next three years of growth.</p>`,
footer: "Design the future, then build it."
},
"strategy": {
badge: "Strategy",
title: "Thinking<br>Before<br>Doing.",
body: `<p class="animate-item">Strategy is the bridge between a great idea and a great product. It's about knowing what to build, and more importantly, what to leave out.</p>
<p class="animate-item">Design strategy is business strategy. <span class="highlight-red">Outcome over output.</span> We align user needs with technical feasibility to find the path.</p>
<p class="animate-item">Every decision is a gamble; strategy ensures you are playing with the best possible odds in a crowded marketplace.</p>`,
footer: "Every pixel must have a purpose."
},
"zero-one": {
badge: "Founding Design",
title: "Zero to One.<br>Chaos to<br>Craft.",
body: `<p class="animate-item">Building in the early stages isn't about polish—it's about survival. Founding designers don't just push pixels; they define the core soul of the product.</p>
<p class="animate-item">It’s about making the intangible tangible. <span class="highlight-red">Ship, learn, and iterate.</span> In a startup, design is a competitive advantage, not a final step.</p>
<p class="animate-item">We’re building for the bold, the messy, and the relentless. This is where world-changing products begin.</p>`,
footer: "Join the cohort of startup architects."
},
"scale": {
badge: "Scale",
title: "Craft at<br>System<br>Scale.",
body: `<p class="animate-item">Scaling is the art of maintaining soul while adding complexity. It's building systems that empower others to create without losing the original vision.</p>
<p class="animate-item">From components to culture. <span class="highlight-red">Standardize to innovate.</span> Scaling design means moving from building a product to building a platform.</p>
<p class="animate-item">As the team grows, your role shifts from doing the work to defining how the work is done across the entire organization.</p>`,
footer: "Grow the impact, keep the quality."
}
};
// --- WebGL Setup (Restored Ring) ---
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#webgl-canvas'), antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
const grid = new THREE.GridHelper(50, 50, 0xdddddd, 0xeeeeee);
grid.rotation.x = Math.PI / 2;
scene.add(grid);
// RESTORED RING
const ring = new THREE.Mesh(
new THREE.RingGeometry(8, 8.02, 100),
new THREE.MeshBasicMaterial({ color: 0xdddddd, side: THREE.DoubleSide })
);
scene.add(ring);
camera.position.z = 15;
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (e) => {
mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
mouseY = (e.clientY / window.innerHeight - 0.5) * 2;
});
function animate() {
requestAnimationFrame(animate);
// Added parallax rotation to match original feel
scene.rotation.y += (mouseX * 0.1 - scene.rotation.y) * 0.05;
scene.rotation.x += (-mouseY * 0.1 - scene.rotation.x) * 0.05;
renderer.render(scene, camera);
}
animate();
// --- Content Update Logic ---
function updateContent(key) {
const data = pageData[key];
const items = document.querySelectorAll('.animate-item, footer');
gsap.to(items, {
opacity: 0,
y: -20,
filter: "blur(10px)",
duration: 0.4,
stagger: 0.05,
onComplete: () => {
document.getElementById('content-badge').innerHTML = data.badge;
document.getElementById('content-title').innerHTML = data.title;
document.getElementById('content-body').innerHTML = data.body;
document.getElementById('content-footer').innerHTML = data.footer;
const newItems = document.querySelectorAll('.animate-item, footer');
gsap.fromTo(newItems,
{ opacity: 0, y: 30, filter: "blur(10px)" },
{ opacity: 1, y: 0, filter: "blur(0px)", duration: 1, stagger: 0.1, ease: "power4.out" }
);
}
});
}
document.querySelectorAll('.step').forEach(btn => {
btn.addEventListener('click', () => {
if(btn.classList.contains('active')) return;
document.querySelector('.step.active').classList.remove('active');
btn.classList.add('active');
updateContent(btn.dataset.content);
});
});
window.addEventListener('load', () => {
gsap.to(".animate-item, footer", {
opacity: 1,
y: 0,
filter: "blur(0px)",
stagger: 0.15,
duration: 1.2,
ease: "power3.out"
});
});
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>“Create a "Founding Design - The Movement" component. Use Three.js for 3D WebGL rendering, GSAP for advanced animations. Use WebGL for GPU-accelerated rendering. Apply hover transitions. Color palette: #e31e24, #1a1a1a, #666, #f8f8f8. Layout: Flexbox, full-screen fixed canvas background, full-viewport sizing. Interactivity: mouse tracking, click interactions, continuous animation loop, responsive resize handling.”