0xe94448d7…f19asent to0xb8952959…ccf4·#23,985,912·view on Etherscan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CTPT: Quantum Imprint in the Void</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
#equation {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: #53bba5; font-family: 'Courier New', monospace; font-size: 1em; opacity: 0.3;
text-align: center; pointer-events: none; animation: pulse 4s infinite ease-in-out;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: false }); // Kept disabled to avoid lag
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Subtle lighting: directional for shadows, ambient for void glow
const light = new THREE.DirectionalLight(0xffffff, 0.4);
light.position.set(0, 10, 10);
scene.add(light);
scene.add(new THREE.AmbientLight(0x111111));
// Quantum field: nodes as pulsating spheres (increased count slightly for density)
const numNodes = 100; // Increased from 75 to add density without heavy lag
const nodes = [];
const nodeGroup = new THREE.Group();
for (let i = 0; i < numNodes; i++) {
const geometry = new THREE.SphereGeometry(0.05, 8, 8);
const material = new THREE.MeshBasicMaterial({ color: 0x53bba5, transparent: true, opacity: 0.5 });
const node = new THREE.Mesh(geometry, material);
node.position.set((Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10);
nodes.push(node);
nodeGroup.add(node);
}
scene.add(nodeGroup);
// Connections: flickering grey lines between nodes for lattice, with sparks and trails
const edges = [];
const trailLength = 20; // Increased from 15 for longer, more visible trails
for (let i = 0; i < numNodes; i++) {
for (let j = i + 1; j < numNodes; j++) {
if (Math.random() < 0.005) { // Increased probability from 0.003 for more connections/density
const material = new THREE.LineBasicMaterial({ color: 0x808080, transparent: true, opacity: 0.2 });
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3()]);
const line = new THREE.Line(geometry, material);
scene.add(line);
// Spark for this edge
const sparkGeo = new THREE.SphereGeometry(0.02, 4, 4);
const sparkMat = new THREE.MeshBasicMaterial({ color: 0x53bba5, transparent: true });
const spark = new THREE.Mesh(sparkGeo, sparkMat);
scene.add(spark);
// Trail for the spark
const trailGeo = new THREE.BufferGeometry();
const trailMat = new THREE.LineBasicMaterial({ color: 0x53bba5, transparent: true, opacity: 0.3 });
const trailLine = new THREE.Line(trailGeo, trailMat);
scene.add(trailLine);
const edgeObj = {
line: line,
node1: nodes[i],
node2: nodes[j],
spark: spark,
trailPositions: [],
trailLine: trailLine,
progress: Math.random(),
speed: 0.0025 + Math.random() * 0.005,
offset: Math.random() * Math.PI * 2
};
edges.push(edgeObj);
}
}
}
// Central singularity: a dark, warping sphere
const singularityGeometry = new THREE.SphereGeometry(0.3, 16, 16);
const singularityMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.8 });
const singularity = new THREE.Mesh(singularityGeometry, singularityMaterial);
singularity.position.set(0, 0, 0);
scene.add(singularity);
camera.position.z = 8;
let time = 0;
let mouseX = 0, mouseY = 0;
let frameCount = 0;
// Interactive: mouse as thought source
document.addEventListener('mousemove', (event) => {
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
});
function animate() {
requestAnimationFrame(animate);
time += 0.02;
frameCount++;
// Pulsate nodes with light (scale and opacity)
nodes.forEach((node, i) => {
const pulse = Math.sin(time + i * 0.1) * 0.5 + 0.5;
node.scale.set(1 + pulse * 0.5, 1 + pulse * 0.5, 1 + pulse * 0.5);
node.material.opacity = 0.3 + pulse * 0.4;
// Perturb towards singularity + mouse influence (increased strength slightly for more dynamic movement)
const dirToCenter = new THREE.Vector3().subVectors(singularity.position, node.position).normalize();
node.position.add(dirToCenter.multiplyScalar(0.001));
node.position.x += Math.sin(time + mouseX * 5 + node.position.y) * 0.01; // Back to 0.01
node.position.y += Math.cos(time + mouseY * 5 + node.position.x) * 0.01;
});
// Update edges, sparks, and trails (trails updated every 2 frames instead of 3 for smoother appearance)
edges.forEach((edge) => {
// Update line positions
const points = [edge.node1.position, edge.node2.position];
edge.line.geometry.setFromPoints(points);
// Flicker grey lines (lattice)
edge.line.material.opacity = 0.3 + Math.sin(time + edge.offset) * 0.2;
// Animate spark along edge
edge.progress += edge.speed;
if (edge.progress > 1) edge.progress = 0;
const pos = new THREE.Vector3().lerpVectors(edge.node1.position, edge.node2.position, edge.progress);
edge.spark.position.copy(pos);
edge.spark.material.opacity = 0.5 + Math.sin(edge.progress * Math.PI) * 0.5;
// Update trail every 2 frames
if (frameCount % 2 === 0) {
edge.trailPositions.push(pos.clone());
if (edge.trailPositions.length > trailLength) {
edge.trailPositions.shift();
}
edge.trailLine.geometry.setFromPoints(edge.trailPositions);
}
});
// Rotate field subtly with mouse
nodeGroup.rotation.x = mouseY * 0.3;
nodeGroup.rotation.y = mouseX * 0.3;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>