<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sōra - Seamless Polar Metallic</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"></script> <style> :root { --bg: #020202; --text: #ffffff; --dim: #888; } body, html { margin: 0; padding: 0; background-color: var(--bg); font-family: 'Inter', sans-serif; color: var(--text); height: 100%; overflow: hidden; } #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: radial-gradient(circle at 85% 40%, #0d1a2b 0%, #020202 65%); } .glass-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 45vh; z-index: 5; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.01) 0%, rgba(0,0,0,0) 100%); backdrop-filter: blur(65px) saturate(150%); -webkit-backdrop-filter: blur(65px) saturate(150%); border-top: 1px solid rgba(255, 255, 255, 0.06); pointer-events: none; } .ui-layer { position: relative; z-index: 10; padding: 0 8% 60px 8%; height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; pointer-events: none; } .cta-section { margin-bottom: 110px; pointer-events: auto; } .cta-section h2 { font-size: clamp(44px, 6vw, 68px); font-weight: 400; margin: 10px 0 32px; letter-spacing: -2.5px; } .btn-start { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.2); padding: 14px 34px; cursor: pointer; position: relative; font-size: 14px; letter-spacing: 0.5px; } .btn-start::before { content:''; position:absolute; top:-1px; left:-1px; width:6px; height:6px; border-top:1px solid #fff; border-left:1px solid #fff; opacity: 0.4; } .btn-start::after { content:''; position:absolute; bottom:-1px; right:-1px; width:6px; height:6px; border-bottom:1px solid #fff; border-right:1px solid #fff; opacity: 0.4; } .links-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 80px; padding-top: 50px; pointer-events: auto; } .nav-col h4 { color: var(--dim); font-size: 11px; margin-bottom: 22px; text-transform: uppercase; letter-spacing: 2px; } .nav-col ul { list-style: none; padding: 0; margin: 0; } .nav-col li { margin-bottom: 12px; font-size: 14px; opacity: 0.65; transition: opacity 0.2s; cursor: pointer; } .nav-col li:hover { opacity: 1; } .footer-bottom { display: flex; justify-content: space-between; margin-top: 80px; font-size: 12px; color: #333; border-top: 1px solid rgba(255,255,255,0.04); padding-top: 30px; pointer-events: auto; } </style> </head> <body> <div id="canvas-container"></div> <div class="glass-overlay"></div> <div class="ui-layer"> <div class="cta-section"><p style="color:var(--dim)">Get Early Access</p><h2>Ready to step in?</h2><button class="btn-start">Start Building</button></div> <div class="links-grid"> <div class="brand-col"> <h3 style="font-size: 24px; margin:0 0 16px 0; font-weight: 500;">※ Sōra</h3> <p style="color:var(--dim); font-size:14px; line-height:1.7; max-width:320px;">Infrastructure for the next generation of applications.</p> </div> <div class="nav-col"><h4>Product</h4><ul><li>Overview</li><li>Features</li><li>Roadmap</li></ul></div> <div class="nav-col"><h4>Resources</h4><ul><li>Blog</li><li>Community</li><li>API Docs</li></ul></div> </div> <div class="footer-bottom"><span>© 2026 Sōra. All rights reserved.</span><div>Privacy Policy  •  Terms of Service</div></div> </div> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); document.getElementById('canvas-container').appendChild(renderer.domElement); // Increased segments for a smoother, solid surface const geometry = new THREE.BufferGeometry(); const segments = 400, widthSegments = 100; const positions = [], uvs = []; for (let i = 0; i <= segments; i++) { const u = (i / segments) * Math.PI * 2; for (let j = 0; j <= widthSegments; j++) { const v = (j / widthSegments - 0.5) * 8.5; const x = (10 + v * Math.cos(u / 2)) * Math.cos(u); const y = (10 + v * Math.cos(u / 2)) * Math.sin(u); const z = v * Math.sin(u / 2); positions.push(x, y, z); uvs.push(i / segments, j / widthSegments); } } const indices = []; for (let i = 0; i < segments; i++) { for (let j = 0; j < widthSegments; j++) { const a = i * (widthSegments + 1) + j, b = (i + 1) * (widthSegments + 1) + j; const c = (i + 1) * (widthSegments + 1) + (j + 1), d = i * (widthSegments + 1) + (j + 1); indices.push(a, b, d, b, c, d); } } geometry.setIndex(indices); geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); geometry.computeVertexNormals(); const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 } }, side: THREE.DoubleSide, vertexShader: ` varying vec3 vPos; varying vec3 vNormal; varying vec3 vViewPos; void main() { vPos = position; vNormal = normalize(normalMatrix * normal); vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vViewPos = -mvPosition.xyz; gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` varying vec3 vPos; varying vec3 vNormal; varying vec3 vViewPos; uniform float uTime; float random(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec3 colOrange = vec3(0.98, 0.42, 0.12); vec3 colTeal = vec3(0.12, 0.75, 0.82); vec3 colDark = vec3(0.01, 0.04, 0.12); // POLAR COORDINATES for seamless blend // This calculates color based on the actual geometry angle float angle = atan(vPos.y, vPos.x); float blend = sin(angle + uTime * 0.4) * 0.5 + 0.5; vec3 base = mix(colOrange, colTeal, blend); // Add darker metallic core depth float depth = cos(angle * 2.0 - uTime * 0.2) * 0.5 + 0.5; base = mix(base, colDark, depth * 0.35); // METALLIC LIGHTING vec3 N = normalize(vNormal); vec3 V = normalize(vViewPos); vec3 L = normalize(vec3(8.0, 12.0, 10.0)); // Specular highlight (Shininess) vec3 H = normalize(L + V); float spec = pow(max(dot(N, H), 0.0), 95.0); // Fresnel (Edge brightness) float fresnel = pow(1.0 - max(dot(N, V), 0.0), 3.5); // FINE METALLIC GRAIN float grain = random(vPos.xy * 120.0 + uTime * 0.01); vec3 final = base + (spec * 0.6) + (fresnel * 0.45); final *= (0.88 + grain * 0.22); // Apply as surface texture gl_FragColor = vec4(final, 1.0); } ` }); const ribbon = new THREE.Mesh(geometry, material); ribbon.scale.set(4.6, 4.6, 4.6); ribbon.position.set(22, 6, -35); ribbon.rotation.set(Math.PI / 2.45, -Math.PI / 7, Math.PI / 4); scene.add(ribbon); camera.position.z = 60; function animate(time) { material.uniforms.uTime.value = time * 0.001; ribbon.rotation.z += 0.00012; // Slow majestic drift renderer.render(scene, camera); requestAnimationFrame(animate); } window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); animate(0); </script> </body> </html>

Code & assets

Design System