Neumorphic Parallax Timepiece: Dynamic CSS & JavaScript Showcase

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

body {
            background: radial-gradient(circle at center, #1a1a24 0%, #0b0b0e 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            perspective: 1000px;
        }

.clock-container {
            position: relative;
            width: 400px;
            height: 400px;
            transform-style: preserve-3d;
            transition: transform 0.1s ease-out;
        }

.ring-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
        }

.ring {
            position: relative;
            border-radius: 50%;
            transform-style: preserve-3d;
        }

.ring-sec {
            width: 400px;
            height: 400px;
            border: 1px solid rgba(255, 42, 109, 0.3);
            box-shadow: 0 0 20px rgba(255, 42, 109, 0.1), inset 0 0 20px rgba(255, 42, 109, 0.1);
        }

.ring-min {
            width: 300px;
            height: 300px;
            border: 1px solid rgba(5, 217, 232, 0.3);
            box-shadow: 0 0 20px rgba(5, 217, 232, 0.1), inset 0 0 20px rgba(5, 217, 232, 0.1);
        }

.ring-hr {
            width: 200px;
            height: 200px;
            border: 1px solid rgba(209, 247, 255, 0.3);
            box-shadow: 0 0 20px rgba(209, 247, 255, 0.1), inset 0 0 20px rgba(209, 247, 255, 0.1);
        }

.dot {
            position: absolute;
            left: 50%;
            top: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

.dot-sec {
            background-color: #ff2a6d;
            box-shadow: 0 0 20px 4px #ff2a6d;
        }

.dot-min {
            background-color: #05d9e8;
            box-shadow: 0 0 20px 4px #05d9e8;
        }

.dot-hr {
            background-color: #d1f7ff;
            box-shadow: 0 0 20px 4px #d1f7ff;
        }

.time-display {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(120px);
            color: #ffffff;
            font-size: 2.8rem;
            letter-spacing: 4px;
            pointer-events: none;
            animation: pulse 2s infinite;
        }

@keyframes pulse {
            0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.4); }
            50% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }
        }
    </style>
</head>
<body>
    <div class="clock-container" id="clock">
        <div class="ring-wrapper" id="ring-s">
            <div class="ring ring-sec">
                <div class="dot dot-sec"></div>
            </div>
        </div>
        <div class="ring-wrapper" id="ring-m">
            <div class="ring ring-min">
                <div class="dot dot-min"></div>
            </div>
        </div>
        <div class="ring-wrapper" id="ring-h">
            <div class="ring ring-hr">
                <div class="dot dot-hr"></div>
            </div>
        </div>
        <div class="time-display" id="time">00:00:00</div>
    </div>

document.addEventListener('mouseleave', () => {
            clock.style.transform = `rotateY(0deg) rotateX(0deg)`;
        });

function updateClock() {
            const now = new Date();
            const s = now.getSeconds();
            const ms = now.getMilliseconds();
            const m = now.getMinutes();
            const h = now.getHours();

const sDeg = ((s + ms / 1000) / 60) * 360;
            const mDeg = ((m + s / 60) / 60) * 360;
            const hDeg = ((h % 12 + m / 60) / 12) * 360;

ringS.style.transform = `translateZ(20px) rotateZ(${sDeg}deg)`;
            ringM.style.transform = `translateZ(50px) rotateZ(${mDeg}deg)`;
            ringH.style.transform = `translateZ(80px) rotateZ(${hDeg}deg)`;

const hh = String(h).padStart(2, '0');
            const mm = String(m).padStart(2, '0');
            const ss = String(s).padStart(2, '0');
            timeDisplay.textContent = `${hh}:${mm}:${ss}`;

requestAnimationFrame(updateClock);
        }

updateClock();
    </script>
</body>
</html>

Neumorphic Parallax Timepiece: Dynamic CSS & JavaScript Showcase

You may like these posts :

Write Your Comment