<!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>

Code & assets

Design System