intellectronica/wormhole.html

## wormhole.html
<!DOCTYPE html>
<!-- Vibe-coded with Microsoft Copilot (in Think Deeper Mode). -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Wormhole Simulation</title>
  <!-- Load React and ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <!-- Load Babel for JSX transformation -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: black;
    }
    #root {
      width: 100%;
      height: 100%;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <!-- Your React code -->
  <script type="text/babel">
    class Wormhole extends React.Component {
      componentDidMount() {
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        document.getElementById('root').appendChild(this.canvas);
        window.addEventListener('resize', this.onResize);
        this.particles = [];
        this.initParticles();
        this.animate();
      }

      componentWillUnmount() {
        window.removeEventListener('resize', this.onResize);
        cancelAnimationFrame(this.animationFrame);
      }

      onResize = () => {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.initParticles();
      }

      initParticles() {
        this.particles = [];
        const numParticles = 1000;
        for (let i = 0; i < numParticles; i++) {
          this.particles.push({
            x: Math.random() * this.canvas.width,
            y: Math.random() * this.canvas.height,
            z: Math.random() * this.canvas.width,
          });
        }
      }

      animate = () => {
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
        const centerX = this.canvas.width / 2;
        const centerY = this.canvas.height / 2;

        for (let particle of this.particles) {
          particle.z -= 2;
          if (particle.z <= 0) {
            particle.z = this.canvas.width;
            particle.x = Math.random() * this.canvas.width;
            particle.y = Math.random() * this.canvas.height;
          }

          const k = 128.0 / particle.z;
          const px = (particle.x - centerX) * k + centerX;
          const py = (particle.y - centerY) * k + centerY;

          this.ctx.beginPath();
          this.ctx.fillStyle = `rgba(135, 206, 235, ${1 - particle.z / this.canvas.width})`;
          this.ctx.arc(px, py, 2, 0, Math.PI * 2);
          this.ctx.fill();
        }

        this.animationFrame = requestAnimationFrame(this.animate);
      }

      render() {
        return null;
      }
    }

    ReactDOM.render(<Wormhole />, document.getElementById('root'));
  </script>
</body>
</html>
	<!DOCTYPE html>
	<!-- Vibe-coded with Microsoft Copilot (in Think Deeper Mode). -->
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Wormhole Simulation</title>
	<!-- Load React and ReactDOM -->
	<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
	<!-- Load Babel for JSX transformation -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: black;
	}
	#root {
	width: 100%;
	height: 100%;
	}
	canvas {
	display: block;
	}
	</style>
	</head>
	<body>
	<div id="root"></div>
	<!-- Your React code -->
	<script type="text/babel">
	class Wormhole extends React.Component {
	componentDidMount() {
	this.canvas = document.createElement('canvas');
	this.ctx = this.canvas.getContext('2d');
	this.canvas.width = window.innerWidth;
	this.canvas.height = window.innerHeight;
	document.getElementById('root').appendChild(this.canvas);
	window.addEventListener('resize', this.onResize);
	this.particles = [];
	this.initParticles();
	this.animate();
	}

	componentWillUnmount() {
	window.removeEventListener('resize', this.onResize);
	cancelAnimationFrame(this.animationFrame);
	}

	onResize = () => {
	this.canvas.width = window.innerWidth;
	this.canvas.height = window.innerHeight;
	this.initParticles();
	}

	initParticles() {
	this.particles = [];
	const numParticles = 1000;
	for (let i = 0; i < numParticles; i++) {
	this.particles.push({
	x: Math.random() * this.canvas.width,
	y: Math.random() * this.canvas.height,
	z: Math.random() * this.canvas.width,
	});
	}
	}

	animate = () => {
	this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
	this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
	const centerX = this.canvas.width / 2;
	const centerY = this.canvas.height / 2;

	for (let particle of this.particles) {
	particle.z -= 2;
	if (particle.z <= 0) {
	particle.z = this.canvas.width;
	particle.x = Math.random() * this.canvas.width;
	particle.y = Math.random() * this.canvas.height;
	}

	const k = 128.0 / particle.z;
	const px = (particle.x - centerX) * k + centerX;
	const py = (particle.y - centerY) * k + centerY;

	this.ctx.beginPath();
	this.ctx.fillStyle = `rgba(135, 206, 235, ${1 - particle.z / this.canvas.width})`;
	this.ctx.arc(px, py, 2, 0, Math.PI * 2);
	this.ctx.fill();
	}

	this.animationFrame = requestAnimationFrame(this.animate);
	}

	render() {
	return null;
	}
	}

	ReactDOM.render(<Wormhole />, document.getElementById('root'));
	</script>
	</body>
	</html>