Hyponitic illusion using the core javascript.

.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; } 

// 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 < 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 < 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) => { 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) => { if (e.touches.length > 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(() => { const dots = document.querySelectorAll('.dot'); dots.forEach(dot => { if (Math.random() > 0.98) { const randomColor = colors[Math.floor(Math.random() * colors.length)]; dot.style.backgroundColor = randomColor; dot.style.boxShadow = `0 0 8px 2px ${randomColor}`; } }); }, 100);