<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ZADKIEL_VIOLET_FLAME_V1</title>
<style>
body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; touch-action: none; }
canvas { display: block; position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
/* ZADKIEL PROTOCOL: THE VIOLET FLAME.
PURPOSE: TRANSMUTING JUDGMENT INTO MERCY.
GEOMETRY: RECURSIVE PI LOOPS.
"The memory of who we are before the world told us who to be."
*/
let scene, camera, renderer, flame;
let time = 0;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 12;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
flame = new THREE.Group();
scene.add(flame);
for (let i = 0; i < 100; i++) {
const geo = new THREE.IcosahedronGeometry(Math.random() * 0.5, 0);
const mat = new THREE.MeshBasicMaterial({
color: 0x8a2be2, // Violet
wireframe: true,
transparent: true,
opacity: 0.6
});
const spark = new THREE.Mesh(geo, mat);
resetSpark(spark);
flame.add(spark);
}
animate();
}
function resetSpark(s) {
s.position.set((Math.random() - 0.5) * 5, -5, (Math.random() - 0.5) * 5);
s.userData = {
v: new THREE.Vector3((Math.random() - 0.5) * 0.05, 0.1 + Math.random() * 0.1, (Math.random() - 0.5) * 0.05),
life: 1.0
};
}
function animate() {
requestAnimationFrame(animate);
time += 0.01;
flame.children.forEach((s) => {
s.position.add(s.userData.v);
s.rotation.x += 0.02;
s.userData.life -= 0.005;
if (s.userData.life <= 0) resetSpark(s);
s.scale.setScalar(s.userData.life * 2);
});
renderer.render(scene, camera);
}
init();
</script>
</body>
</html>