<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Energy Core - Final Scaled</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #030108; display: flex; justify-content: center; align-items: center; font-family: 'Cal Sans', sans-serif; } h2{ font-size: 64px !important; line-height: 60px; } p{ font-family: "Geist Sans", sans-serif; } #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .card { position: relative; z-index: 10; /* Scaled 1.2x (400px * 1.2 = 480px) */ width: 550px; height: 550px; /* Restored Frosted Glass Semi-Transparency */ background: linear-gradient(135deg, rgba(60, 20, 140, 0.45), rgba(20, 10, 60, 0.6)); backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); border-radius: 75px; border: 1px solid rgba(255, 255, 255, 0.15); padding: 60px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; color: white; overflow: hidden; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 12px); z-index: -1; } .card-title { font-size: 38px; margin: 0 0 15px 0; font-weight: 500; letter-spacing: -0.8px; } .card-description { font-size: 16px; line-height: 1.6; opacity: 0.7; max-width: 340px; } .logo { position: absolute; top: 60px; right: 60px; width: 55px; height: 55px; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 50%; } </style> </head> <body> <div id="canvas-container"></div> <div class="card"> <div class="logo"></div> <div class="card-number" style="opacity: 0.5; font-size: 14px; margin-bottom: 10px;">01</div> <h2 class="card-title">Context—Aware Focus</h2> <p class="card-description"> Automatically silences notifications and prioritizes deep-work tasks based on your current project timeline and cognitive load. </p> </div> <script id="vertexShader" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform float time; uniform vec2 resolution; varying vec2 vUv; float sdRoundedBox(vec2 p, vec2 b, vec4 r) { r.xy = (p.x > 0.0) ? r.xy : r.zw; r.x = (p.y > 0.0) ? r.x : r.y; vec2 q = abs(p) - b + r.x; return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x; } void main() { vec2 p = vUv * 2.0 - 1.0; p.x *= resolution.x / resolution.y; // LIQUID FLOW float flow = sin(p.y * 3.5 - time * 2.5) * 0.04; float lx = p.x + flow; // SCALED CARD SDF (0.46 matches the 1.2x CSS scale) vec2 cardSize = vec2(0.46, 0.46); float cardDist = sdRoundedBox(p, cardSize, vec4(0.14)); // WRAP LOGIC float proximity = smoothstep(0.5, -0.05, cardDist); float beamExpansion = pow(proximity, 2.8) * 0.6; float beamX = abs(lx) / (1.0 + beamExpansion * 25.0); // BLOOM float core = exp(-beamX / 0.022); float innerGlow = exp(-beamX / 0.1) * 0.9; float outerGlow = exp(-beamX / 0.35) * 0.5; // RIM CLING (Zero Gap) float rimSplash = smoothstep(0.18, -0.1, cardDist) * exp(-abs(lx) * 2.5); rimSplash *= smoothstep(0.12, -0.06, abs(cardDist)); // DEEP MASK float mask = smoothstep(-0.09, -0.04, cardDist); vec3 purple = vec3(0.6, 0.2, 1.0); vec3 blue = vec3(0.3, 0.5, 1.0); vec3 white = vec3(1.0, 0.98, 1.0); vec3 color = (purple * innerGlow) + (blue * outerGlow) + (white * core); color += (white + purple * 0.5) * rimSplash * 2.5; gl_FragColor = vec4(color * mask, 1.0); } </script> <script> let scene, camera, renderer, beamMesh, stars; function init() { scene = new THREE.Scene(); camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10); camera.position.z = 1; renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('canvas-container').appendChild(renderer.domElement); // THE ENERGY BEAM const geometry = new THREE.PlaneGeometry(2, 2); const material = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) } }, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent, transparent: true, blending: THREE.AdditiveBlending }); beamMesh = new THREE.Mesh(geometry, material); scene.add(beamMesh); // BACKGROUND OUTER SPACE (STARS) const starGeo = new THREE.BufferGeometry(); const starPositions = []; for (let i = 0; i < 1000; i++) { starPositions.push((Math.random() - 0.5) * 2.5, (Math.random() - 0.5) * 2.5, 0); } starGeo.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3)); const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.003, transparent: true, opacity: 0.6 }); stars = new THREE.Points(starGeo, starMat); scene.add(stars); window.addEventListener('resize', onResize); animate(); } function onResize() { renderer.setSize(window.innerWidth, window.innerHeight); beamMesh.material.uniforms.resolution.value.set(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const t = performance.now() * 0.001; beamMesh.material.uniforms.time.value = t; // Subtle star rotation stars.rotation.z = t * 0.01; renderer.render(scene, camera); } init(); </script> </body> </html>

Code & assets

Design System