https://motioncanvas.online/preview/quantum-orbital-grid
Scroll Down
Quantum Orbital Grid
🔵 InteractiveA high-performance quantum cosmic universe featuring interlocking 3D orbital rings spinning on multiple axes over a deep infinite scrolling perspective grid, with buttery-smooth mouse parallax.
#3D#interactive#space#nebula#canvas#quantum#glowing-rings
Advertisement
Sponsor Advertisement
728 × 90 | Responsive Banner
Responsive Horizontal Leaderboard
Slot ID: ca-pub-detail-below-preview
Google AdSense Placeholder
Interactive Settings
Motion PresetsCustom Tuning
Animation Speed1.0x
Blur (Aesthetic diffusion)0px
Layer Opacity100%
Scale Zoom1.0x
Rotation Angle0°
Advertisement
Sponsor Advertisement
300 × 250 | Rectangle
Medium Rectangle Block
Slot ID: ca-pub-detail-after-customization
Google AdSense Placeholder
Quick Copy Actions
Download File Packages
Keyboard Shortcuts
Space Play/Pause
F Fullscreen
R Reset Slider
C Copy Code
Advertisement
Sponsor Advertisement
728 × 90 | Responsive Banner
Responsive Horizontal Leaderboard
Slot ID: ca-pub-detail-before-related
Google AdSense Placeholder
More in 3D Interactive
Loading Canvas Shader...
🔵 Interactive
3D Isometric Block Flow
Floating translucent 3D isometric cubes drifting and spinning in a true three-dimensional viewport, tilting dynamically with the cursor.
Loading Canvas Shader...
🔵 Interactive
3D Celestial Particle Vortex
Multi-layered depth-staggered star clusters rotating in opposing directions that shift with parallax 3D depth based on mouse coords.
Loading Canvas Shader...
🔵 Interactive
3D Tunnel of Infinite Lines
An interactive, deep three-dimensional warp tunnel with glowing concentric lines that rotate and zoom towards the screen in real 3D parallax.
Quantum Orbital Grid - HTML5 Canvas & JavaScript 3D Interactive background for React & Tailwind
Integrate the Quantum Orbital Grid directly into your website. This asset is rendered using HTML5 Canvas 2D render loop. It is optimized for zero layout-shifts and runs with high-performance hardware-accelerated processing.
⚡ Performance Specifications
- Render Mode: INTERACTIVE (HTML5 Canvas & JavaScript)
- Fluidity: Locked at 60fps dynamic loop
- Bundle Footprint: Zero external NPM dependencies
- SEO Indexing status: 100% Crawlable static semantic HTML
🛠️ Integration Capabilities
Our templates expose inline design tokens like --color-1 and --color-2 for infinite color palettes. This template is designed to fit inside hero elements, full-screen landing pages, and interactive presentation cards.
Technical Code Reference & Syntaxes for Googlebot & Crawlers
The snippets below display the direct, unminified source code utilized for rendering this background.
HTML & Inline CSS Snippet (Vanilla)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Orbital Grid</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #09090b;
}
.quantum-orbital-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #05020d;
overflow: hidden;
}
#canvas-quantum-orbital-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
</style>
</head>
<body>
<div class="quantum-orbital-container">
<canvas id="canvas-quantum-orbital-grid"></canvas>
</div>
<script>
(function() {
const canvas = document.getElementById('canvas-quantum-orbital-grid');
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
const fov = 400;
const coreZ = 240;
let camRotX = 0;
let camRotY = 0;
let targetCamRotX = 0;
let targetCamRotY = 0;
let gridOffset = 0;
const gridSpeed = 1.1;
const gridSpacing = 40;
const gridWidth = 800;
const groundY = 120;
const ceilingY = -120;
const ring1 = {
radius: 110,
color: 'rgba(24, 197, 255, ',
rx: 0, ry: 0, rz: 0,
speedX: 0.005, speedY: 0.010, speedZ: 0.003,
numPoints: 120
};
const ring2 = {
radius: 85,
color: 'rgba(124, 92, 255, ',
rx: 0, ry: 0, rz: 0,
speedX: -0.007, speedY: 0.006, speedZ: 0.004,
numPoints: 120
};
const ring3 = {
radius: 60,
color: 'rgba(255, 46, 147, ',
rx: 0, ry: 0, rz: 0,
speedX: 0.004, speedY: -0.008, speedZ: 0.007,
numPoints: 120
};
const numParticles = 80;
const particles = [];
for (let i = 0; i < numParticles; i++) {
const u = Math.random();
const v = Math.random();
const theta = u * 2.0 * Math.PI;
const phi = Math.acos(2.0 * v - 1.0);
const r = Math.pow(Math.random(), 1.5) * 45;
const x = r * Math.sin(phi) * Math.cos(theta);
const y = r * Math.sin(phi) * Math.sin(theta);
const z = r * Math.cos(phi);
const colors = [
'rgba(24, 197, 255, ',
'rgba(124, 92, 255, ',
'rgba(255, 46, 147, ',
'rgba(255, 255, 255, '
];
const colorBase = colors[Math.floor(Math.random() * colors.length)];
particles.push({
x: x, y: y, z: z,
size: 0.5 + Math.random() * 1.5,
speed: 0.008 + Math.random() * 0.016,
phase: Math.random() * Math.PI * 2,
color: colorBase
});
}
function resize() {
const rect = canvas.parentNode ? canvas.parentNode.getBoundingClientRect() : null;
width = canvas.width = rect ? rect.width : window.innerWidth;
height = canvas.height = rect ? rect.height : window.innerHeight;
}
function onMouseMove(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
}
function onMouseLeave() {
targetCamRotX = 0;
targetCamRotY = 0;
}
function onTouchMove(e) {
if (e.touches.length > 0) {
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
}
}
window.addEventListener('resize', resize);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseleave', onMouseLeave);
window.addEventListener('touchmove', onTouchMove, { passive: true });
window.addEventListener('touchstart', onTouchMove, { passive: true });
window.addEventListener('touchend', onMouseLeave);
window.addEventListener('message', function(e) {
if (e.data) {
if (e.data.type === 'mousemove') {
const x = e.data.x;
const y = e.data.y;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
} else if (e.data.type === 'mouseleave') {
onMouseLeave();
}
}
});
let observer;
if (canvas.parentNode) {
observer = new MutationObserver(resize);
observer.observe(canvas.parentNode, { attributes: true });
}
resize();
function project(x, y, z) {
const dx = x;
const dy = y;
const dz = z - coreZ;
const cosX = Math.cos(camRotX);
const sinX = Math.sin(camRotX);
const dy1 = dy * cosX - dz * sinX;
const dz1 = dy * sinX + dz * cosX;
const cosY = Math.cos(camRotY);
const sinY = Math.sin(camRotY);
const dx2 = dx * cosY + dz1 * sinY;
const dz2 = -dx * sinY + dz1 * cosY;
const finalZ = dz2 + coreZ;
if (finalZ <= 5) return null;
const px = width / 2 + (dx2 * fov) / finalZ;
const py = height / 2 + (dy1 * fov) / finalZ;
return { x: px, y: py, z: finalZ };
}
function rotateRingPoint(x, y, z, rx, ry, rz) {
const cx = Math.cos(rx), sx = Math.sin(rx);
const y1 = y * cx - z * sx;
const z1 = y * sx + z * cx;
const x1 = x;
const cy = Math.cos(ry), sy = Math.sin(ry);
const x2 = x1 * cy - z1 * sy;
const z2 = x1 * sy + z1 * cy;
const y2 = y1;
const cz = Math.cos(rz), sz = Math.sin(rz);
const x3 = x2 * cz - y2 * sz;
const y3 = x2 * sz + y2 * cz;
const z3 = z2;
return { x: x3, y: y3, z: z3 };
}
let time = 0;
let active = true;
function render() {
if (!active) return;
if (!canvas.isConnected) {
cleanup();
return;
}
time += 0.012;
camRotX += (targetCamRotX - camRotX) * 0.05;
camRotY += (targetCamRotY - camRotY) * 0.05;
ctx.fillStyle = '#05020d';
ctx.fillRect(0, 0, width, height);
const cxVal = width / 2;
const cyVal = height / 2;
const bgGlow = ctx.createRadialGradient(cxVal, cyVal, 0, cxVal, cyVal, Math.max(width, height) * 0.6);
bgGlow.addColorStop(0, '#11052c');
bgGlow.addColorStop(0.5, '#060113');
bgGlow.addColorStop(1, '#020006');
ctx.fillStyle = bgGlow;
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'lighter';
gridOffset -= gridSpeed;
if (gridOffset <= -gridSpacing) {
gridOffset += gridSpacing;
}
const minZ = 12;
const maxZ = 450;
ctx.lineWidth = 1;
for (let zVal = minZ + ((gridOffset - minZ) % gridSpacing + gridSpacing) % gridSpacing; zVal < maxZ; zVal += gridSpacing) {
const fog = Math.max(0, Math.min(1, (maxZ - zVal) / (maxZ - minZ)));
const alpha = Math.pow(fog, 1.8) * 0.28;
const pG1 = project(-gridWidth / 2, groundY, zVal);
const pG2 = project(gridWidth / 2, groundY, zVal);
if (pG1 && pG2) {
ctx.beginPath();
ctx.moveTo(pG1.x, pG1.y);
ctx.lineTo(pG2.x, pG2.y);
ctx.strokeStyle = "rgba(24, 197, 255, " + alpha + ")";
ctx.stroke();
}
const pC1 = project(-gridWidth / 2, ceilingY, zVal);
const pC2 = project(gridWidth / 2, ceilingY, zVal);
if (pC1 && pC2) {
ctx.beginPath();
ctx.moveTo(pC1.x, pC1.y);
ctx.lineTo(pC2.x, pC2.y);
ctx.strokeStyle = "rgba(124, 92, 255, " + (alpha * 0.7) + ")";
ctx.stroke();
}
}
const numLines = 15;
const stepX = gridWidth / (numLines - 1);
for (let i = 0; i < numLines; i++) {
const xVal = -gridWidth / 2 + i * stepX;
const segs = 20;
const dz = (maxZ - minZ) / segs;
for (let j = 0; j < segs; j++) {
const z1 = minZ + j * dz;
const z2 = z1 + dz;
const avgZ = (z1 + z2) / 2;
const fog = Math.max(0, Math.min(1, (maxZ - avgZ) / (maxZ - minZ)));
const alphaG = Math.pow(fog, 1.8) * 0.24;
const alphaC = Math.pow(fog, 1.8) * 0.16;
const pG1 = project(xVal, groundY, z1);
const pG2 = project(xVal, groundY, z2);
if (pG1 && pG2) {
ctx.beginPath();
ctx.moveTo(pG1.x, pG1.y);
ctx.lineTo(pG2.x, pG2.y);
ctx.strokeStyle = "rgba(24, 197, 255, " + alphaG + ")";
ctx.stroke();
}
const pC1 = project(xVal, ceilingY, z1);
const pC2 = project(xVal, ceilingY, z2);
if (pC1 && pC2) {
ctx.beginPath();
ctx.moveTo(pC1.x, pC1.y);
ctx.lineTo(pC2.x, pC2.y);
ctx.strokeStyle = "rgba(124, 92, 255, " + alphaC + ")";
ctx.stroke();
}
}
}
const coreProj = project(0, 0, coreZ);
if (coreProj) {
const glowRadius = (130 + Math.sin(time * 2.5) * 15) * (fov / coreProj.z);
if (glowRadius > 0) {
const radGlow = ctx.createRadialGradient(coreProj.x, coreProj.y, 0, coreProj.x, coreProj.y, glowRadius);
radGlow.addColorStop(0, 'rgba(124, 92, 255, 0.28)');
radGlow.addColorStop(0.4, 'rgba(24, 197, 255, 0.12)');
radGlow.addColorStop(0.7, 'rgba(255, 46, 147, 0.04)');
radGlow.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = radGlow;
ctx.beginPath();
ctx.arc(coreProj.x, coreProj.y, glowRadius, 0, Math.PI * 2);
ctx.fill();
}
}
ring1.rx += ring1.speedX; ring1.ry += ring1.speedY; ring1.rz += ring1.speedZ;
ring2.rx += ring2.speedX; ring2.ry += ring2.speedY; ring2.rz += ring2.speedZ;
ring3.rx += ring3.speedX; ring3.ry += ring3.speedY; ring3.rz += ring3.speedZ;
function drawRing(ring) {
const pts = [];
for (let i = 0; i <= ring.numPoints; i++) {
const theta = (i / ring.numPoints) * Math.PI * 2;
const lx = ring.radius * Math.cos(theta);
const ly = ring.radius * Math.sin(theta);
const lz = 0;
const rotated = rotateRingPoint(lx, ly, lz, ring.rx, ring.ry, ring.rz);
pts.push(rotated);
}
for (let i = 0; i < ring.numPoints; i++) {
const pt1 = pts[i];
const pt2 = pts[i + 1];
const p1 = project(pt1.x, pt1.y, pt1.z + coreZ);
const p2 = project(pt2.x, pt2.y, pt2.z + coreZ);
if (p1 && p2) {
const avgZ = (p1.z + p2.z) / 2;
const fog = Math.max(0, Math.min(1, (maxZ - avgZ) / (maxZ - minZ)));
const baseAlpha = Math.pow(fog, 1.2);
const pulseSpeed = 1.8;
const pulsePos = (time * pulseSpeed) % (2 * Math.PI);
const currentTheta = (i / ring.numPoints) * Math.PI * 2;
const diff = Math.abs(currentTheta - pulsePos);
const isPulse = diff < 0.25 || (2 * Math.PI - diff) < 0.25;
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
if (isPulse) {
ctx.lineWidth = 3.5;
ctx.strokeStyle = '#ffffff';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineWidth = 8.0;
ctx.strokeStyle = ring.color + (baseAlpha * 0.45) + ')';
ctx.stroke();
} else {
ctx.lineWidth = 4.0;
ctx.strokeStyle = ring.color + (baseAlpha * 0.16) + ')';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineWidth = 1.5;
ctx.strokeStyle = ring.color + (baseAlpha * 0.85) + ')';
ctx.stroke();
}
}
}
}
drawRing(ring1);
drawRing(ring2);
drawRing(ring3);
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
const cosSpeed = Math.cos(p.speed);
const sinSpeed = Math.sin(p.speed);
const nx = p.x * cosSpeed - p.z * sinSpeed;
const nz = p.x * sinSpeed + p.z * cosSpeed;
p.x = nx;
p.z = nz;
const proj = project(p.x, p.y, p.z + coreZ);
if (proj) {
const fog = Math.max(0, Math.min(1, (maxZ - proj.z) / (maxZ - minZ)));
const baseAlpha = Math.pow(fog, 1.2);
const size = p.size * (fov / proj.z) * (1.0 + Math.sin(time * 3 + p.phase) * 0.35);
if (size > 0.05) {
ctx.beginPath();
ctx.arc(proj.x, proj.y, size, 0, Math.PI * 2);
ctx.fillStyle = p.color + (baseAlpha * 0.85) + ')';
ctx.fill();
if (size > 1.2) {
ctx.beginPath();
ctx.arc(proj.x, proj.y, size * 2.5, 0, Math.PI * 2);
ctx.fillStyle = p.color + (baseAlpha * 0.18) + ')';
ctx.fill();
}
}
}
}
ctx.globalCompositeOperation = 'source-over';
requestAnimationFrame(render);
}
function cleanup() {
active = false;
window.removeEventListener('resize', resize);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseleave', onMouseLeave);
window.removeEventListener('touchmove', onTouchMove);
window.removeEventListener('touchstart', onTouchMove);
window.removeEventListener('touchend', onMouseLeave);
if (observer) {
observer.disconnect();
}
}
requestAnimationFrame(render);
})();
</script>
<script>
// Throttled interactive cursor coordinates mapping
(function() {
document.documentElement.style.setProperty('--mouse-x', '0');
document.documentElement.style.setProperty('--mouse-y', '0');
let targetX = 0, targetY = 0;
let currentX = 0, currentY = 0;
window.addEventListener('mousemove', (e) => {
targetX = (e.clientX / window.innerWidth) - 0.5;
targetY = (e.clientY / window.innerHeight) - 0.5;
});
window.addEventListener('mouseleave', () => {
targetX = 0;
targetY = 0;
});
function update() {
currentX += (targetX - currentX) * 0.08;
currentY += (targetY - currentY) * 0.08;
document.documentElement.style.setProperty('--mouse-x', currentX.toFixed(4));
document.documentElement.style.setProperty('--mouse-y', currentY.toFixed(4));
requestAnimationFrame(update);
}
requestAnimationFrame(update);
})();
</script>
</body>
</html>React Component Wrapper (TSX)
import React, { useEffect, useRef } from 'react';
export default function QuantumOrbitalGridBackground() {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
let targetX = 0, targetY = 0;
let currentX = 0, currentY = 0;
let frameId: number;
const handleMouseMove = (e: MouseEvent) => {
targetX = (e.clientX / window.innerWidth) - 0.5;
targetY = (e.clientY / window.innerHeight) - 0.5;
};
const handleMouseLeave = () => {
targetX = 0;
targetY = 0;
};
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseleave', handleMouseLeave);
const updateCoordinates = () => {
currentX += (targetX - currentX) * 0.08;
currentY += (targetY - currentY) * 0.08;
if (containerRef.current) {
containerRef.current.style.setProperty('--mouse-x', currentX.toFixed(4));
containerRef.current.style.setProperty('--mouse-y', currentY.toFixed(4));
}
frameId = requestAnimationFrame(updateCoordinates);
};
frameId = requestAnimationFrame(updateCoordinates);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseleave', handleMouseLeave);
cancelAnimationFrame(frameId);
};
}, []);
return (
<div
ref={containerRef}
style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}
>
<style dangerouslySetInnerHTML={{ __html: `
.quantum-orbital-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #05020d;
overflow: hidden;
}
#canvas-quantum-orbital-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
` }} />
{/* HTML Structure */}
<div
style={{ width: '100%', height: '100%' }}
dangerouslySetInnerHTML={{ __html: `
<div class="quantum-orbital-container">
<canvas id="canvas-quantum-orbital-grid"></canvas>
</div>
<script>
(function() {
const canvas = document.getElementById('canvas-quantum-orbital-grid');
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
const fov = 400;
const coreZ = 240;
let camRotX = 0;
let camRotY = 0;
let targetCamRotX = 0;
let targetCamRotY = 0;
let gridOffset = 0;
const gridSpeed = 1.1;
const gridSpacing = 40;
const gridWidth = 800;
const groundY = 120;
const ceilingY = -120;
const ring1 = {
radius: 110,
color: 'rgba(24, 197, 255, ',
rx: 0, ry: 0, rz: 0,
speedX: 0.005, speedY: 0.010, speedZ: 0.003,
numPoints: 120
};
const ring2 = {
radius: 85,
color: 'rgba(124, 92, 255, ',
rx: 0, ry: 0, rz: 0,
speedX: -0.007, speedY: 0.006, speedZ: 0.004,
numPoints: 120
};
const ring3 = {
radius: 60,
color: 'rgba(255, 46, 147, ',
rx: 0, ry: 0, rz: 0,
speedX: 0.004, speedY: -0.008, speedZ: 0.007,
numPoints: 120
};
const numParticles = 80;
const particles = [];
for (let i = 0; i < numParticles; i++) {
const u = Math.random();
const v = Math.random();
const theta = u * 2.0 * Math.PI;
const phi = Math.acos(2.0 * v - 1.0);
const r = Math.pow(Math.random(), 1.5) * 45;
const x = r * Math.sin(phi) * Math.cos(theta);
const y = r * Math.sin(phi) * Math.sin(theta);
const z = r * Math.cos(phi);
const colors = [
'rgba(24, 197, 255, ',
'rgba(124, 92, 255, ',
'rgba(255, 46, 147, ',
'rgba(255, 255, 255, '
];
const colorBase = colors[Math.floor(Math.random() * colors.length)];
particles.push({
x: x, y: y, z: z,
size: 0.5 + Math.random() * 1.5,
speed: 0.008 + Math.random() * 0.016,
phase: Math.random() * Math.PI * 2,
color: colorBase
});
}
function resize() {
const rect = canvas.parentNode ? canvas.parentNode.getBoundingClientRect() : null;
width = canvas.width = rect ? rect.width : window.innerWidth;
height = canvas.height = rect ? rect.height : window.innerHeight;
}
function onMouseMove(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
}
function onMouseLeave() {
targetCamRotX = 0;
targetCamRotY = 0;
}
function onTouchMove(e) {
if (e.touches.length > 0) {
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
}
}
window.addEventListener('resize', resize);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseleave', onMouseLeave);
window.addEventListener('touchmove', onTouchMove, { passive: true });
window.addEventListener('touchstart', onTouchMove, { passive: true });
window.addEventListener('touchend', onMouseLeave);
window.addEventListener('message', function(e) {
if (e.data) {
if (e.data.type === 'mousemove') {
const x = e.data.x;
const y = e.data.y;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
} else if (e.data.type === 'mouseleave') {
onMouseLeave();
}
}
});
let observer;
if (canvas.parentNode) {
observer = new MutationObserver(resize);
observer.observe(canvas.parentNode, { attributes: true });
}
resize();
function project(x, y, z) {
const dx = x;
const dy = y;
const dz = z - coreZ;
const cosX = Math.cos(camRotX);
const sinX = Math.sin(camRotX);
const dy1 = dy * cosX - dz * sinX;
const dz1 = dy * sinX + dz * cosX;
const cosY = Math.cos(camRotY);
const sinY = Math.sin(camRotY);
const dx2 = dx * cosY + dz1 * sinY;
const dz2 = -dx * sinY + dz1 * cosY;
const finalZ = dz2 + coreZ;
if (finalZ <= 5) return null;
const px = width / 2 + (dx2 * fov) / finalZ;
const py = height / 2 + (dy1 * fov) / finalZ;
return { x: px, y: py, z: finalZ };
}
function rotateRingPoint(x, y, z, rx, ry, rz) {
const cx = Math.cos(rx), sx = Math.sin(rx);
const y1 = y * cx - z * sx;
const z1 = y * sx + z * cx;
const x1 = x;
const cy = Math.cos(ry), sy = Math.sin(ry);
const x2 = x1 * cy - z1 * sy;
const z2 = x1 * sy + z1 * cy;
const y2 = y1;
const cz = Math.cos(rz), sz = Math.sin(rz);
const x3 = x2 * cz - y2 * sz;
const y3 = x2 * sz + y2 * cz;
const z3 = z2;
return { x: x3, y: y3, z: z3 };
}
let time = 0;
let active = true;
function render() {
if (!active) return;
if (!canvas.isConnected) {
cleanup();
return;
}
time += 0.012;
camRotX += (targetCamRotX - camRotX) * 0.05;
camRotY += (targetCamRotY - camRotY) * 0.05;
ctx.fillStyle = '#05020d';
ctx.fillRect(0, 0, width, height);
const cxVal = width / 2;
const cyVal = height / 2;
const bgGlow = ctx.createRadialGradient(cxVal, cyVal, 0, cxVal, cyVal, Math.max(width, height) * 0.6);
bgGlow.addColorStop(0, '#11052c');
bgGlow.addColorStop(0.5, '#060113');
bgGlow.addColorStop(1, '#020006');
ctx.fillStyle = bgGlow;
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'lighter';
gridOffset -= gridSpeed;
if (gridOffset <= -gridSpacing) {
gridOffset += gridSpacing;
}
const minZ = 12;
const maxZ = 450;
ctx.lineWidth = 1;
for (let zVal = minZ + ((gridOffset - minZ) % gridSpacing + gridSpacing) % gridSpacing; zVal < maxZ; zVal += gridSpacing) {
const fog = Math.max(0, Math.min(1, (maxZ - zVal) / (maxZ - minZ)));
const alpha = Math.pow(fog, 1.8) * 0.28;
const pG1 = project(-gridWidth / 2, groundY, zVal);
const pG2 = project(gridWidth / 2, groundY, zVal);
if (pG1 && pG2) {
ctx.beginPath();
ctx.moveTo(pG1.x, pG1.y);
ctx.lineTo(pG2.x, pG2.y);
ctx.strokeStyle = "rgba(24, 197, 255, " + alpha + ")";
ctx.stroke();
}
const pC1 = project(-gridWidth / 2, ceilingY, zVal);
const pC2 = project(gridWidth / 2, ceilingY, zVal);
if (pC1 && pC2) {
ctx.beginPath();
ctx.moveTo(pC1.x, pC1.y);
ctx.lineTo(pC2.x, pC2.y);
ctx.strokeStyle = "rgba(124, 92, 255, " + (alpha * 0.7) + ")";
ctx.stroke();
}
}
const numLines = 15;
const stepX = gridWidth / (numLines - 1);
for (let i = 0; i < numLines; i++) {
const xVal = -gridWidth / 2 + i * stepX;
const segs = 20;
const dz = (maxZ - minZ) / segs;
for (let j = 0; j < segs; j++) {
const z1 = minZ + j * dz;
const z2 = z1 + dz;
const avgZ = (z1 + z2) / 2;
const fog = Math.max(0, Math.min(1, (maxZ - avgZ) / (maxZ - minZ)));
const alphaG = Math.pow(fog, 1.8) * 0.24;
const alphaC = Math.pow(fog, 1.8) * 0.16;
const pG1 = project(xVal, groundY, z1);
const pG2 = project(xVal, groundY, z2);
if (pG1 && pG2) {
ctx.beginPath();
ctx.moveTo(pG1.x, pG1.y);
ctx.lineTo(pG2.x, pG2.y);
ctx.strokeStyle = "rgba(24, 197, 255, " + alphaG + ")";
ctx.stroke();
}
const pC1 = project(xVal, ceilingY, z1);
const pC2 = project(xVal, ceilingY, z2);
if (pC1 && pC2) {
ctx.beginPath();
ctx.moveTo(pC1.x, pC1.y);
ctx.lineTo(pC2.x, pC2.y);
ctx.strokeStyle = "rgba(124, 92, 255, " + alphaC + ")";
ctx.stroke();
}
}
}
const coreProj = project(0, 0, coreZ);
if (coreProj) {
const glowRadius = (130 + Math.sin(time * 2.5) * 15) * (fov / coreProj.z);
if (glowRadius > 0) {
const radGlow = ctx.createRadialGradient(coreProj.x, coreProj.y, 0, coreProj.x, coreProj.y, glowRadius);
radGlow.addColorStop(0, 'rgba(124, 92, 255, 0.28)');
radGlow.addColorStop(0.4, 'rgba(24, 197, 255, 0.12)');
radGlow.addColorStop(0.7, 'rgba(255, 46, 147, 0.04)');
radGlow.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = radGlow;
ctx.beginPath();
ctx.arc(coreProj.x, coreProj.y, glowRadius, 0, Math.PI * 2);
ctx.fill();
}
}
ring1.rx += ring1.speedX; ring1.ry += ring1.speedY; ring1.rz += ring1.speedZ;
ring2.rx += ring2.speedX; ring2.ry += ring2.speedY; ring2.rz += ring2.speedZ;
ring3.rx += ring3.speedX; ring3.ry += ring3.speedY; ring3.rz += ring3.speedZ;
function drawRing(ring) {
const pts = [];
for (let i = 0; i <= ring.numPoints; i++) {
const theta = (i / ring.numPoints) * Math.PI * 2;
const lx = ring.radius * Math.cos(theta);
const ly = ring.radius * Math.sin(theta);
const lz = 0;
const rotated = rotateRingPoint(lx, ly, lz, ring.rx, ring.ry, ring.rz);
pts.push(rotated);
}
for (let i = 0; i < ring.numPoints; i++) {
const pt1 = pts[i];
const pt2 = pts[i + 1];
const p1 = project(pt1.x, pt1.y, pt1.z + coreZ);
const p2 = project(pt2.x, pt2.y, pt2.z + coreZ);
if (p1 && p2) {
const avgZ = (p1.z + p2.z) / 2;
const fog = Math.max(0, Math.min(1, (maxZ - avgZ) / (maxZ - minZ)));
const baseAlpha = Math.pow(fog, 1.2);
const pulseSpeed = 1.8;
const pulsePos = (time * pulseSpeed) % (2 * Math.PI);
const currentTheta = (i / ring.numPoints) * Math.PI * 2;
const diff = Math.abs(currentTheta - pulsePos);
const isPulse = diff < 0.25 || (2 * Math.PI - diff) < 0.25;
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
if (isPulse) {
ctx.lineWidth = 3.5;
ctx.strokeStyle = '#ffffff';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineWidth = 8.0;
ctx.strokeStyle = ring.color + (baseAlpha * 0.45) + ')';
ctx.stroke();
} else {
ctx.lineWidth = 4.0;
ctx.strokeStyle = ring.color + (baseAlpha * 0.16) + ')';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineWidth = 1.5;
ctx.strokeStyle = ring.color + (baseAlpha * 0.85) + ')';
ctx.stroke();
}
}
}
}
drawRing(ring1);
drawRing(ring2);
drawRing(ring3);
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
const cosSpeed = Math.cos(p.speed);
const sinSpeed = Math.sin(p.speed);
const nx = p.x * cosSpeed - p.z * sinSpeed;
const nz = p.x * sinSpeed + p.z * cosSpeed;
p.x = nx;
p.z = nz;
const proj = project(p.x, p.y, p.z + coreZ);
if (proj) {
const fog = Math.max(0, Math.min(1, (maxZ - proj.z) / (maxZ - minZ)));
const baseAlpha = Math.pow(fog, 1.2);
const size = p.size * (fov / proj.z) * (1.0 + Math.sin(time * 3 + p.phase) * 0.35);
if (size > 0.05) {
ctx.beginPath();
ctx.arc(proj.x, proj.y, size, 0, Math.PI * 2);
ctx.fillStyle = p.color + (baseAlpha * 0.85) + ')';
ctx.fill();
if (size > 1.2) {
ctx.beginPath();
ctx.arc(proj.x, proj.y, size * 2.5, 0, Math.PI * 2);
ctx.fillStyle = p.color + (baseAlpha * 0.18) + ')';
ctx.fill();
}
}
}
}
ctx.globalCompositeOperation = 'source-over';
requestAnimationFrame(render);
}
function cleanup() {
active = false;
window.removeEventListener('resize', resize);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseleave', onMouseLeave);
window.removeEventListener('touchmove', onTouchMove);
window.removeEventListener('touchstart', onTouchMove);
window.removeEventListener('touchend', onMouseLeave);
if (observer) {
observer.disconnect();
}
}
requestAnimationFrame(render);
})();
</script>
` }}
/>
</div>
);
}Next.js App Router Component (use client)
'use client';
import React, { useEffect, useRef } from 'react';
export default function QuantumOrbitalGridBackground() {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
let targetX = 0, targetY = 0;
let currentX = 0, currentY = 0;
let frameId: number;
const handleMouseMove = (e: MouseEvent) => {
targetX = (e.clientX / window.innerWidth) - 0.5;
targetY = (e.clientY / window.innerHeight) - 0.5;
};
const handleMouseLeave = () => {
targetX = 0;
targetY = 0;
};
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseleave', handleMouseLeave);
const updateCoordinates = () => {
currentX += (targetX - currentX) * 0.08;
currentY += (targetY - currentY) * 0.08;
if (containerRef.current) {
containerRef.current.style.setProperty('--mouse-x', currentX.toFixed(4));
containerRef.current.style.setProperty('--mouse-y', currentY.toFixed(4));
}
frameId = requestAnimationFrame(updateCoordinates);
};
frameId = requestAnimationFrame(updateCoordinates);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseleave', handleMouseLeave);
cancelAnimationFrame(frameId);
};
}, []);
return (
<div
ref={containerRef}
className="w-full h-full relative overflow-hidden"
>
<style dangerouslySetInnerHTML={{ __html: `
.quantum-orbital-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #05020d;
overflow: hidden;
}
#canvas-quantum-orbital-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
` }} />
{/* HTML Structure */}
<div
className="w-full h-full"
dangerouslySetInnerHTML={{ __html: `
<div class="quantum-orbital-container">
<canvas id="canvas-quantum-orbital-grid"></canvas>
</div>
<script>
(function() {
const canvas = document.getElementById('canvas-quantum-orbital-grid');
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
const fov = 400;
const coreZ = 240;
let camRotX = 0;
let camRotY = 0;
let targetCamRotX = 0;
let targetCamRotY = 0;
let gridOffset = 0;
const gridSpeed = 1.1;
const gridSpacing = 40;
const gridWidth = 800;
const groundY = 120;
const ceilingY = -120;
const ring1 = {
radius: 110,
color: 'rgba(24, 197, 255, ',
rx: 0, ry: 0, rz: 0,
speedX: 0.005, speedY: 0.010, speedZ: 0.003,
numPoints: 120
};
const ring2 = {
radius: 85,
color: 'rgba(124, 92, 255, ',
rx: 0, ry: 0, rz: 0,
speedX: -0.007, speedY: 0.006, speedZ: 0.004,
numPoints: 120
};
const ring3 = {
radius: 60,
color: 'rgba(255, 46, 147, ',
rx: 0, ry: 0, rz: 0,
speedX: 0.004, speedY: -0.008, speedZ: 0.007,
numPoints: 120
};
const numParticles = 80;
const particles = [];
for (let i = 0; i < numParticles; i++) {
const u = Math.random();
const v = Math.random();
const theta = u * 2.0 * Math.PI;
const phi = Math.acos(2.0 * v - 1.0);
const r = Math.pow(Math.random(), 1.5) * 45;
const x = r * Math.sin(phi) * Math.cos(theta);
const y = r * Math.sin(phi) * Math.sin(theta);
const z = r * Math.cos(phi);
const colors = [
'rgba(24, 197, 255, ',
'rgba(124, 92, 255, ',
'rgba(255, 46, 147, ',
'rgba(255, 255, 255, '
];
const colorBase = colors[Math.floor(Math.random() * colors.length)];
particles.push({
x: x, y: y, z: z,
size: 0.5 + Math.random() * 1.5,
speed: 0.008 + Math.random() * 0.016,
phase: Math.random() * Math.PI * 2,
color: colorBase
});
}
function resize() {
const rect = canvas.parentNode ? canvas.parentNode.getBoundingClientRect() : null;
width = canvas.width = rect ? rect.width : window.innerWidth;
height = canvas.height = rect ? rect.height : window.innerHeight;
}
function onMouseMove(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
}
function onMouseLeave() {
targetCamRotX = 0;
targetCamRotY = 0;
}
function onTouchMove(e) {
if (e.touches.length > 0) {
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
}
}
window.addEventListener('resize', resize);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseleave', onMouseLeave);
window.addEventListener('touchmove', onTouchMove, { passive: true });
window.addEventListener('touchstart', onTouchMove, { passive: true });
window.addEventListener('touchend', onMouseLeave);
window.addEventListener('message', function(e) {
if (e.data) {
if (e.data.type === 'mousemove') {
const x = e.data.x;
const y = e.data.y;
targetCamRotY = ((x / width) - 0.5) * 0.28;
targetCamRotX = -((y / height) - 0.5) * 0.28;
} else if (e.data.type === 'mouseleave') {
onMouseLeave();
}
}
});
let observer;
if (canvas.parentNode) {
observer = new MutationObserver(resize);
observer.observe(canvas.parentNode, { attributes: true });
}
resize();
function project(x, y, z) {
const dx = x;
const dy = y;
const dz = z - coreZ;
const cosX = Math.cos(camRotX);
const sinX = Math.sin(camRotX);
const dy1 = dy * cosX - dz * sinX;
const dz1 = dy * sinX + dz * cosX;
const cosY = Math.cos(camRotY);
const sinY = Math.sin(camRotY);
const dx2 = dx * cosY + dz1 * sinY;
const dz2 = -dx * sinY + dz1 * cosY;
const finalZ = dz2 + coreZ;
if (finalZ <= 5) return null;
const px = width / 2 + (dx2 * fov) / finalZ;
const py = height / 2 + (dy1 * fov) / finalZ;
return { x: px, y: py, z: finalZ };
}
function rotateRingPoint(x, y, z, rx, ry, rz) {
const cx = Math.cos(rx), sx = Math.sin(rx);
const y1 = y * cx - z * sx;
const z1 = y * sx + z * cx;
const x1 = x;
const cy = Math.cos(ry), sy = Math.sin(ry);
const x2 = x1 * cy - z1 * sy;
const z2 = x1 * sy + z1 * cy;
const y2 = y1;
const cz = Math.cos(rz), sz = Math.sin(rz);
const x3 = x2 * cz - y2 * sz;
const y3 = x2 * sz + y2 * cz;
const z3 = z2;
return { x: x3, y: y3, z: z3 };
}
let time = 0;
let active = true;
function render() {
if (!active) return;
if (!canvas.isConnected) {
cleanup();
return;
}
time += 0.012;
camRotX += (targetCamRotX - camRotX) * 0.05;
camRotY += (targetCamRotY - camRotY) * 0.05;
ctx.fillStyle = '#05020d';
ctx.fillRect(0, 0, width, height);
const cxVal = width / 2;
const cyVal = height / 2;
const bgGlow = ctx.createRadialGradient(cxVal, cyVal, 0, cxVal, cyVal, Math.max(width, height) * 0.6);
bgGlow.addColorStop(0, '#11052c');
bgGlow.addColorStop(0.5, '#060113');
bgGlow.addColorStop(1, '#020006');
ctx.fillStyle = bgGlow;
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'lighter';
gridOffset -= gridSpeed;
if (gridOffset <= -gridSpacing) {
gridOffset += gridSpacing;
}
const minZ = 12;
const maxZ = 450;
ctx.lineWidth = 1;
for (let zVal = minZ + ((gridOffset - minZ) % gridSpacing + gridSpacing) % gridSpacing; zVal < maxZ; zVal += gridSpacing) {
const fog = Math.max(0, Math.min(1, (maxZ - zVal) / (maxZ - minZ)));
const alpha = Math.pow(fog, 1.8) * 0.28;
const pG1 = project(-gridWidth / 2, groundY, zVal);
const pG2 = project(gridWidth / 2, groundY, zVal);
if (pG1 && pG2) {
ctx.beginPath();
ctx.moveTo(pG1.x, pG1.y);
ctx.lineTo(pG2.x, pG2.y);
ctx.strokeStyle = "rgba(24, 197, 255, " + alpha + ")";
ctx.stroke();
}
const pC1 = project(-gridWidth / 2, ceilingY, zVal);
const pC2 = project(gridWidth / 2, ceilingY, zVal);
if (pC1 && pC2) {
ctx.beginPath();
ctx.moveTo(pC1.x, pC1.y);
ctx.lineTo(pC2.x, pC2.y);
ctx.strokeStyle = "rgba(124, 92, 255, " + (alpha * 0.7) + ")";
ctx.stroke();
}
}
const numLines = 15;
const stepX = gridWidth / (numLines - 1);
for (let i = 0; i < numLines; i++) {
const xVal = -gridWidth / 2 + i * stepX;
const segs = 20;
const dz = (maxZ - minZ) / segs;
for (let j = 0; j < segs; j++) {
const z1 = minZ + j * dz;
const z2 = z1 + dz;
const avgZ = (z1 + z2) / 2;
const fog = Math.max(0, Math.min(1, (maxZ - avgZ) / (maxZ - minZ)));
const alphaG = Math.pow(fog, 1.8) * 0.24;
const alphaC = Math.pow(fog, 1.8) * 0.16;
const pG1 = project(xVal, groundY, z1);
const pG2 = project(xVal, groundY, z2);
if (pG1 && pG2) {
ctx.beginPath();
ctx.moveTo(pG1.x, pG1.y);
ctx.lineTo(pG2.x, pG2.y);
ctx.strokeStyle = "rgba(24, 197, 255, " + alphaG + ")";
ctx.stroke();
}
const pC1 = project(xVal, ceilingY, z1);
const pC2 = project(xVal, ceilingY, z2);
if (pC1 && pC2) {
ctx.beginPath();
ctx.moveTo(pC1.x, pC1.y);
ctx.lineTo(pC2.x, pC2.y);
ctx.strokeStyle = "rgba(124, 92, 255, " + alphaC + ")";
ctx.stroke();
}
}
}
const coreProj = project(0, 0, coreZ);
if (coreProj) {
const glowRadius = (130 + Math.sin(time * 2.5) * 15) * (fov / coreProj.z);
if (glowRadius > 0) {
const radGlow = ctx.createRadialGradient(coreProj.x, coreProj.y, 0, coreProj.x, coreProj.y, glowRadius);
radGlow.addColorStop(0, 'rgba(124, 92, 255, 0.28)');
radGlow.addColorStop(0.4, 'rgba(24, 197, 255, 0.12)');
radGlow.addColorStop(0.7, 'rgba(255, 46, 147, 0.04)');
radGlow.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = radGlow;
ctx.beginPath();
ctx.arc(coreProj.x, coreProj.y, glowRadius, 0, Math.PI * 2);
ctx.fill();
}
}
ring1.rx += ring1.speedX; ring1.ry += ring1.speedY; ring1.rz += ring1.speedZ;
ring2.rx += ring2.speedX; ring2.ry += ring2.speedY; ring2.rz += ring2.speedZ;
ring3.rx += ring3.speedX; ring3.ry += ring3.speedY; ring3.rz += ring3.speedZ;
function drawRing(ring) {
const pts = [];
for (let i = 0; i <= ring.numPoints; i++) {
const theta = (i / ring.numPoints) * Math.PI * 2;
const lx = ring.radius * Math.cos(theta);
const ly = ring.radius * Math.sin(theta);
const lz = 0;
const rotated = rotateRingPoint(lx, ly, lz, ring.rx, ring.ry, ring.rz);
pts.push(rotated);
}
for (let i = 0; i < ring.numPoints; i++) {
const pt1 = pts[i];
const pt2 = pts[i + 1];
const p1 = project(pt1.x, pt1.y, pt1.z + coreZ);
const p2 = project(pt2.x, pt2.y, pt2.z + coreZ);
if (p1 && p2) {
const avgZ = (p1.z + p2.z) / 2;
const fog = Math.max(0, Math.min(1, (maxZ - avgZ) / (maxZ - minZ)));
const baseAlpha = Math.pow(fog, 1.2);
const pulseSpeed = 1.8;
const pulsePos = (time * pulseSpeed) % (2 * Math.PI);
const currentTheta = (i / ring.numPoints) * Math.PI * 2;
const diff = Math.abs(currentTheta - pulsePos);
const isPulse = diff < 0.25 || (2 * Math.PI - diff) < 0.25;
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
if (isPulse) {
ctx.lineWidth = 3.5;
ctx.strokeStyle = '#ffffff';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineWidth = 8.0;
ctx.strokeStyle = ring.color + (baseAlpha * 0.45) + ')';
ctx.stroke();
} else {
ctx.lineWidth = 4.0;
ctx.strokeStyle = ring.color + (baseAlpha * 0.16) + ')';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineWidth = 1.5;
ctx.strokeStyle = ring.color + (baseAlpha * 0.85) + ')';
ctx.stroke();
}
}
}
}
drawRing(ring1);
drawRing(ring2);
drawRing(ring3);
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
const cosSpeed = Math.cos(p.speed);
const sinSpeed = Math.sin(p.speed);
const nx = p.x * cosSpeed - p.z * sinSpeed;
const nz = p.x * sinSpeed + p.z * cosSpeed;
p.x = nx;
p.z = nz;
const proj = project(p.x, p.y, p.z + coreZ);
if (proj) {
const fog = Math.max(0, Math.min(1, (maxZ - proj.z) / (maxZ - minZ)));
const baseAlpha = Math.pow(fog, 1.2);
const size = p.size * (fov / proj.z) * (1.0 + Math.sin(time * 3 + p.phase) * 0.35);
if (size > 0.05) {
ctx.beginPath();
ctx.arc(proj.x, proj.y, size, 0, Math.PI * 2);
ctx.fillStyle = p.color + (baseAlpha * 0.85) + ')';
ctx.fill();
if (size > 1.2) {
ctx.beginPath();
ctx.arc(proj.x, proj.y, size * 2.5, 0, Math.PI * 2);
ctx.fillStyle = p.color + (baseAlpha * 0.18) + ')';
ctx.fill();
}
}
}
}
ctx.globalCompositeOperation = 'source-over';
requestAnimationFrame(render);
}
function cleanup() {
active = false;
window.removeEventListener('resize', resize);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseleave', onMouseLeave);
window.removeEventListener('touchmove', onTouchMove);
window.removeEventListener('touchstart', onTouchMove);
window.removeEventListener('touchend', onMouseLeave);
if (observer) {
observer.disconnect();
}
}
requestAnimationFrame(render);
})();
</script>
` }}
/>
</div>
);
}Raw CSS Stylesheet Snippet
.quantum-orbital-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #05020d;
overflow: hidden;
}
#canvas-quantum-orbital-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}