<!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>“Create a "Sōra - Seamless Polar Metallic" component. Use Three.js for 3D WebGL rendering. Implement custom GLSL shaders for visual effects. Apply glass-morphism / backdrop blur, gradients, hover transitions. Color palette: #020202, #ffffff, #888. Layout: CSS Grid, Flexbox, full-viewport sizing. Interactivity: continuous animation loop, responsive resize handling.”