<!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>“Create a "Energy Core - Final Scaled" component. Use Three.js for 3D WebGL rendering. Implement custom GLSL shaders for visual effects. Apply glass-morphism / backdrop blur, gradients, layered shadows. Layout: Flexbox. Interactivity: continuous animation loop, responsive resize handling.”