DEV Community: Prince

Physics effects with the normal css , html and javascript

Prince — Sat, 07 Jun 2025 13:22:36 +0000

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Particle Physics</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #000;
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Arial', sans-serif;
      color: white;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .controls {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      gap: 15px;
      background: rgba(0, 0, 0, 0.7);
      padding: 15px 25px;
      border-radius: 50px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .control-btn {
      background: none;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
      padding: 8px 16px;
      border-radius: 50px;
      transition: all 0.3s;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .control-btn:hover, .control-btn.active {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .info-panel {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
      background: rgba(0, 0, 0, 0.7);
      padding: 15px;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 14px;
      opacity: 0.8;
      transition: opacity 0.3s;
    }

    .info-panel:hover {
      opacity: 1;
    }

    .title {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 2px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

  <div class="title">INTERACTIVE PARTICLE PHYSICS</div>



  <div class="controls">
    <button class="control-btn active" data-mode="attract">Attract</button>
    <button class="control-btn" data-mode="repel">Repel</button>
    <button class="control-btn" data-mode="orbit">Orbit</button>
    <button class="control-btn" data-mode="chaos">Chaos</button>
    <button class="control-btn" data-mode="reset">Reset</button>
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Particles array
    let particles = [];
    let mode = 'attract';

    // Mouse position
    const mouse = {
      x: null,
      y: null,
      down: false,
      prevX: null,
      prevY: null
    };

    // Particle class
    class Particle {
      constructor(x, y, vx, vy) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 3 + 2;
        this.color = `hsl(${Math.random() * 360}, 100%, 70%)`;
        this.vx = vx;
        this.vy = vy;
        this.alpha = 1;
        this.trail = [];
        this.trailLength = 20;
      }

      update() {
        // Update position
        this.x += this.vx;
        this.y += this.vy;

        // Add position to trail
        this.trail.unshift({ x: this.x, y: this.y });
        if (this.trail.length > this.trailLength) {
          this.trail.pop();
        }

        // Check boundaries
        if (this.x < 0 || this.x > canvas.width) this.vx *= -0.8;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -0.8;

        // Apply friction
        this.vx *= 0.99;
        this.vy *= 0.99;

        // Interact with other particles based on mode
        for (let i = 0; i < particles.length; i++) {
          const particle = particles[i];
          if (this === particle) continue;

          const dx = particle.x - this.x;
          const dy = particle.y - this.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance < 150) {
            const forceX = dx / distance;
            const forceY = dy / distance;
            const force = (150 - distance) / 150;

            if (mode === 'attract') {
              this.vx += forceX * force * 0.03;
              this.vy += forceY * force * 0.03;
            } else if (mode === 'repel') {
              this.vx -= forceX * force * 0.1;
              this.vy -= forceY * force * 0.1;
            } else if (mode === 'orbit') {
              this.vx += forceY * force * 0.05;
              this.vy -= forceX * force * 0.05;
            } else if (mode === 'chaos') {
              this.vx += (Math.random() - 0.5) * force * 0.2;
              this.vy += (Math.random() - 0.5) * force * 0.2;
            }
          }
        }
      }

      draw() {
        // Draw trail
        for (let i = 0; i < this.trail.length; i++) {
          const alpha = (this.trail.length - i) / this.trail.length * 0.6;
          const size = this.size * (1 - i / this.trail.length);

          ctx.beginPath();
          ctx.arc(this.trail[i].x, this.trail[i].y, size, 0, Math.PI * 2);
          ctx.fillStyle = this.color.replace('hsl', 'hsla').replace(')', `, ${alpha})`);
          ctx.fill();
        }

        // Draw particle
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();

        // Draw glow
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size * 2, 0, Math.PI * 2);
        const gradient = ctx.createRadialGradient(
          this.x, this.y, this.size,
          this.x, this.y, this.size * 4
        );
        gradient.addColorStop(0, this.color.replace('hsl', 'hsla').replace(')', ', 0.4)'));
        gradient.addColorStop(1, this.color.replace('hsl', 'hsla').replace(')', ', 0)'));
        ctx.fillStyle = gradient;
        ctx.fill();
      }
    }

    // Create particles when mouse is dragged
    function createParticles() {
      if (mouse.down && mouse.prevX !== null) {
        const speedX = (mouse.x - mouse.prevX) * 0.2;
        const speedY = (mouse.y - mouse.prevY) * 0.2;

        // Create multiple particles with slight variations
        for (let i = 0; i < 2; i++) {
          const randomOffsetX = (Math.random() - 0.5) * 10;
          const randomOffsetY = (Math.random() - 0.5) * 10;
          const randomSpeedX = speedX + (Math.random() - 0.5) * 2;
          const randomSpeedY = speedY + (Math.random() - 0.5) * 2;

          particles.push(new Particle(
            mouse.x + randomOffsetX,
            mouse.y + randomOffsetY,
            randomSpeedX,
            randomSpeedY
          ));
        }
      }

      mouse.prevX = mouse.x;
      mouse.prevY = mouse.y;
    }

    // Animation loop
    function animate() {
      // Clear canvas with semi-transparent black for trail effect
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Create particles if mouse is down
      if (mouse.down) {
        createParticles();
      }

      // Update and draw particles
      for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();

        // Remove particles with very low velocity
        const speed = Math.sqrt(
          particles[i].vx * particles[i].vx + 
          particles[i].vy * particles[i].vy
        );

        if (speed < 0.05 && particles.length > 100) {
          particles.splice(i, 1);
          i--;
        }
      }

      // Draw connections between close particles
      drawConnections();

      requestAnimationFrame(animate);
    }

    // Draw connections between particles
    function drawConnections() {
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance < 100) {
            ctx.beginPath();
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);
            const alpha = (100 - distance) / 100 * 0.2;
            ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
            ctx.lineWidth = 1;
            ctx.stroke();
          }
        }
      }
    }

    // Event listeners
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });

    canvas.addEventListener('mousedown', (e) => {
      mouse.down = true;
      mouse.x = e.clientX;
      mouse.y = e.clientY;
      mouse.prevX = e.clientX;
      mouse.prevY = e.clientY;
    });

    canvas.addEventListener('mouseup', () => {
      mouse.down = false;
      mouse.prevX = null;
      mouse.prevY = null;
    });

    canvas.addEventListener('mousemove', (e) => {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    });

    // Mobile support
    canvas.addEventListener('touchstart', (e) => {
      mouse.down = true;
      mouse.x = e.touches[0].clientX;
      mouse.y = e.touches[0].clientY;
      mouse.prevX = e.touches[0].clientX;
      mouse.prevY = e.touches[0].clientY;
    });

    canvas.addEventListener('touchend', () => {
      mouse.down = false;
      mouse.prevX = null;
      mouse.prevY = null;
    });

    canvas.addEventListener('touchmove', (e) => {
      e.preventDefault();
      mouse.x = e.touches[0].clientX;
      mouse.y = e.touches[0].clientY;
    });

    // Mode buttons
    const buttons = document.querySelectorAll('.control-btn');
    buttons.forEach(button => {
      button.addEventListener('click', () => {
        // Set active button
        buttons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        // Set mode
        mode = button.dataset.mode;

        // Reset particles if reset button
        if (mode === 'reset') {
          particles = [];
        }
      });
    });

    // Start animation
    animate();

    // Add initial particles
    for (let i = 0; i < 50; i++) {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const vx = (Math.random() - 0.5) * 2;
      const vy = (Math.random() - 0.5) * 2;

      particles.push(new Particle(x, y, vx, vy));
    }

    // Create initial bursts
    function createInitialBurst() {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;

      for (let i = 0; i < 20; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 5 + 1;
        const vx = Math.cos(angle) * speed;
        const vy = Math.sin(angle) * speed;

        particles.push(new Particle(x, y, vx, vy));
      }
    }

    // Create initial bursts
    for (let i = 0; i < 3; i++) {
      setTimeout(() => {
        createInitialBurst();
      }, i * 1000);
    }
  </script>
</body>
</html>

Heart of codes

Prince — Sat, 19 Apr 2025 12:29:35 +0000

Follow for more on the instagram: @prince_codes1

Purpose your love with the coding of the html css and javascript illusionistic heart with particles

Prince — Sat, 05 Apr 2025 10:43:24 +0000

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Particle Heart Illusion</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="heartCanvas"></canvas>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const canvas = document.getElementById('heartCanvas');
      const ctx = canvas.getContext('2d');

      // Set canvas to full window size
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // Responsive sizing
      const size = Math.min(canvas.width, canvas.height) * 0.8;

      // Particle class
      class Particle {
        constructor(x, y) {
          this.originalX = x;
          this.originalY = y;
          this.x = Math.random() * canvas.width;
          this.y = Math.random() * canvas.height;
          this.size = Math.random() * 3 + 1;
          this.velocityX = Math.random() * 2 - 1;
          this.velocityY = Math.random() * 2 - 1;
          this.color = `hsl(${340 + Math.random() * 40}, 100%, ${50 + Math.random() * 30}%)`;
          this.targetX = x;
          this.targetY = y;
        }

        update() {
          const dx = this.targetX - this.x;
          const dy = this.targetY - this.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance > 1) {
            this.velocityX = dx * 0.03;
            this.velocityY = dy * 0.03;
          } else {
            // Add some random movement when close to target
            this.velocityX = (Math.random() * 2 - 1) * 0.3;
            this.velocityY = (Math.random() * 2 - 1) * 0.3;
          }

          this.x += this.velocityX;
          this.y += this.velocityY;
        }

        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
        }

        scatter() {
          this.targetX = Math.random() * canvas.width;
          this.targetY = Math.random() * canvas.height;
        }

        returnToHeart() {
          this.targetX = this.originalX;
          this.targetY = this.originalY;
        }
      }

      // Generate particles in a heart shape
      const particles = [];
      const heartPoints = [];
      const particleCount = 1000;

      // Create heart shape points
      function createHeartPoints() {
        heartPoints.length = 0;

        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const scale = size / 20;

        for (let t = 0; t < Math.PI * 2; t += 0.01) {
          const x = 16 * Math.pow(Math.sin(t), 3);
          const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);

          heartPoints.push({
            x: centerX + x * scale,
            y: centerY - y * scale
          });
        }

        // Fill in the heart
        for (let i = 0; i < 200; i++) {
          const randomAngle = Math.random() * Math.PI * 2;
          const randomRadius = Math.random() * size / 3;

          const x = centerX + Math.cos(randomAngle) * randomRadius;
          const y = centerY - Math.sin(randomAngle) * randomRadius;

          if (isPointInHeart(x, y, centerX, centerY, scale)) {
            heartPoints.push({x, y});
          }
        }
      }

      // Check if a point is inside the heart shape
      function isPointInHeart(x, y, centerX, centerY, scale) {
        const rx = (x - centerX) / scale;
        const ry = (centerY - y) / scale;

        // Heart equation: (x^2 + y^2 - 1)^3 - x^2*y^3 < 0
        const v1 = Math.pow(rx*rx + ry*ry - 1, 3);
        const v2 = rx*rx * Math.pow(ry, 3);

        return v1 - v2 < 0;
      }

      // Initialize particles
      function initParticles() {
        createHeartPoints();
        particles.length = 0;

        for (let i = 0; i < particleCount; i++) {
          const randomIndex = Math.floor(Math.random() * heartPoints.length);
          const point = heartPoints[randomIndex];
          particles.push(new Particle(point.x, point.y));
        }
      }

      // Animation loop
      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (const particle of particles) {
          particle.update();
          particle.draw();
        }

        requestAnimationFrame(animate);
      }

      // Event listeners for interactions
      canvas.addEventListener('click', function() {
        const isScattered = particles[0].targetX !== particles[0].originalX;

        if (isScattered) {
          for (const particle of particles) {
            particle.returnToHeart();
          }
        } else {
          for (const particle of particles) {
            particle.scatter();
          }
        }
      });

      // Handle window resize
      window.addEventListener('resize', function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        initParticles();
      });

      // Start animation
      initParticles();
      animate();
    });
  </script>
</body>
</html>

Atomic Structure with the html css and javascript.

Prince — Sat, 05 Apr 2025 10:41:10 +0000

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Illusionistic Atomic Structure</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #atom-container {
      position: relative;
      width: 500px;
      height: 500px;
    }

    .nucleus {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 30% 30%, #f5a9b8 0%, #cc0066 70%);
      box-shadow: 0 0 30px 10px rgba(255, 100, 150, 0.7);
      z-index: 10;
    }

    .nucleus-particles {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }

    .proton, .neutron {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }

    .proton {
      background: radial-gradient(circle at 30% 30%, #ff9999 0%, #ff0000 100%);
      box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.5);
    }

    .neutron {
      background: radial-gradient(circle at 30% 30%, #dddddd 0%, #666666 100%);
      box-shadow: 0 0 5px 2px rgba(150, 150, 150, 0.5);
    }

    .orbital {
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      border: 1px solid rgba(100, 200, 255, 0.3);
      transform: translate(-50%, -50%) rotateX(70deg);
      box-shadow: 0 0 10px 1px rgba(100, 200, 255, 0.2);
    }

    .orbital-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: rotate 20s linear infinite;
    }

    .electron {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #99ffff 0%, #00ccff 100%);
      box-shadow: 0 0 15px 5px rgba(0, 200, 255, 0.8);
      z-index: 5;
    }

    .electron-trail {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1px solid transparent;
    }

    @keyframes rotate {
      0% { transform: rotateY(0deg) rotateX(0deg); }
      100% { transform: rotateY(360deg) rotateX(360deg); }
    }

    .controls {
      position: absolute;
      bottom: 20px;
      display: flex;
      gap: 10px;
      z-index: 100;
    }

    button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 8px 16px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      cursor: pointer;
      border-radius: 4px;
    }

    .quantum-effect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.8) 100%);
      opacity: 0.8;
      pointer-events: none;
    }

    .energy-wave {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.8);
      filter: blur(1px);
      animation: wave 2s linear infinite;
    }

    @keyframes wave {
      0% { 
        width: 10px; 
        height: 10px; 
        opacity: 0.8;
      }
      100% { 
        width: 500px; 
        height: 500px; 
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div id="atom-container">
    <div class="quantum-effect"></div>
    <div class="orbital-container" id="orbital-container">
      <!-- Orbitals and electrons will be added here by JS -->
    </div>
    <div class="nucleus">
      <div class="nucleus-particles" id="nucleus-particles">
        <!-- Protons and neutrons will be added here by JS -->
      </div>
    </div>
    <div id="energy-waves"></div>
  </div>

  <div class="controls">
    <button id="toggle-perspective">Toggle 3D Perspective</button>
    <button id="change-element">Change Element</button>
    <button id="quantum-jump">Quantum Jump</button>
  </div>

  <script>
    // Configuration for different elements
    const elements = [
      { name: 'Hydrogen', protons: 1, neutrons: 0, electrons: [1], color: '#00CCFF', size: 60 },
      { name: 'Helium', protons: 2, neutrons: 2, electrons: [2], color: '#FF9900', size: 65 },
      { name: 'Lithium', protons: 3, neutrons: 4, electrons: [2, 1], color: '#CC0000', size: 70 },
      { name: 'Carbon', protons: 6, neutrons: 6, electrons: [2, 4], color: '#808080', size: 75 },
      { name: 'Oxygen', protons: 8, neutrons: 8, electrons: [2, 6], color: '#FF0000', size: 80 },
      { name: 'Neon', protons: 10, neutrons: 10, electrons: [2, 8], color: '#FF00FF', size: 85 }
    ];

    // State
    let currentElement = 0;
    let perspective3D = true;
    let orbitalContainers = [];

    // DOM elements
    const orbitalContainer = document.getElementById('orbital-container');
    const nucleusParticles = document.getElementById('nucleus-particles');
    const energyWaves = document.getElementById('energy-waves');

    // Initialize
    function init() {
      document.getElementById('toggle-perspective').addEventListener('click', togglePerspective);
      document.getElementById('change-element').addEventListener('click', changeElement);
      document.getElementById('quantum-jump').addEventListener('click', createQuantumJump);

      renderAtom(elements[currentElement]);

      // Add random energy waves
      setInterval(createEnergyWave, 2000);
    }

    function renderAtom(element) {
      // Clear previous atom
      orbitalContainer.innerHTML = '';
      nucleusParticles.innerHTML = '';
      document.title = `${element.name} Atom Illusion`;

      // Update nucleus size
      const nucleus = document.querySelector('.nucleus');
      nucleus.style.width = `${element.size}px`;
      nucleus.style.height = `${element.size}px`;

      // Create protons and neutrons
      for (let i = 0; i < element.protons; i++) {
        const proton = document.createElement('div');
        proton.className = 'proton';
        proton.style.left = `${Math.random() * (element.size - 20)}px`;
        proton.style.top = `${Math.random() * (element.size - 20)}px`;
        nucleusParticles.appendChild(proton);
      }

      for (let i = 0; i < element.neutrons; i++) {
        const neutron = document.createElement('div');
        neutron.className = 'neutron';
        neutron.style.left = `${Math.random() * (element.size - 20)}px`;
        neutron.style.top = `${Math.random() * (element.size - 20)}px`;
        nucleusParticles.appendChild(neutron);
      }

      // Create electron shells
      orbitalContainers = [];
      for (let i = 0; i < element.electrons.length; i++) {
        const shellContainer = document.createElement('div');
        shellContainer.className = 'orbital-container';
        shellContainer.style.animation = `rotate ${15 + i * 5}s linear infinite`;

        const shellSize = 150 + (i * 80);

        // Create orbital
        const orbital = document.createElement('div');
        orbital.className = 'orbital';
        orbital.style.width = `${shellSize}px`;
        orbital.style.height = `${shellSize}px`;
        shellContainer.appendChild(orbital);

        // Create electrons in this shell
        for (let j = 0; j < element.electrons[i]; j++) {
          const angle = (j / element.electrons[i]) * 2 * Math.PI;
          const electron = document.createElement('div');
          electron.className = 'electron';

          // Calculate position on orbit
          const radius = shellSize / 2;
          const x = Math.cos(angle) * radius;
          const y = Math.sin(angle) * radius;

          electron.style.left = `${x + 250}px`;
          electron.style.top = `${y + 250}px`;

          // Create electron trail
          const trail = document.createElement('div');
          trail.className = 'electron-trail';
          trail.style.width = `${shellSize}px`;
          trail.style.height = `${shellSize}px`;
          trail.style.left = `${250 - shellSize/2}px`;
          trail.style.top = `${250 - shellSize/2}px`;
          trail.style.borderColor = `rgba(0, 200, 255, ${0.2 - i * 0.05})`;

          shellContainer.appendChild(trail);
          shellContainer.appendChild(electron);

          // Add animation
          electron.style.animation = `orbit${i} ${8 - i}s linear infinite`;
          const style = document.createElement('style');
          style.textContent = `
            @keyframes orbit${i} {
              0% { transform: rotate(${angle}rad) translateX(${radius}px) rotate(-${angle}rad); }
              100% { transform: rotate(${angle + 2 * Math.PI}rad) translateX(${radius}px) rotate(-${angle + 2 * Math.PI}rad); }
            }
          `;
          document.head.appendChild(style);
        }

        orbitalContainer.appendChild(shellContainer);
        orbitalContainers.push(shellContainer);
      }
    }

    function togglePerspective() {
      perspective3D = !perspective3D;
      orbitalContainers.forEach((container, i) => {
        if (perspective3D) {
          container.style.transform = '';
        } else {
          container.style.transform = 'rotateX(0deg)';
        }
        const orbitals = container.querySelectorAll('.orbital');
        orbitals.forEach(orbital => {
          if (perspective3D) {
            orbital.style.transform = 'translate(-50%, -50%) rotateX(70deg)';
          } else {
            orbital.style.transform = 'translate(-50%, -50%) rotateX(0deg)';
          }
        });
      });
    }

    function changeElement() {
      currentElement = (currentElement + 1) % elements.length;
      renderAtom(elements[currentElement]);

      // Create quantum effect
      createQuantumJump();
    }

    function createQuantumJump() {
      // Create a flash effect
      const flash = document.createElement('div');
      flash.style.position = 'absolute';
      flash.style.top = '0';
      flash.style.left = '0';
      flash.style.width = '100%';
      flash.style.height = '100%';
      flash.style.backgroundColor = 'white';
      flash.style.opacity = '0.8';
      flash.style.zIndex = '100';
      flash.style.transition = 'opacity 0.5s';

      document.getElementById('atom-container').appendChild(flash);

      // Create multiple energy waves
      for (let i = 0; i < 5; i++) {
        setTimeout(createEnergyWave, i * 100);
      }

      // Make electrons jump
      const electrons = document.querySelectorAll('.electron');
      electrons.forEach(electron => {
        const originalLeft = electron.style.left;
        const originalTop = electron.style.top;

        // Jump to random position
        electron.style.transition = 'all 0.3s ease-out';
        electron.style.left = `${Math.random() * 400 + 50}px`;
        electron.style.top = `${Math.random() * 400 + 50}px`;

        // Return to original position
        setTimeout(() => {
          electron.style.left = originalLeft;
          electron.style.top = originalTop;
        }, 300);
      });

      // Fade out flash
      setTimeout(() => {
        flash.style.opacity = '0';
        setTimeout(() => {
          flash.remove();
        }, 500);
      }, 200);
    }

    function createEnergyWave() {
      const wave = document.createElement('div');
      wave.className = 'energy-wave';
      energyWaves.appendChild(wave);

      // Remove wave after animation completes
      setTimeout(() => {
        wave.remove();
      }, 2000);
    }

    // Start
    init();
  </script>
</body>
</html>

Particles effect using the html css and js

Prince — Sat, 05 Apr 2025 10:39:49 +0000

`<!DOCTYPE html>

Interactive Particle System

<br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
font-family: 'Arial', sans-serif;
overflow: hidden;
background-color: #0a0a0a;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    pointer-events: none;
}

.title {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
    color: #8b5cf6;
    opacity: 0;
    transition: opacity 2s ease;
    margin-bottom: 20px;
    text-align: center;
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 2s ease;
    text-align: center;
    max-width: 80%;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.cta {
    position: absolute;
    bottom: 5%;
    font-size: 1.4rem;
    font-weight: bold;
    color: #8b5cf6;
    opacity: 0;
    transition: opacity 1s ease;
    text-align: center;
    z-index: 5;
    width: 100%;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
}

.overlay-touch {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    pointer-events: all;
    cursor: pointer;
}

</style>
</code></pre></div>
<p></head><br>
<body><br>
<canvas id="canvas"></canvas></p>
<div class="highlight"><pre class="highlight plaintext"><code>

<div class="cta">Double tap to create particle explosions</div>

// Animation variables
let particles = [];
let connections = [];
let animationStage = 0;
let lastTime = 0;
let mouseX = 0, mouseY = 0;
let isUserInteracting = false;
let isFirstTouch = true;

// DOM elements
const title = document.querySelector('.title');
const subtitle = document.querySelector('.subtitle');
const cta = document.querySelector('.cta');
const touchOverlay = document.querySelector('.overlay-touch');

// Colors
const colors = [
    '#8b5cf6', // Purple
    '#3b82f6', // Blue
    '#ec4899', // Pink
    '#10b981', // Green
    '#f59e0b'  // Amber
];

// Particle class
class Particle {
    constructor(x, y, color, size = 3, speedFactor = 1, fixed = false) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.baseX = x;
        this.baseY = y;
        this.density = (Math.random() * 30) + 1;
        this.speedFactor = speedFactor;
        this.fixed = fixed;
        this.vx = (Math.random() - 0.5) * 2;
        this.vy = (Math.random() - 0.5) * 2;
        this.friction = 0.95;
        this.life = 1;
        this.decay = Math.random() * 0.01 + 0.001;
        this.maxSize = size;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size * this.life, 0, Math.PI * 2);
        ctx.closePath();

        // Create gradient for particle
        const gradient = ctx.createRadialGradient(
            this.x, this.y, 0,
            this.x, this.y, this.size * this.life
        );
        gradient.addColorStop(0, this.color);
        gradient.addColorStop(1, 'rgba(0,0,0,0)');

        ctx.fillStyle = gradient;
        ctx.fill();
    }

    update() {
        if (this.fixed) return;

        // Apply velocity
        this.x += this.vx * this.speedFactor;
        this.y += this.vy * this.speedFactor;

        // Apply friction
        this.vx *= this.friction;
        this.vy *= this.friction;

        // Apply gravity (subtle pull downward)
        this.vy += 0.02 * this.speedFactor;

        // Boundary checks with bounce effect
        if (this.x &amp;lt; this.size) {
            this.x = this.size;
            this.vx *= -0.8;
        }
        if (this.x &amp;gt; canvas.width - this.size) {
            this.x = canvas.width - this.size;
            this.vx *= -0.8;
        }
        if (this.y &amp;lt; this.size) {
            this.y = this.size;
            this.vy *= -0.8;
        }
        if (this.y &amp;gt; canvas.height - this.size) {
            this.y = canvas.height - this.size;
            this.vy *= -0.8;
        }

        // Mouse interaction
        if (isUserInteracting) {
            const dx = mouseX - this.x;
            const dy = mouseY - this.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            const forceDirectionX = dx / distance;
            const forceDirectionY = dy / distance;

            // Calculate force (stronger when closer)
            const maxDistance = 150;
            const force = (maxDistance - Math.min(maxDistance, distance)) / 10;

            if (distance &amp;lt; maxDistance) {
                this.vx += forceDirectionX * force / this.density;
                this.vy += forceDirectionY * force / this.density;
            }
        }

        // Decay particle life if it's an explosion particle
        if (this.decay &amp;gt; 0) {
            this.life -= this.decay;
            if (this.life &amp;lt;= 0) {
                this.life = 0;
            }
        }
    }

    isAlive() {
        return this.life &amp;gt; 0.01;
    }
}

// Create initial particles
function initParticles() {
    particles = [];
    for (let i = 0; i &amp;lt; 150; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const size = Math.random() * 3 + 2;
        particles.push(new Particle(x, y, color, size));
    }
}

// Draw connections between particles
function connectParticles() {
    connections = [];
    const maxDistance = 150;

    for (let i = 0; i &amp;lt; particles.length; i++) {
        if (!particles[i].isAlive()) continue;

        for (let j = i + 1; j &amp;lt; particles.length; j++) {
            if (!particles[j].isAlive()) continue;

            const dx = particles[i].x - particles[j].x;
            const dy = particles[i].y - particles[j].y;
            const distance = Math.sqrt(dx * dx + dy * dy);

            if (distance &amp;lt; maxDistance) {
                const opacity = 1 - (distance / maxDistance);
                connections.push({
                    start: particles[i],
                    end: particles[j],
                    opacity: opacity * particles[i].life * particles[j].life
                });
            }
        }
    }
}

// Draw the connections
function drawConnections() {
    for (const connection of connections) {
        ctx.beginPath();
        ctx.moveTo(connection.start.x, connection.start.y);
        ctx.lineTo(connection.end.x, connection.end.y);

        const gradient = ctx.createLinearGradient(
            connection.start.x, connection.start.y,
            connection.end.x, connection.end.y
        );

        gradient.addColorStop(0, connection.start.color);
        gradient.addColorStop(1, connection.end.color);

        ctx.strokeStyle = gradient;
        ctx.globalAlpha = connection.opacity * 0.7;
        ctx.lineWidth = connection.opacity * 2;
        ctx.stroke();
        ctx.globalAlpha = 1;
    }
}

// Create particle explosion
function createExplosion(x, y) {
    const particleCount = Math.floor(Math.random() * 20) + 30;
    const baseHue = Math.floor(Math.random() * 360);

    for (let i = 0; i &amp;lt; particleCount; i++) {
        // Create color variations
        const hue = (baseHue + Math.random() * 30 - 15) % 360;
        const color = `hsl(${hue}, 80%, 60%)`;

        // Calculate random direction
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 6 + 1;
        const size = Math.random() * 4 + 2;

        const particle = new Particle(x, y, color, size);
        particle.vx = Math.cos(angle) * speed;
        particle.vy = Math.sin(angle) * speed;
        particle.friction = 0.98;
        particle.decay = Math.random() * 0.02 + 0.005;

        particles.push(particle);
    }
}

// Animation loop
function animate(timestamp) {
    const deltaTime = timestamp - lastTime;
    lastTime = timestamp;

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Update and draw particles
    particles = particles.filter(particle =&amp;gt; particle.isAlive());

    for (const particle of particles) {
        particle.update();
        particle.draw();
    }

    // Connect particles
    connectParticles();
    drawConnections();

    // Progress the animation stages
    updateAnimation(deltaTime);
    requestAnimationFrame(animate);
}

// Handle animation stages
function updateAnimation(deltaTime) {
    if (animationStage === 0 &amp;amp;&amp;amp; lastTime &amp;gt; 1000) {
        // Show title
        title.style.opacity = '1';

        setTimeout(() =&amp;gt; {
            subtitle.style.opacity = '1';
            touchOverlay.style.opacity = '1';
            animationStage = 1;
        }, 2000);
    }
    else if (animationStage === 1 &amp;amp;&amp;amp; lastTime &amp;gt; 5000) {
        // Show CTA
        cta.style.opacity = '1';
        animationStage = 2;

        // Create random explosions occasionally
        setInterval(() =&amp;gt; {
            if (!isUserInteracting &amp;amp;&amp;amp; Math.random() &amp;lt; 0.3) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                createExplosion(x, y);
            }
        }, 3000);
    }
}

// Handle window resize
window.addEventListener('resize', () =&amp;gt; {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    initParticles();
});

// Handle mouse/touch events for user interaction
touchOverlay.addEventListener('mousemove', (e) =&amp;gt; {
    mouseX = e.clientX;
    mouseY = e.clientY;
});

touchOverlay.addEventListener('mousedown', () =&amp;gt; {
    isUserInteracting = true;
});

touchOverlay.addEventListener('mouseup', () =&amp;gt; {
    isUserInteracting = false;
});

touchOverlay.addEventListener('touchmove', (e) =&amp;gt; {
    e.preventDefault();
    mouseX = e.touches[0].clientX;
    mouseY = e.touches[0].clientY;
    isUserInteracting = true;

    // Create small particles while dragging
    if (Math.random() &amp;lt; 0.3) {
        const color = colors[Math.floor(Math.random() * colors.length)];
        const particle = new Particle(mouseX, mouseY, color, Math.random() * 2 + 1);
        particle.vx = (Math.random() - 0.5) * 2;
        particle.vy = (Math.random() - 0.5) * 2;
        particles.push(particle);
    }
});

touchOverlay.addEventListener('touchend', () =&amp;gt; {
    isUserInteracting = false;
});

// Create explosion on click/tap
touchOverlay.addEventListener('click', (e) =&amp;gt; {
    const x = e.clientX || e.touches[0].clientX;
    const y = e.clientY || e.touches[0].clientY;
    createExplosion(x, y);

    // Show/hide UI elements based on first touch
    if (isFirstTouch) {
        setTimeout(() =&amp;gt; {
            title.style.opacity = '0';
            subtitle.style.opacity = '0';
        }, 500);
        isFirstTouch = false;
    }
});

// Initialize and start animation
function init() {
    initParticles();
    requestAnimationFrame(animate);
}

init();

</script>
</code></pre></div>
<p></body><br>
</html>`</p>

You naming illusion and effects with the simple html css and javascript

Prince — Sun, 30 Mar 2025 13:17:34 +0000

🚀 Animated Name Loader - "YOU" Edition! 🎨✨

Check out this amazing SVG text animation where each letter of "YOU" comes to life with vibrant gradient colors and illusionistic effects! 🌈🔥

💡 What’s inside?
✅ SVG & CSS magic for smooth animations 🎭
✅ Stroke effects & spinning transformations 🔄
✅ Mesmerizing color transitions for a futuristic look 🌌

Want to create something similar? Drop a 🔥 in the comments & follow for more epic HTML, CSS & JS animations! 💻🎥

WebAnimation #CSSMagic #SVGAnimation #FrontendFun #CreativeCoding #PrinceLoader

Magnetic effect illusions with the html css and javascript

Prince — Sun, 30 Mar 2025 13:15:54 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magnetic Particle Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #0f0f1e;
            font-family: 'Arial', sans-serif;
        }

        canvas {
            display: block;
        }

        .info {
            position: absolute;
            bottom: 30px;
            left: 30px;
            color: white;
            font-size: 18px;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            pointer-events: none;
        }

        .info h1 {
            margin: 0 0 10px 0;
            font-size: 28px;
            color: #00ffaa;
        }

        .tag {
            position: absolute;
            top: 30px;
            right: 30px;
            color: #00ffaa;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            pointer-events: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="info">
        <h1>Magnetic Particles</h1>
        <p>Move your cursor to control the particle flow</p>
    </div>
    <div class="tag">@prince_codes1</div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Configuration
        const particleCount = 300;
        const particleBaseRadius = 2;
        const particleVariance = 1.5;
        const baseSpeed = 0.5;
        const colorPalette = ['#00ffaa', '#00ccff', '#ff00aa', '#ffcc00'];

        let mouseX = canvas.width / 2;
        let mouseY = canvas.height / 2;
        let mouseRadius = 150;
        let mouseStrength = 10;

        // Particle class
        class Particle {
            constructor() {
                this.reset();
                // Start particles at random positions
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
            }

            reset() {
                // For new particles entering the canvas
                this.x = Math.random() < 0.5 ? 0 : canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = particleBaseRadius + Math.random() * particleVariance;
                this.color = colorPalette[Math.floor(Math.random() * colorPalette.length)];

                // Set velocity toward center of screen with some randomness
                const angle = Math.atan2(canvas.height/2 - this.y, canvas.width/2 - this.x);
                const speed = baseSpeed + Math.random() * 0.5;
                this.vx = Math.cos(angle) * speed;
                this.vy = Math.sin(angle) * speed;

                this.originalSize = this.size;
                this.growFactor = 1 + Math.random() * 0.3;
            }

            update() {
                // Calculate distance to mouse
                const dx = this.x - mouseX;
                const dy = this.y - mouseY;
                const distance = Math.sqrt(dx * dx + dy * dy);

                // Apply force if within mouse radius
                if (distance < mouseRadius) {
                    const force = (mouseRadius - distance) / mouseRadius;
                    const angle = Math.atan2(dy, dx);
                    const fx = Math.cos(angle) * force * mouseStrength;
                    const fy = Math.sin(angle) * force * mouseStrength;

                    this.vx += fx * 0.02;
                    this.vy += fy * 0.02;

                    // Grow particles near the mouse
                    this.size = this.originalSize * (1 + force * this.growFactor);
                } else {
                    // Gradually return to original size
                    this.size = this.originalSize + (this.size - this.originalSize) * 0.95;
                }

                // Apply velocity
                this.x += this.vx;
                this.y += this.vy;

                // Slow down over time (friction)
                this.vx *= 0.98;
                this.vy *= 0.98;

                // Check if particle is out of bounds
                if (this.x < -50 || this.x > canvas.width + 50 || 
                    this.y < -50 || this.y > canvas.height + 50) {
                    this.reset();
                }
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();

                // Add glow effect
                ctx.shadowBlur = 10;
                ctx.shadowColor = this.color;
            }
        }

        // Create particles
        const particles = [];
        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        // Animation loop
        function animate() {
            // Clear with semi-transparent background for trail effect
            ctx.fillStyle = 'rgba(15, 15, 30, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Update and draw particles
            ctx.shadowBlur = 0; // Reset shadow before drawing particles
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            // Animation pulse effect for mouse area
            const time = Date.now() * 0.001;
            mouseRadius = 150 + Math.sin(time) * 50;

            requestAnimationFrame(animate);
        }

        // Start animation
        animate();

        // Handle mouse movement
        window.addEventListener('mousemove', (event) => {
            mouseX = event.clientX;
            mouseY = event.clientY;
        });

        // Handle touch for mobile
        window.addEventListener('touchmove', (event) => {
            event.preventDefault();
            mouseX = event.touches[0].clientX;
            mouseY = event.touches[0].clientY;
        }, { passive: false });

        // Handle window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        // Create automatic movement when no user interaction
        let inactivityTimer = null;
        function startInactivityTimer() {
            clearInterval(inactivityTimer);
            inactivityTimer = setInterval(() => {
                const time = Date.now() * 0.0005;
                mouseX = canvas.width/2 + Math.sin(time) * (canvas.width/3);
                mouseY = canvas.height/2 + Math.cos(time * 1.3) * (canvas.height/3);
            }, 50);
        }

        // Start automatic movement by default
        startInactivityTimer();

        // Stop automatic movement when user interacts
        window.addEventListener('mousemove', () => {
            clearInterval(inactivityTimer);
            // Restart after 5 seconds of inactivity
            setTimeout(startInactivityTimer, 5000);
        });
    </script>
</body>
</html>

Have a view to Solar system with the html css and javascript coding illusion.

Prince — Sun, 30 Mar 2025 13:13:19 +0000

Full code for the solar system is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Solar System</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #0a0a1a;
            font-family: 'Arial', sans-serif;
            color: white;
        }

        canvas {
            display: block;
        }

        .info {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 18px;
            text-shadow: 0 0 5px rgba(0,0,0,0.8);
            pointer-events: none;
        }

        .tag {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
            color: #ff9500;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(255, 149, 0, 0.8);
            pointer-events: none;
        }

        .planet-name {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 32px;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255,255,255,0.8);
            opacity: 0;
            transition: opacity 0.5s;
            pointer-events: none;
            text-align: center;
        }

        .interact-hint {
            position: absolute;
            top: 58%;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 18px;
            color: #aaaaaa;
            text-shadow: 0 0 10px rgba(0,0,0,0.8);
            pointer-events: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="tag">@prince_codes1</div>
    <div class="planet-name" id="planetName"></div>
    <!-- <div class="interact-hint">Tap to interact</div> -->

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const planetNameElement = document.getElementById('planetName');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Solar system configuration
        const planets = [
            { name: "Sun", radius: 35, color: "#FDB813", distance: 0, speed: 0, moons: [], glowColor: "rgba(253, 184, 19, 0.25)", glowSize: 30, orbitColor: "transparent" },
            { name: "Mercury", radius: 5, color: "#A57744", distance: 60, speed: 0.01, moons: [], glowColor: "rgba(165, 119, 68, 0.15)", glowSize: 2, orbitColor: "rgba(255, 255, 255, 0.1)" },
            { name: "Venus", radius: 8, color: "#E8B658", distance: 85, speed: 0.007, moons: [], glowColor: "rgba(232, 182, 88, 0.15)", glowSize: 3, orbitColor: "rgba(255, 255, 255, 0.1)" },
            { name: "Earth", radius: 9, color: "#267EAA", distance: 115, speed: 0.005, moons: [{ radius: 2, distance: 15, speed: 0.025, color: "#AAAAAA" }], glowColor: "rgba(38, 126, 170, 0.15)", glowSize: 3, orbitColor: "rgba(255, 255, 255, 0.1)" },
            { name: "Mars", radius: 7, color: "#C1440E", distance: 145, speed: 0.004, moons: [{ radius: 1, distance: 12, speed: 0.02, color: "#BBBBBB" }], glowColor: "rgba(193, 68, 14, 0.15)", glowSize: 3, orbitColor: "rgba(255, 255, 255, 0.1)" },
            { name: "Jupiter", radius: 20, color: "#C88B3A", distance: 190, speed: 0.002, moons: [{ radius: 2, distance: 25, speed: 0.01, color: "#DDDDDD" }, { radius: 3, distance: 35, speed: 0.008, color: "#CCCCCC" }], glowColor: "rgba(200, 139, 58, 0.15)", glowSize: 8, orbitColor: "rgba(255, 255, 255, 0.1)" },
            { name: "Saturn", radius: 18, color: "#E4BB7A", distance: 250, speed: 0.0015, rings: { innerRadius: 22, outerRadius: 30, color: "rgba(228, 187, 122, 0.7)" }, moons: [{ radius: 3, distance: 35, speed: 0.007, color: "#DDDDDD" }], glowColor: "rgba(228, 187, 122, 0.15)", glowSize: 7, orbitColor: "rgba(255, 255, 255, 0.1)" },
            { name: "Uranus", radius: 14, color: "#93B8BE", distance: 300, speed: 0.001, moons: [{ radius: 2, distance: 20, speed: 0.006, color: "#DDDDDD" }], glowColor: "rgba(147, 184, 190, 0.15)", glowSize: 5, orbitColor: "rgba(255, 255, 255, 0.1)" },
            { name: "Neptune", radius: 14, color: "#3E66A3", distance: 340, speed: 0.0008, moons: [{ radius: 2, distance: 22, speed: 0.005, color: "#DDDDDD" }], glowColor: "rgba(62, 102, 163, 0.15)", glowSize: 5, orbitColor: "rgba(255, 255, 255, 0.1)" },
        ];

        // Visual settings
        let zoom = 1;
        let targetZoom = 1;
        let centerX = canvas.width / 2;
        let centerY = canvas.height / 2;
        let angle = 0;
        let viewTilt = Math.PI / 8;
        let activePlanet = null;
        let stars = [];

        // Create stars
        function createStars() {
            for (let i = 0; i < 400; i++) {
                stars.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    size: Math.random() * 1.5,
                    opacity: Math.random() * 0.8 + 0.2
                });
            }
        }
        createStars();

        // Calculate positions with tilt
        function calculatePosition(distance, angle) {
            return {
                x: Math.cos(angle) * distance,
                y: Math.sin(angle) * distance * Math.sin(viewTilt)
            };
        }

        // Draw a planet with optional 3D effect and glow
        function drawPlanet(x, y, radius, color, glowColor, glowSize, drawDetails = false) {
            // Glow effect
            const glow = ctx.createRadialGradient(x, y, radius, x, y, radius + glowSize);
            glow.addColorStop(0, glowColor);
            glow.addColorStop(1, 'rgba(0, 0, 0, 0)');
            ctx.fillStyle = glow;
            ctx.beginPath();
            ctx.arc(x, y, radius + glowSize, 0, Math.PI * 2);
            ctx.fill();

            // Planet base
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fill();

            // 3D lighting effect
            if (drawDetails) {
                const gradient = ctx.createLinearGradient(x - radius, y - radius, x + radius * 0.5, y + radius * 0.5);
                gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
                gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
                gradient.addColorStop(1, 'rgba(0, 0, 0, 0.5)');
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // Draw Saturn's rings
        function drawRings(x, y, innerRadius, outerRadius, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.ellipse(x, y, outerRadius, outerRadius * Math.sin(viewTilt), 0, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = "#0a0a1a";
            ctx.beginPath();
            ctx.ellipse(x, y, innerRadius, innerRadius * Math.sin(viewTilt), 0, 0, Math.PI * 2);
            ctx.fill();
        }

        // Draw orbit
        function drawOrbit(distance, color) {
            ctx.strokeStyle = color;
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.ellipse(centerX, centerY, distance * zoom, distance * zoom * Math.sin(viewTilt), 0, 0, Math.PI * 2);
            ctx.stroke();
        }

        // Detect which planet was clicked
        function getPlanetAtPosition(x, y) {
            for (let i = planets.length - 1; i >= 0; i--) {
                const planet = planets[i];
                const pos = calculatePosition(planet.distance, angle + i * planet.speed);
                const planetX = centerX + pos.x * zoom;
                const planetY = centerY + pos.y * zoom;

                const dx = x - planetX;
                const dy = y - planetY;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < planet.radius * zoom * 1.5) {
                    return planet;
                }
            }
            return null;
        }

        // Handle clicks/taps
        canvas.addEventListener('click', (event) => {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            const clickedPlanet = getPlanetAtPosition(x, y);

            if (clickedPlanet) {
                activePlanet = clickedPlanet;
                targetZoom = clickedPlanet.name === "Sun" ? 1 : 2.5;

                // Show planet name
                planetNameElement.textContent = clickedPlanet.name;
                planetNameElement.style.opacity = 1;

                // Hide after 2 seconds
                setTimeout(() => {
                    planetNameElement.style.opacity = 0;
                }, 2000);
            } else {
                // Reset view
                activePlanet = null;
                targetZoom = 1;
            }
        });

        // Animation loop
        function animate() {
            // Clear canvas
            ctx.fillStyle = '#0a0a1a';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw stars
            stars.forEach(star => {
                ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
                ctx.beginPath();
                ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
                ctx.fill();
            });

            // Animate zoom
            zoom += (targetZoom - zoom) * 0.05;

            // Draw orbits
            planets.forEach(planet => {
                if (planet.distance > 0) {
                    drawOrbit(planet.distance, planet.orbitColor);
                }
            });

            // Draw planets
            planets.forEach((planet, i) => {
                const pos = calculatePosition(planet.distance, angle + i * planet.speed);
                const planetX = centerX + pos.x * zoom;
                const planetY = centerY + pos.y * zoom;

                // Draw planet
                const isActive = activePlanet === planet;
                drawPlanet(
                    planetX, 
                    planetY, 
                    planet.radius * zoom, 
                    planet.color, 
                    planet.glowColor, 
                    planet.glowSize * zoom,
                    isActive
                );

                // Draw rings for Saturn
                if (planet.rings) {
                    drawRings(
                        planetX, 
                        planetY, 
                        planet.rings.innerRadius * zoom, 
                        planet.rings.outerRadius * zoom, 
                        planet.rings.color
                    );
                }

                // Draw moons
                planet.moons.forEach(moon => {
                    const moonAngle = angle * moon.speed * 5;
                    const moonPos = {
                        x: planetX + Math.cos(moonAngle) * moon.distance * zoom,
                        y: planetY + Math.sin(moonAngle) * moon.distance * zoom * Math.sin(viewTilt)
                    };

                    drawPlanet(
                        moonPos.x, 
                        moonPos.y, 
                        moon.radius * zoom, 
                        moon.color,
                        'rgba(255, 255, 255, 0.1)',
                        moon.radius * zoom
                    );
                });
            });

            // Update angle for next frame
            angle += 0.002;

            requestAnimationFrame(animate);
        }

        // Start animation
        animate();

        // Handle window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            centerX = canvas.width / 2;
            centerY = canvas.height / 2;

            // Recalculate star positions
            stars = [];
            createStars();
        });

        // Auto-cycle through planets (great for automatic reel recording)
        let planetIndex = 0;
        setInterval(() => {
            if (!activePlanet) {
                activePlanet = planets[planetIndex];
                targetZoom = activePlanet.name === "Sun" ? 1 : 2.5;

                planetNameElement.textContent = activePlanet.name;
                planetNameElement.style.opacity = 1;

                setTimeout(() => {
                    planetNameElement.style.opacity = 0;
                }, 2000);

                planetIndex = (planetIndex + 1) % planets.length;
            }
        }, 3000);
    </script>
</body>
</html>

Hyponitic illusion using the core javascript.

Prince — Sun, 23 Mar 2025 12:26:54 +0000

`<!DOCTYPE html>

Hypnotic Illusion Pattern

<br>
body {<br>
margin: 0;<br>
padding: 0;<br>
overflow: hidden;<br>
background-color: #000;<br>
display: flex;<br>
justify-content: center;<br>
align-items: center;<br>
height: 100vh;<br>
font-family: sans-serif;<br>
perspective: 800px;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> .container {
position: relative;
width: 100vmin;
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}

.illusion-container {
    position: relative;
    width: 80vmin;
    height: 80vmin;
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid transparent;
    transform-style: preserve-3d;
}

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.7) 70%);
    pointer-events: none;
    z-index: 10;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg) rotateX(60deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(60deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
}

.info-text {
    position: absolute;
    bottom: 20px;
    color: white;
    text-align: center;
    font-size: 16px;
    z-index: 20;
    opacity: 0.8;
}

</style>
</code></pre></div>
<p></head><br>
<body><br>
<div class="container"><br>
<div class="illusion-container" id="illusion"><br>
<br>
</div><br>
</div><br>
<div class="overlay"></div><br>
<div class="info-text"><br>
Follow for more amazing coding illusions<br>
</div></p>
<div class="highlight"><pre class="highlight plaintext"><code><script>
// Configuration
const numRings = 15;
const dotsPerRing = 20;
const minRadius = 40;
const maxRadius = Math.min(window.innerWidth, window.innerHeight) * 0.4;

// Color arrays
const colors = [
    '#FF00FF', // Magenta
    '#00FFFF', // Cyan
    '#FFFF00', // Yellow
    '#FF0000', // Red
    '#00FF00', // Green
    '#0000FF'  // Blue
];

const container = document.getElementById('illusion');

// Create rings and dots
for (let i = 0; i &amp;lt; numRings; i++) {
    // Calculate radius based on position
    const radiusPercent = i / (numRings - 1);
    const radius = minRadius + radiusPercent * (maxRadius - minRadius);

    // Create ring element
    const ring = document.createElement('div');
    ring.className = 'ring';
    ring.style.width = `${radius * 2}px`;
    ring.style.height = `${radius * 2}px`;
    ring.style.marginLeft = `-${radius}px`;
    ring.style.marginTop = `-${radius}px`;

    // Additional 3D transform for depth effect
    const zOffset = -300 + (i * 600 / numRings);
    ring.style.transform = `translateZ(${zOffset}px)`;

    // Create dots around this ring
    for (let j = 0; j &amp;lt; dotsPerRing; j++) {
        const angle = (j / dotsPerRing) * Math.PI * 2;
        const x = Math.cos(angle) * radius;
        const y = Math.sin(angle) * radius;

        const dot = document.createElement('div');
        dot.className = 'dot';

        // Calculate position
        dot.style.left = `${x}px`;
        dot.style.top = `${y}px`;

        // Select color
        const colorIndex = (i + j) % colors.length;
        dot.style.backgroundColor = colors[colorIndex];
        dot.style.boxShadow = `0 0 8px 2px ${colors[colorIndex]}`;

        // Add animation with delay
        const delay = (i * dotsPerRing + j) * 0.05;
        dot.style.animation = `pulse 3s ease-in-out ${delay}s infinite`;

        // Add dots to the ring
        ring.appendChild(dot);
    }

    // Add ring to container
    container.appendChild(ring);
}

// Interactive movement
document.addEventListener('mousemove', (e) =&amp;gt; {
    const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
    const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
    container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

// Touch support for mobile
document.addEventListener('touchmove', (e) =&amp;gt; {
    if (e.touches.length &amp;gt; 0) {
        const touch = e.touches[0];
        const xAxis = (window.innerWidth / 2 - touch.pageX) / 25;
        const yAxis = (window.innerHeight / 2 - touch.pageY) / 25;
        container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
        e.preventDefault();
    }
}, { passive: false });

// Random color changes
setInterval(() =&amp;gt; {
    const dots = document.querySelectorAll('.dot');
    dots.forEach(dot =&amp;gt; {
        if (Math.random() &amp;gt; 0.98) {
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            dot.style.backgroundColor = randomColor;
            dot.style.boxShadow = `0 0 8px 2px ${randomColor}`;
        }
    });
}, 100);

</script>
</code></pre></div>
<p></body><br>
</html>`</p>

Parallax illusion effects in html css and js under 30 seconds.

Prince — Sun, 23 Mar 2025 12:25:25 +0000

`<!DOCTYPE html>

Dual Warping Liquid Effect

<br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
overflow: hidden;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
background: black;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
}

.warp-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.warp-section {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.warp-effect {
    position: absolute;
    width: 90%;
    height: 90%;
    filter: url(#warpFilter);
}

.left .warp-effect {
    background: linear-gradient(45deg, cyan, blue, purple);
}

.right .warp-effect {
    background: linear-gradient(45deg, red, orange, yellow);
}

.center-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.8), rgba(0, 255, 255, 0.6));
    border-radius: 50%;
    filter: blur(20px) drop-shadow(0 0 30px rgba(255, 0, 255, 0.8));
    animation: morph 5s infinite alternate ease-in-out, pulse 3s infinite;
}

@keyframes morph {
    0% { border-radius: 50%; transform: scale(1) rotate(0deg); }
    50% { border-radius: 40% 60% 50% 50%; transform: scale(1.1) rotate(30deg); }
    100% { border-radius: 60% 40% 50% 50%; transform: scale(1) rotate(-30deg); }
}

@keyframes pulse {
    0% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
    50% { filter: blur(25px) drop-shadow(0 0 40px rgba(0, 255, 255, 0.9)); }
    100% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
}

svg {
    position: absolute;
    width: 0;
    height: 0;
}

</style>
</code></pre></div>
<p></head><br>
<body><br>
<div class="warp-container"><br>
<div class="warp-section left"><br>
<div class="warp-effect"></div><br>
<div class="center-orb"></div><br>
</div><br>
<div class="warp-section right"><br>
<div class="warp-effect"></div><br>
<div class="center-orb"></div><br>
</div><br>
</div></p>
<div class="highlight"><pre class="highlight plaintext"><code><svg>
<filter id="warpFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="6" seed="3">
<animate attributeName="seed" values="3;6;9;3" dur="5s" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="50">
<animate attributeName="scale" values="20;50;30;70;40;20" dur="6s" repeatCount="indefinite"/>
</feDisplacementMap>
</filter>
</svg>
</code></pre></div>
<p></body><br>
</html><br>
`</p>

Navbar creation using the html css and javascript in 30seconds.

Prince — Sun, 23 Mar 2025 12:24:06 +0000

Full code snippets:

`<!DOCTYPE html>

Illusionistic Neon Navbar

<br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
min-height: 100vh;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.navbar {
    position: relative;
    width: 600px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    overflow: visible;

}

.navbar ul {
    display: flex;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

.navbar ul li {
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left:30px;
    transition: transform 0.5s ease-in-out;
}

.navbar ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: white;
    text-decoration: none;
}

.navbar ul li a .icon {
    position: relative;
    font-size: 24px;
    transition: 0.5s;
}

.navbar ul li:hover a .icon {
    transform: translateY(-5px);
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
}

.navbar ul l.active a .text {
    position: absolute;
    opacity: 0;
    font-size: 12px;
    transition: 0.5s;
    transform: translateY(15px);

}

.navbar ul li:hover a .text, 
.navbar ul li.active a .text {
    opacity: 1;
}

/* Glowing Indicator */
.indicator {
    position: absolute;
    width: 80px;
    height: 80px;
    background: red;
    border-radius: 50%;
    transition: 0.5s ease-in-out;
    z-index: 1;
    top: -50px; /* Positioned above navbar */
    left: 50%;
    transform: translateX(-50%) scale(0);
}

/* Active Effect */
.navbar ul li.active .icon {
    color: white;
    transform: translateY(-30px) scale(1.2);
    text-shadow: 0 0 10px rgb(210, 202, 202), 0 0 20px rgba(255, 255, 255, 0.8);
}

.navbar ul li.active {
    transform: translateY(-15px);
    z-index: 10;
}

.navbar ul li.active a {
    position: relative;
    z-index: 15;
}

</style>
</code></pre></div>
<p></head><br>
<body><br>
<div class="navbar"><br>
<ul><br>
<li><br>
<a href="#"><br>
<span class="icon"><i class="fas fa-home"></i></span><br>
<span class="text">Home</span><br>
</a><br>
</li><br>
<li><br>
<a href="#"><br>
<span class="icon"><i class="fas fa-user"></i></span><br>
<span class="text">Profile</span><br>
</a><br>
</li><br>
<li><br>
<a href="#"><br>
<span class="icon"><i class="fas fa-comments"></i></span><br>
<span class="text">Message</span><br>
</a><br>
</li><br>
<li><br>
<a href="#"><br>
<span class="icon"><i class="fas fa-camera"></i></span><br>
<span class="text">Photos</span><br>
</a><br>
</li><br>
<li><br>
<a href="#"><br>
<span class="icon"><i class="fas fa-cog"></i></span><br>
<span class="text">Settings</span><br>
</a><br>
</li><br>
</ul><br>
<div class="indicator"></div><br>
</div></p>
<div class="highlight"><pre class="highlight plaintext"><code><script>
const list = document.querySelectorAll('.navbar ul li');
const indicator = document.querySelector('.indicator');

function activeLink() {
    list.forEach((item) =&amp;gt; item.classList.remove('active'));
    this.classList.add('active');

    // Get the selected item's position
    let pos = this.offsetLeft + this.offsetWidth / 2;

    // Move indicator to the selected item
    indicator.style.opacity = "1";
    indicator.style.left = `${pos}px`;
    indicator.style.transform = "translateX(-50%) scale(1)";
}

list.forEach((item) =&amp;gt; item.addEventListener('click', activeLink));

</script>
</code></pre></div>
<p></body><br>
</html><br>
`</p>

Heartful animation made using the basics of the html css and javascript . follow for more.

Prince — Sun, 23 Mar 2025 12:22:38 +0000

Follow our page on the instagram for more learning's and coding videos : https://www.instagram.com/prince_codes1/