3D Count downer

Forked from @gopi/simple-count-down-timer

This tailwind example is contributed by Hasan AlDoy (McDoy), on 24-Apr-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Timer,Time counter

Other Widget Countdown Timer

Author Hasan AlDoy (McDoy)

Tailwind v3.4 318 1

Fork Fullscreen

<div id="luxury-countdown-app" dir="rtl">
    <div class="luxury-toolbar">
        <div class="toolbar-title">
            <span>عداد تنازلي</span>
            <small>Luxury 3D Engraved Leather Cube Countdown</small>
        </div>

<details class="target-picker">
            <summary>تغيير التاريخ والوقت</summary>

<div class="picker-panel" dir="ltr">
                <label>
                    Target Date & Time
                    <input id="targetDateTimeInput" type="datetime-local" />
                </label>

<button id="applyTargetDate" type="button">Apply</button>
            </div>
        </details>
    </div>

<div class="countdown-labels" dir="ltr">
        <span>Days</span>
        <span>Hours</span>
        <span>Minutes</span>
        <span>Seconds</span>
    </div>

#luxury-countdown-app {
            position: fixed;
            inset: 0;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .11), transparent 30%),
                radial-gradient(circle at 82% 16%, rgba(245, 222, 179, .13), transparent 34%),
                radial-gradient(circle at 50% 118%, rgba(178, 92, 38, .27), transparent 50%),
                linear-gradient(180deg, #111827 0%, #05070d 48%, #020617 100%);
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;
        }

#luxury-countdown-app::before {
            content: "";
            position: absolute;
            inset: -75%;
            z-index: 0;
            pointer-events: none;
            background:
                conic-gradient(from 120deg, transparent, rgba(255, 255, 255, .13), transparent 28%),
                radial-gradient(circle, rgba(255, 255, 255, .2) 0 1px, transparent 1px 100%);
            background-size: 100% 100%, 30px 30px;
            opacity: .34;
            animation: ambient-spin 32s linear infinite;
        }

@keyframes ambient-spin {
            to {
                transform: rotate(360deg);
            }
        }

.luxury-toolbar {
            position: absolute;
            top: 22px;
            left: 22px;
            right: 22px;
            z-index: 12;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            pointer-events: none;
        }

.toolbar-title {
            pointer-events: auto;
            padding: 14px 18px;
            border-radius: 20px;
            color: #f8fafc;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .045)),
                rgba(15, 23, 42, .5);
            border: 1px solid rgba(255, 255, 255, .12);
            box-shadow:
                0 20px 50px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .17);
            backdrop-filter: blur(16px);
        }

.toolbar-title span {
            display: block;
            font-size: clamp(22px, 3vw, 38px);
            font-weight: 950;
            line-height: 1.05;
            letter-spacing: -.04em;
            text-shadow: 0 12px 28px rgba(0, 0, 0, .42);
        }

.toolbar-title small {
            display: block;
            margin-top: 5px;
            direction: ltr;
            color: rgba(248, 250, 252, .68);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

.target-picker {
            position: relative;
            pointer-events: auto;
            direction: rtl;
        }

.target-picker summary {
            list-style: none;
            cursor: pointer;
            user-select: none;
            padding: 12px 15px;
            border-radius: 999px;
            color: #fef3c7;
            font-size: 13px;
            font-weight: 900;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)),
                rgba(30, 41, 59, .56);
            border: 1px solid rgba(251, 191, 36, .24);
            box-shadow:
                0 18px 45px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .14);
            backdrop-filter: blur(16px);
        }

.target-picker summary::-webkit-details-marker {
            display: none;
        }

.picker-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 265px;
            padding: 14px;
            border-radius: 18px;
            color: #f8fafc;
            background:
                linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(2, 6, 23, .86));
            border: 1px solid rgba(255, 255, 255, .12);
            box-shadow:
                0 26px 70px rgba(0, 0, 0, .45),
                inset 0 1px 0 rgba(255, 255, 255, .12);
            backdrop-filter: blur(18px);
        }

.picker-panel label {
            display: grid;
            gap: 8px;
            color: rgba(248, 250, 252, .76);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.picker-panel input {
            width: 100%;
            box-sizing: border-box;
            border: 0;
            outline: 0;
            border-radius: 12px;
            padding: 11px 12px;
            color: #0f172a;
            background: #fff7ed;
            font: inherit;
            font-size: 13px;
            font-weight: 800;
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35);
        }

.picker-panel button {
            width: 100%;
            margin-top: 11px;
            border: 0;
            cursor: pointer;
            border-radius: 12px;
            padding: 11px 12px;
            color: #1c1917;
            background: linear-gradient(135deg, #fde68a, #f59e0b);
            font-size: 13px;
            font-weight: 950;
            box-shadow:
                0 14px 28px rgba(245, 158, 11, .24),
                inset 0 1px 0 rgba(255, 255, 255, .48);
        }

.three-countdown-stage {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

.three-countdown-stage canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

.countdown-labels {
            position: absolute;
            left: 50%;
            bottom: clamp(26px, 5vh, 54px);
            z-index: 8;
            width: min(78vw, 940px);
            transform: translateX(-50%);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: clamp(8px, 3vw, 42px);
            color: rgba(248, 250, 252, .78);
            font-size: clamp(10px, 1.2vw, 14px);
            font-weight: 950;
            letter-spacing: .16em;
            text-transform: uppercase;
            text-align: center;
            text-shadow: 0 8px 22px rgba(0, 0, 0, .52);
            pointer-events: none;
        }

@media (max-width: 720px) {
            .luxury-toolbar {
                top: 14px;
                left: 14px;
                right: 14px;
            }

.toolbar-title {
                padding: 12px 14px;
            }

.toolbar-title small {
                display: none;
            }

.target-picker summary {
                font-size: 0;
                padding: 12px;
            }

.target-picker summary::before {
                content: "⚙";
                font-size: 18px;
            }

.picker-panel {
                right: 0;
                width: min(265px, calc(100vw - 28px));
            }
        }
    </style>

(() => {
            const mount = document.getElementById("three-countdown-stage");
            const input = document.getElementById("targetDateTimeInput");
            const applyButton = document.getElementById("applyTargetDate");

let targetDate = new Date("Jan 5, 2029 15:37:25").getTime();

const textureCache = new Map();
            const materialCache = new Map();

const scene = new THREE.Scene();
            scene.background = new THREE.Color(0x05070d);
            scene.fog = new THREE.FogExp2(0x05070d, .05);

const renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: false,
                powerPreference: "high-performance"
            });

renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
            renderer.setSize(mount.clientWidth, mount.clientHeight);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.outputColorSpace = THREE.SRGBColorSpace;
            renderer.toneMapping = THREE.ACESFilmicToneMapping;
            renderer.toneMappingExposure = 1.12;
            mount.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(36, mount.clientWidth / mount.clientHeight, .1, 100);
            camera.position.set(0, 4.15, 11.7);
            camera.lookAt(0, .2, 0);

const sceneClock = new THREE.Clock();

const hemi = new THREE.HemisphereLight(0xfff4dd, 0x111827, .82);
            scene.add(hemi);

const keyLight = new THREE.SpotLight(0xffdfad, 410, 28, Math.PI * .15, .57, 1.24);
            keyLight.position.set(-5.7, 8.9, 6.9);
            keyLight.target.position.set(.15, .18, .15);
            keyLight.castShadow = true;
            keyLight.shadow.mapSize.set(4096, 4096);
            keyLight.shadow.camera.near = .4;
            keyLight.shadow.camera.far = 34;
            keyLight.shadow.camera.fov = 32;
            keyLight.shadow.bias = -.00004;
            keyLight.shadow.normalBias = .035;
            keyLight.shadow.radius = 6;
            scene.add(keyLight, keyLight.target);

const crossLight = new THREE.SpotLight(0xffaf66, 145, 22, Math.PI * .19, .62, 1.18);
            crossLight.position.set(5.8, 5.6, 4.8);
            crossLight.target.position.set(-.65, -.12, .05);
            crossLight.castShadow = true;
            crossLight.shadow.mapSize.set(2048, 2048);
            crossLight.shadow.camera.near = .5;
            crossLight.shadow.camera.far = 26;
            crossLight.shadow.camera.fov = 40;
            crossLight.shadow.bias = -.000035;
            crossLight.shadow.normalBias = .035;
            crossLight.shadow.radius = 5;
            scene.add(crossLight, crossLight.target);

const rimLight = new THREE.SpotLight(0xbfd7ff, 82, 22, Math.PI * .2, .5, 1.2);
            rimLight.position.set(5.6, 4.6, -4.6);
            rimLight.target.position.set(0, .18, 0);
            scene.add(rimLight, rimLight.target);

const deskWarmLight = new THREE.PointLight(0xff9f55, 34, 8, 2);
            deskWarmLight.position.set(0, .28, 2.75);
            deskWarmLight.castShadow = true;
            deskWarmLight.shadow.mapSize.set(1024, 1024);
            deskWarmLight.shadow.bias = -.00005;
            scene.add(deskWarmLight);

function makeWoodTexture() {
                const c = document.createElement("canvas");
                c.width = 1600;
                c.height = 1200;

const ctx = c.getContext("2d");

const g = ctx.createLinearGradient(0, 0, c.width, c.height);
                g.addColorStop(0, "#27150c");
                g.addColorStop(.24, "#6d4325");
                g.addColorStop(.52, "#3a2012");
                g.addColorStop(.78, "#8a5732");
                g.addColorStop(1, "#1b0d07");

ctx.fillStyle = g;
                ctx.fillRect(0, 0, c.width, c.height);

for (let i = 0; i < 880; i++) {
                    const y = Math.random() * c.height;
                    const thickness = .4 + Math.random() * 3.2;
                    const alpha = .035 + Math.random() * .09;

ctx.beginPath();
                    ctx.moveTo(-120, y);

for (let x = -120; x <= c.width + 120; x += 72) {
                        ctx.lineTo(
                            x,
                            y +
                            Math.sin(x * .009 + i * .31) * (6 + Math.random() * 18) +
                            Math.sin(x * .026 + i) * (1 + Math.random() * 5)
                        );
                    }

ctx.strokeStyle = Math.random() > .52
                        ? `rgba(255, 220, 160, ${alpha})`
                        : `rgba(18, 8, 3, ${alpha})`;

ctx.lineWidth = thickness;
                    ctx.stroke();
                }

for (let i = 0; i < 46; i++) {
                    const x = Math.random() * c.width;
                    const y = Math.random() * c.height;

ctx.beginPath();
                    ctx.ellipse(x, y, 40 + Math.random() * 120, 8 + Math.random() * 22, Math.random() * Math.PI, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(20, 8, 3, ${.04 + Math.random() * .08})`;
                    ctx.lineWidth = 2 + Math.random() * 6;
                    ctx.stroke();
                }

const texture = new THREE.CanvasTexture(c);
                texture.colorSpace = THREE.SRGBColorSpace;
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set(2.8, 1.75);
                texture.anisotropy = 16;

return texture;
            }

function makeLeatherNumberTexture(value, digits = 2) {
                const key = `${digits}:${value}`;

if (textureCache.has(key)) {
                    return textureCache.get(key);
                }

const c = document.createElement("canvas");
                c.width = 1024;
                c.height = 1024;

const ctx = c.getContext("2d");

const leather = ctx.createRadialGradient(350, 230, 80, 512, 540, 850);
                leather.addColorStop(0, "#742b1f");
                leather.addColorStop(.28, "#471710");
                leather.addColorStop(.68, "#1b0806");
                leather.addColorStop(1, "#070202");

ctx.fillStyle = leather;
                ctx.fillRect(0, 0, c.width, c.height);

for (let i = 0; i < 36000; i++) {
                    const x = Math.random() * c.width;
                    const y = Math.random() * c.height;
                    const a = Math.random() * .08;
                    const s = Math.random() * 1.55;

ctx.fillStyle = Math.random() > .52
                        ? `rgba(255, 214, 176, ${a})`
                        : `rgba(0, 0, 0, ${a})`;

ctx.fillRect(x, y, s, s);
                }

for (let i = 0; i < 145; i++) {
                    const x = Math.random() * c.width;
                    const y = Math.random() * c.height;

ctx.beginPath();
                    ctx.ellipse(
                        x,
                        y,
                        18 + Math.random() * 95,
                        2 + Math.random() * 8,
                        Math.random() * Math.PI,
                        0,
                        Math.PI * 2
                    );
                    ctx.strokeStyle = `rgba(255, 190, 150, ${Math.random() * .048})`;
                    ctx.lineWidth = .8 + Math.random() * 1.4;
                    ctx.stroke();
                }

const border = ctx.createLinearGradient(0, 0, c.width, c.height);
                border.addColorStop(0, "rgba(255,220,170,.42)");
                border.addColorStop(.46, "rgba(60,16,10,.1)");
                border.addColorStop(1, "rgba(0,0,0,.62)");

ctx.lineWidth = 34;
                ctx.strokeStyle = border;
                ctx.strokeRect(34, 34, c.width - 68, c.height - 68);

ctx.save();
                ctx.strokeStyle = "rgba(255, 204, 154, .16)";
                ctx.lineWidth = 4;
                ctx.setLineDash([18, 18]);
                ctx.strokeRect(74, 74, c.width - 148, c.height - 148);
                ctx.restore();

const text = String(value).padStart(digits, "0");
                const hasText = String(value).length > 0;
                const fontSize = digits >= 3 ? 330 : 390;

if (hasText) {
                    ctx.font = `950 ${fontSize}px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial`;
                    ctx.textAlign = "center";
                    ctx.textBaseline = "middle";

ctx.save();
                    ctx.globalCompositeOperation = "multiply";
                    ctx.lineJoin = "round";
                    ctx.lineCap = "round";
                    ctx.shadowColor = "rgba(0,0,0,.96)";
                    ctx.shadowBlur = 28;
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 22;
                    ctx.strokeStyle = "rgba(2, 1, 1, .92)";
                    ctx.lineWidth = 40;
                    ctx.strokeText(text, 512, 528);
                    ctx.fillStyle = "rgba(8, 3, 2, .8)";
                    ctx.fillText(text, 512, 528);
                    ctx.restore();

ctx.save();
                    ctx.globalCompositeOperation = "screen";
                    ctx.font = `950 ${fontSize}px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial`;
                    ctx.textAlign = "center";
                    ctx.textBaseline = "middle";
                    ctx.strokeStyle = "rgba(255, 224, 186, .37)";
                    ctx.lineWidth = 9;
                    ctx.strokeText(text, 505, 500);
                    ctx.fillStyle = "rgba(255, 238, 212, .12)";
                    ctx.fillText(text, 504, 498);
                    ctx.restore();

ctx.save();
                    ctx.globalCompositeOperation = "multiply";
                    ctx.font = `950 ${fontSize}px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial`;
                    ctx.textAlign = "center";
                    ctx.textBaseline = "middle";
                    ctx.strokeStyle = "rgba(0, 0, 0, .48)";
                    ctx.lineWidth = 14;
                    ctx.strokeText(text, 522, 544);
                    ctx.restore();
                }

const gloss = ctx.createLinearGradient(0, 0, c.width, c.height);
                gloss.addColorStop(0, "rgba(255,255,255,.31)");
                gloss.addColorStop(.19, "rgba(255,255,255,.06)");
                gloss.addColorStop(.42, "rgba(255,255,255,0)");
                gloss.addColorStop(1, "rgba(0,0,0,.22)");

ctx.fillStyle = gloss;
                ctx.fillRect(0, 0, c.width, c.height);

const texture = new THREE.CanvasTexture(c);
                texture.colorSpace = THREE.SRGBColorSpace;
                texture.anisotropy = 16;
                texture.needsUpdate = true;

textureCache.set(key, texture);

return texture;
            }

function makeLeatherMaterial(value, digits = 2) {
                const key = `mat:${digits}:${value}`;

if (materialCache.has(key)) {
                    return materialCache.get(key);
                }

const material = new THREE.MeshPhysicalMaterial({
                    map: makeLeatherNumberTexture(value, digits),
                    color: 0xffffff,
                    roughness: .74,
                    metalness: .025,
                    clearcoat: .72,
                    clearcoatRoughness: .48,
                    sheen: .76,
                    sheenColor: new THREE.Color(0x9b3b28),
                    sheenRoughness: .67
                });

materialCache.set(key, material);

return material;
            }

const sideMaterial = makeLeatherMaterial("", 2);

const deskTexture = makeWoodTexture();

const desk = new THREE.Mesh(
                new THREE.BoxGeometry(18, .62, 9.5),
                new THREE.MeshPhysicalMaterial({
                    map: deskTexture,
                    color: 0xffffff,
                    roughness: .48,
                    metalness: .055,
                    clearcoat: .88,
                    clearcoatRoughness: .26
                })
            );

desk.position.set(0, -1.55, .72);
            desk.receiveShadow = true;
            desk.castShadow = true;
            scene.add(desk);

const deskFront = new THREE.Mesh(
                new THREE.BoxGeometry(18.2, 2.4, .38),
                new THREE.MeshStandardMaterial({
                    color: 0x1f120b,
                    roughness: .8,
                    metalness: .04
                })
            );

deskFront.position.set(0, -2.55, 5.28);
            deskFront.receiveShadow = true;
            scene.add(deskFront);

const backWall = new THREE.Mesh(
                new THREE.PlaneGeometry(26, 15),
                new THREE.MeshStandardMaterial({
                    color: 0x080d15,
                    roughness: .92,
                    metalness: 0
                })
            );

backWall.position.set(0, 3.0, -5.65);
            backWall.receiveShadow = true;
            scene.add(backWall);

const leftWall = new THREE.Mesh(
                new THREE.PlaneGeometry(13, 14),
                new THREE.MeshStandardMaterial({
                    color: 0x060911,
                    roughness: .95,
                    metalness: 0
                })
            );

leftWall.position.set(-9.2, 2.2, .2);
            leftWall.rotation.y = Math.PI / 2;
            leftWall.receiveShadow = true;
            scene.add(leftWall);

const rightWall = new THREE.Mesh(
                new THREE.PlaneGeometry(13, 14),
                new THREE.MeshStandardMaterial({
                    color: 0x070a12,
                    roughness: .95,
                    metalness: 0
                })
            );

rightWall.position.set(9.2, 2.2, .2);
            rightWall.rotation.y = -Math.PI / 2;
            rightWall.receiveShadow = true;
            scene.add(rightWall);

const stageGlow = new THREE.Mesh(
                new THREE.CircleGeometry(5.5, 128),
                new THREE.MeshBasicMaterial({
                    color: 0xffb46b,
                    transparent: true,
                    opacity: .13,
                    depthWrite: false
                })
            );

stageGlow.position.set(0, -1.224, 1.72);
            stageGlow.rotation.x = -Math.PI / 2;
            scene.add(stageGlow);

const shadowCatcher = new THREE.Mesh(
                new THREE.PlaneGeometry(11.8, 4.1),
                new THREE.ShadowMaterial({
                    opacity: .46,
                    transparent: true
                })
            );

shadowCatcher.position.set(0, -1.222, .55);
            shadowCatcher.rotation.x = -Math.PI / 2;
            shadowCatcher.receiveShadow = true;
            scene.add(shadowCatcher);

const cubeGeometry = new RoundedBoxGeometry(1.82, 1.82, 1.82, 10, .18);

class FlipCube {
                constructor(unit, digits, x) {
                    this.unit = unit;
                    this.digits = digits;
                    this.value = null;
                    this.nextValue = null;
                    this.isFlipping = false;
                    this.startTime = 0;
                    this.duration = .9;
                    this.baseX = x;

this.group = new THREE.Group();
                    this.group.position.set(x, .04, .08);
                    this.group.rotation.set(-.06, 0, 0);

this.cube = new THREE.Mesh(cubeGeometry, [
                        sideMaterial,
                        sideMaterial,
                        sideMaterial,
                        sideMaterial,
                        sideMaterial,
                        sideMaterial
                    ]);

this.cube.castShadow = true;
                    this.cube.receiveShadow = true;
                    this.cube.customDepthMaterial = new THREE.MeshDepthMaterial({
                        depthPacking: THREE.RGBADepthPacking
                    });

this.group.add(this.cube);

this.contactShadow = new THREE.Mesh(
                        new THREE.CircleGeometry(1.35, 64),
                        new THREE.MeshBasicMaterial({
                            color: 0x000000,
                            transparent: true,
                            opacity: .18,
                            depthWrite: false
                        })
                    );

this.contactShadow.position.set(x, -1.212, .28);
                    this.contactShadow.rotation.x = -Math.PI / 2;
                    this.contactShadow.scale.set(1.25, .46, 1);

scene.add(this.contactShadow);
                    scene.add(this.group);
                }

setMaterials(frontValue, topValue = frontValue) {
                    this.cube.material = [
                        sideMaterial,
                        sideMaterial,
                        makeLeatherMaterial(topValue, this.digits),
                        sideMaterial,
                        makeLeatherMaterial(frontValue, this.digits),
                        sideMaterial
                    ];

this.cube.material.forEach((material) => {
                        material.needsUpdate = true;
                    });
                }

setInitial(value) {
                    this.value = value;
                    this.nextValue = null;
                    this.isFlipping = false;
                    this.cube.rotation.x = 0;
                    this.group.rotation.z = 0;
                    this.group.position.y = .04;
                    this.setMaterials(value, value);
                }

flipTo(value) {
                    if (this.value === null) {
                        this.setInitial(value);
                        return;
                    }

if (this.value === value || this.isFlipping) {
                        return;
                    }

this.nextValue = value;
                    this.isFlipping = true;
                    this.startTime = sceneClock.elapsedTime;

this.cube.rotation.x = 0;
                    this.group.position.y = .04;
                    this.group.rotation.z = 0;

this.setMaterials(this.value, value);
                }

update(t) {
                    if (!this.isFlipping) {
                        this.group.rotation.y = Math.sin(t * .43 + this.baseX) * .018;
                        this.contactShadow.material.opacity = .18 + Math.sin(t * .8 + this.baseX) * .015;
                        return;
                    }

const elapsed = t - this.startTime;
                    const p = Math.min(elapsed / this.duration, 1);
                    const ease = p < .5
                        ? 4 * p * p * p
                        : 1 - Math.pow(-2 * p + 2, 3) / 2;

const anticipation = Math.sin(Math.min(p * 2.2, 1) * Math.PI) * -.045;
                    const overshoot = Math.sin(p * Math.PI) * .06;
                    const settle = Math.sin(p * Math.PI * 3.4) * (1 - p) * .028;

this.cube.rotation.x = anticipation + (Math.PI / 2) * ease + overshoot + settle;
                    this.group.position.y = .04 + Math.sin(p * Math.PI) * .42;
                    this.group.rotation.z = Math.sin(p * Math.PI) * .02;

const squash = Math.sin(p * Math.PI);
                    this.contactShadow.scale.set(1.28 + squash * .34, .48 + squash * .1, 1);
                    this.contactShadow.material.opacity = .2 + squash * .2;

if (p >= 1) {
                        this.value = this.nextValue;
                        this.nextValue = null;
                        this.isFlipping = false;

this.cube.rotation.x = 0;
                        this.group.rotation.z = 0;
                        this.group.position.y = .04;
                        this.contactShadow.scale.set(1.25, .46, 1);
                        this.contactShadow.material.opacity = .18;

this.setMaterials(this.value, this.value);
                    }
                }
            }

const cubes = [
                new FlipCube("days", 3, -4.05),
                new FlipCube("hours", 2, -1.35),
                new FlipCube("minutes", 2, 1.35),
                new FlipCube("seconds", 2, 4.05)
            ];

const cubeMap = {
                days: cubes[0],
                hours: cubes[1],
                minutes: cubes[2],
                seconds: cubes[3]
            };

const separators = [];

function makeSeparator(x) {
                const group = new THREE.Group();
                group.position.set(x, .05, .28);

const material = new THREE.MeshPhysicalMaterial({
                    color: 0xd6a46d,
                    roughness: .25,
                    metalness: .76,
                    clearcoat: .82,
                    clearcoatRoughness: .16
                });

const dotGeo = new THREE.SphereGeometry(.105, 36, 18);

const top = new THREE.Mesh(dotGeo, material);
                top.position.y = .39;
                top.castShadow = true;
                top.receiveShadow = true;

const bottom = new THREE.Mesh(dotGeo, material);
                bottom.position.y = -.39;
                bottom.castShadow = true;
                bottom.receiveShadow = true;

group.add(top, bottom);
                scene.add(group);
                separators.push(group);
            }

makeSeparator(-2.7);
            makeSeparator(0);
            makeSeparator(2.7);

const pad = (number, length = 2) => String(Math.max(0, number)).padStart(length, "0");

function toLocalDateTimeValue(timestamp) {
                const date = new Date(timestamp);
                const offset = date.getTimezoneOffset();
                const local = new Date(date.getTime() - offset * 60000);
                return local.toISOString().slice(0, 16);
            }

input.value = toLocalDateTimeValue(targetDate);

function getTimeParts() {
                const distance = targetDate - Date.now();

if (distance <= 0) {
                    return {
                        days: "000",
                        hours: "00",
                        minutes: "00",
                        seconds: "00"
                    };
                }

const days = Math.floor(distance / 86400000);
                const hours = Math.floor((distance % 86400000) / 3600000);
                const minutes = Math.floor((distance % 3600000) / 60000);
                const seconds = Math.floor((distance % 60000) / 1000);

return {
                    days: pad(days, 3),
                    hours: pad(hours),
                    minutes: pad(minutes),
                    seconds: pad(seconds)
                };
            }

function syncCountdown(force = false) {
                const parts = getTimeParts();

if (force) {
                    cubeMap.days.setInitial(parts.days);
                    cubeMap.hours.setInitial(parts.hours);
                    cubeMap.minutes.setInitial(parts.minutes);
                    cubeMap.seconds.setInitial(parts.seconds);
                    return;
                }

cubeMap.days.flipTo(parts.days);
                cubeMap.hours.flipTo(parts.hours);
                cubeMap.minutes.flipTo(parts.minutes);
                cubeMap.seconds.flipTo(parts.seconds);
            }

applyButton.addEventListener("click", () => {
                if (!input.value) {
                    return;
                }

const parsed = new Date(input.value).getTime();

if (Number.isNaN(parsed)) {
                    return;
                }

targetDate = parsed;
                syncCountdown(true);
            });

input.addEventListener("keydown", (event) => {
                if (event.key === "Enter") {
                    applyButton.click();
                }
            });

syncCountdown(true);

let lastSecond = -1;

function resize() {
                const w = mount.clientWidth;
                const h = mount.clientHeight;
                const ratio = w / h;

renderer.setSize(w, h);
                camera.aspect = ratio;
                camera.updateProjectionMatrix();

const narrow = w < 780;
                const veryWide = ratio > 2.1;

if (narrow) {
                    camera.position.set(0, 4.45, 13.8);

const xs = [-3.25, -1.08, 1.08, 3.25];
                    const sepXs = [-2.16, 0, 2.16];

cubes.forEach((cube, index) => {
                        cube.baseX = xs[index];
                        cube.group.position.x = xs[index];
                        cube.contactShadow.position.x = xs[index];
                    });

separators.forEach((sep, index) => {
                        sep.position.x = sepXs[index];
                    });
                } else {
                    camera.position.set(0, veryWide ? 4.0 : 4.15, veryWide ? 10.65 : 11.7);

const xs = [-4.05, -1.35, 1.35, 4.05];
                    const sepXs = [-2.7, 0, 2.7];

separators.forEach((sep, index) => {
                        sep.position.x = sepXs[index];
                    });
                }

camera.lookAt(0, .22, 0);
            }

window.addEventListener("resize", resize, { passive: true });
            resize();

function animate() {
                requestAnimationFrame(animate);

const t = sceneClock.getElapsedTime();
                const currentSecond = Math.floor(Date.now() / 1000);

if (currentSecond !== lastSecond) {
                    lastSecond = currentSecond;
                    syncCountdown(false);
                }

cubes.forEach((cube) => cube.update(t));

separators.forEach((sep, index) => {
                    sep.rotation.y = Math.sin(t * .7 + index) * .13;
                    sep.position.y = .05 + Math.sin(t * 2 + index) * .018;
                });

keyLight.intensity = 390 + Math.sin(t * .85) * 24;
                crossLight.intensity = 142 + Math.sin(t * .7 + 1.4) * 13;
                deskWarmLight.intensity = 34 + Math.sin(t * 1.25) * 5;

const baseY = mount.clientWidth < 780 ? 4.45 : (mount.clientWidth / mount.clientHeight > 2.1 ? 4.0 : 4.15);

camera.position.x = Math.sin(t * .16) * .065;
                camera.position.y += (baseY + Math.sin(t * .2) * .02 - camera.position.y) * .025;
                camera.lookAt(0, .22, 0);

renderer.render(scene, camera);
            }

animate();
        })();
    </script>
</div>