Halloween Countdown Clock Monster

Open In Editor Video Publish Your Code

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, viewport-fit=cover"
  />
  <meta name="color-scheme" content="dark light" />
  <title>Halloween Countdown Clock Monster</title>
  <meta
    name="description"
    content="A spinning alarm clock-headed creature with a live Halloween countdown, CRT scanlines, fog, and vignette overlays."
  />
</head>
<body>
  
  <header class="hud" aria-live="polite">
     
    <div class="chip" role="status" aria-atomic="true">
      <span class="label">Days left until Halloween:</span>
      <span class="row">
        <time id="localTime" aria-label="Local time" datetime="">--:--:--</time>
        <span class="sep" aria-hidden="true">•</span>
        <time id="toHalloween" aria-label="Time until Halloween" datetime="">--d --:--:--</time>
      </span>
    </div>
  </header>

<main id="app" role="main">
    <section
      class="scene"
      role="img"
      aria-label="Gaunt torso with a spinning alarm clock head, gore, fog, and CRT scanlines."
    >
      
      <div class="stage" aria-label="Clock monster display">
        <svg
          id="clockhead"
          viewBox="0 0 460 520"
          role="group"
          aria-labelledby="svgTitle svgDesc"
        >
          <title id="svgTitle">Alarm clock-headed creature</title>
          <desc id="svgDesc">
            An emaciated torso with an alarm clock for a head. The face spins while hands show the real time.
          </desc>

<filter id="veins" x="-30%" y="-30%" width="160%" height="160%">
              <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="4" result="n1" />
              <feColorMatrix
                in="n1"
                type="matrix"
                values="1 0 0 0 0.35
                        0 0 0 0 0.10
                        0 0 0 0 0.10
                        0 0 0 1 0"
                result="tone"
              />
              <feBlend mode="multiply" in="SourceGraphic" in2="tone" />
            </filter>

<ellipse cx="230" cy="494" rx="120" ry="16" fill="#000" opacity="0.45" />

<g filter="url(#veins)">
            <path
              d="M70,400 L150,330 L230,352 L310,328 L388,395
                 L360,480 L280,470 L230,450 L180,470 L100,480 Z"
              fill="url(#flesh)"
              stroke="#231915"
              stroke-width="2"
            />
            <polygon
              points="198,298 262,298 280,340 180,340"
              fill="url(#flesh)"
              stroke="#231915"
              stroke-width="2"
            />
            
            <g stroke="#3b2a24" stroke-width="6" stroke-linecap="round" opacity="0.9" aria-hidden="true">
              <path d="M160,370 C178,356 184,352 206,350" />
              <path d="M154,390 C174,372 186,366 210,362" />
              <path d="M150,410 C170,392 186,386 214,380" />
            </g>
          </g>

<g class="gore" aria-hidden="true">
            <circle cx="185" cy="342" r="10" fill="url(#blood)" opacity="0.9" />
            <circle cx="272" cy="348" r="8"  fill="url(#blood)" opacity="0.85" />
            <path d="M186,352 C186,374 180,392 176,410" fill="none" stroke="url(#blood)" stroke-width="6" stroke-linecap="round" />
            <path d="M272,356 C272,378 268,396 266,414" fill="none" stroke="url(#blood)" stroke-width="6" stroke-linecap="round" />
            <path d="M228,360 C228,390 226,406 224,426" fill="none" stroke="url(#blood)" stroke-width="7" stroke-linecap="round" />
          </g>

<g id="head" transform="translate(230,250)">
            
            <path d="M-76,-112 C-52,-154 52,-154 76,-112" fill="none" stroke="url(#metal)" stroke-width="12" stroke-linecap="round" />

<g id="bells">
              <ellipse cx="-72" cy="-90" rx="34" ry="24" fill="url(#metal)" stroke="#241913" stroke-width="4" />
              <ellipse cx="72"  cy="-90" rx="34"  ry="24" fill="url(#metal)" stroke="#241913" stroke-width="4" />
            </g>

<g id="faceSpin">
              <circle r="118" fill="url(#metal)" stroke="#241913" stroke-width="7" />
              <circle r="98"  fill="none" stroke="#1b120e" stroke-width="10" />
              <g filter="url(#grime)">
                <circle r="92" fill="url(#paper)" />
                <circle r="92" fill="url(#cracks)" opacity="0.65" />
              </g>
              <g id="ticks"></g>
              <g id="romans"></g>
              <circle r="100" fill="none" stroke="#2e2019" stroke-width="3" stroke-dasharray="6 10" />
            </g>

<g id="hands" stroke="#170d0a" stroke-linecap="round">
              <line id="hHand" x1="0" y1="0" x2="0" y2="-50" stroke-width="7" />
              <line id="mHand" x1="0" y1="0" x2="0" y2="-76" stroke-width="5" />
              <line id="sHand" x1="0" y1="0" x2="0" y2="-86" stroke="#aa3333" stroke-width="2" />
              <circle r="5" fill="#170d0a" />
            </g>
          </g>
        </svg>
      </div>

<div class="fog" aria-hidden="true"></div>
      <div class="redwash" aria-hidden="true"></div>
      <div class="scanlines" aria-hidden="true"></div>
      <div class="vignette" aria-hidden="true"></div>
    </section>
  </main>

CSS

/* ===== CSS Variables ===== */
:root {
    --jx: 0px;
    --jy: 0px;
    --jr: 0deg;
    --bg-red-dark: #1a0508;
    --bg-red-mid: #2d0a0f;
    --bg-red-light: #3d0f15;
    --blood-red: #8b0000;
    --blood-dark: #4a0404;
}

/* ===== Reset & Base ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    color: #e8e1d7;
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Darker, more ominous base */
    background: 
        /* Blood splatter overlay */
        radial-gradient(ellipse 200px 300px at 15% 20%, 
            rgba(139, 0, 0, 0.3) 0%, 
            transparent 40%),
        radial-gradient(ellipse 150px 200px at 85% 70%, 
            rgba(74, 4, 4, 0.4) 0%, 
            transparent 35%),
        radial-gradient(ellipse 300px 150px at 50% 90%, 
            rgba(139, 0, 0, 0.2) 0%, 
            transparent 30%),
        /* Main gradient */
        radial-gradient(
            ellipse 140% 100% at 50% 50%,
            #1a0508 0%,
            #0d0204 40%,
            #000000 100%
        );
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
    /* Add pixelation to entire page */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ===== Creepy Background Layer ===== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Organic noise texture */
        url('data:image/svg+xml,%3Csvg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="6" stitchTiles="stitch"/%3E%3CfeColorMatrix values="0 0 0 0 0.1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.4;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

/* ===== Animated Blood Drips ===== */
@keyframes blood-drip {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(calc(100vh + 100%));
        opacity: 0;
    }
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Dripping blood effect */
        radial-gradient(ellipse 4px 20px at 10% 0%, var(--blood-dark) 0%, transparent 100%),
        radial-gradient(ellipse 3px 25px at 25% 0%, var(--blood-red) 0%, transparent 100%),
        radial-gradient(ellipse 5px 30px at 40% 0%, var(--blood-dark) 0%, transparent 100%),
        radial-gradient(ellipse 3px 15px at 60% 0%, rgba(139, 0, 0, 0.6) 0%, transparent 100%),
        radial-gradient(ellipse 4px 35px at 75% 0%, var(--blood-dark) 0%, transparent 100%),
        radial-gradient(ellipse 6px 25px at 90% 0%, var(--blood-red) 0%, transparent 100%);
    background-size: 100% 200px;
    background-repeat: repeat-x;
    animation: blood-drip 20s linear infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
}

/* ===== Main Scene Container ===== */
.scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    isolation: isolate;
    z-index: 3;
}

/* ===== Creepy Floating Eyes ===== */
.scene::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        /* Floating eyes in darkness */
        radial-gradient(ellipse 8px 4px at 20% 30%, 
            rgba(255, 0, 0, 0.6) 0%, 
            rgba(255, 0, 0, 0.3) 30%,
            transparent 50%),
        radial-gradient(ellipse 8px 4px at 22% 30%, 
            rgba(255, 0, 0, 0.6) 0%, 
            rgba(255, 0, 0, 0.3) 30%,
            transparent 50%),
        radial-gradient(ellipse 6px 3px at 70% 60%, 
            rgba(255, 100, 0, 0.4) 0%, 
            transparent 50%),
        radial-gradient(ellipse 6px 3px at 72% 60%, 
            rgba(255, 100, 0, 0.4) 0%, 
            transparent 50%),
        radial-gradient(ellipse 5px 2px at 85% 20%, 
            rgba(200, 0, 0, 0.5) 0%, 
            transparent 40%),
        radial-gradient(ellipse 5px 2px at 87% 20%, 
            rgba(200, 0, 0, 0.5) 0%, 
            transparent 40%);
    animation: eyes-blink 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes eyes-blink {
    0%, 100% {
        opacity: 0.3;
    }
    45% {
        opacity: 0.3;
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    92% {
        opacity: 0;
    }
    94% {
        opacity: 0.3;
    }
}

/* ===== HUD Display ===== */
.hud {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.chip {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(139, 0, 0, 0.3);
    background: linear-gradient(135deg, 
        rgba(15, 13, 12, 0.95), 
        rgba(10, 9, 8, 0.95)
    );
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 30px rgba(139, 0, 0, 0.2);
}

.chip-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
}

.chip .sep {
    opacity: 0.4;
    color: #8b7a6a;
}

.countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.countdown-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #998570;
    opacity: 0.8;
    font-weight: 600;
    line-height: 1;
}

#localTime {
    font-size: 14px;
    color: #cdb9a0;
    font-variant-numeric: tabular-nums;
}

#toHalloween {
    font-size: 14px;
    color: #ff9966;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 153, 102, 0.3);
}

/* ===== Stage Container ===== */
.stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(var(--jx), var(--jy)) rotate(var(--jr)) scale(1.05);
    transition: transform 80ms steps(2, end);
}

/* ===== BIGGER, PIXELATED, OLD CLOCK ===== */
#clockhead {
    width: min(100vw, 95vh);
    max-width: none;
    height: auto;
    z-index: 5;
    
    /* Pixelation effect */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    
    /* Multiple filters for old, degraded look */
    filter: 
        /* Heavy shadow */
        drop-shadow(0 40px 100px rgba(0, 0, 0, 1))
        drop-shadow(0 0 50px rgba(139, 0, 0, 0.4))
        /* Contrast and saturation for old look */
        contrast(1.3) 
        saturate(0.7)
        brightness(0.9)
        /* Blur then sharpen for pixel effect */
        blur(0.3px)
        contrast(1.5);
    
    /* Add chromatic aberration */
    animation: 
        shadow-pulse 4s ease-in-out infinite,
        chromatic-shift 0.5s ease-in-out infinite alternate,
        degrade-flicker 0.1s steps(2) infinite;
    
    /* Scale up for bigger appearance */
    transform: scale(1.3);
    transform-origin: center center;
}

/* ===== Pixelation Enhancement via SVG Filter ===== */
.stage::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: 
        /* Pixel grid overlay */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 3px
        );
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 6;
}

/* ===== Old CRT Monitor Effects ===== */
@keyframes chromatic-shift {
    0% {
        text-shadow: 
            -2px 0 rgba(255, 0, 0, 0.5),
            2px 0 rgba(0, 255, 255, 0.5);
    }
    100% {
        text-shadow: 
            2px 0 rgba(255, 0, 0, 0.5),
            -2px 0 rgba(0, 255, 255, 0.5);
    }
}

@keyframes degrade-flicker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.98;
    }
    100% {
        opacity: 0.96;
    }
}

/* ===== Visual Effects ===== */
.gore {
    filter: drop-shadow(0 8px 16px rgba(120, 0, 0, 0.4));
    image-rendering: pixelated;
}

/* ===== Overlay Container ===== */
.overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ===== Enhanced Fog with Shadows ===== */
.fog {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 20;
    filter: blur(3px);
    background: 
        /* Moving shadows */
        radial-gradient(
            70% 40% at 20% 20%,
            rgba(0, 0, 0, 0.3),
            transparent 60%
        ),
        radial-gradient(
            60% 35% at 80% 30%,
            rgba(139, 0, 0, 0.1),
            transparent 60%
        ),
        radial-gradient(
            90% 50% at 50% 80%,
            rgba(0, 0, 0, 0.2),
            transparent 65%
        );
    mix-blend-mode: multiply;
    animation: fog-drift 40s linear infinite, fog-pulse 8s ease-in-out infinite;
}

@keyframes fog-drift {
    to {
        transform: translate(-5%, -3%) scale(1.1);
    }
}

@keyframes fog-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

/* ===== Heavy Retro Scanlines ===== */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    mix-blend-mode: overlay;
    background: 
        /* Thicker, more visible scanlines for retro feel */
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            rgba(255, 0, 0, 0.05) 1px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px,
            transparent 5px
        );
    animation: 
        crt-flicker 4s steps(60, end) infinite, 
        glitch 10s steps(1) infinite,
        scan-roll 8s linear infinite;
}

@keyframes scan-roll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 10px;
    }
}

@keyframes glitch {
    92% {
        transform: translateX(0);
    }
    93% {
        transform: translateX(-3px);
        filter: hue-rotate(90deg);
    }
    94% {
        transform: translateX(3px);
    }
    95% {
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
}

@keyframes crt-flicker {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.4;
    }
    60% {
        opacity: 0.35;
    }
}

/* ===== Enhanced Vignette for Old Screen ===== */
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    background: 
        /* CRT screen curve effect */
        radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        /* Main heavy vignette */
        radial-gradient(
            ellipse 110% 90% at 50% 50%,
            transparent 25%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0.8) 75%,
            rgba(0, 0, 0, 0.98) 100%
        );
}

/* ===== Screen Burn-in Effect ===== */
.vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Screen burn marks */
        radial-gradient(ellipse 200px 150px at 30% 40%, 
            rgba(100, 50, 0, 0.1) 0%, 
            transparent 50%),
        radial-gradient(ellipse 150px 200px at 70% 60%, 
            rgba(80, 40, 0, 0.08) 0%, 
            transparent 50%),
        /* Screen cracks */
        linear-gradient(105deg, transparent 40%, rgba(0, 0, 0, 0.1) 40.5%, transparent 41%),
        linear-gradient(-15deg, transparent 60%, rgba(139, 0, 0, 0.05) 60.5%, transparent 61%),
        linear-gradient(75deg, transparent 70%, rgba(0, 0, 0, 0.08) 70.5%, transparent 71%);
    opacity: 0.7;
}

/* ===== Bell Animation ===== */
#bells {
    transform-origin: 0 -90px;
}

.ring {
    animation: bell-wobble 240ms ease-in-out;
}

@keyframes bell-wobble {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-12deg);
    }
    50% {
        transform: rotate(12deg);
    }
    75% {
        transform: rotate(-6deg);
    }
}

/* ===== Pulsing Shadow for Clock ===== */
@keyframes shadow-pulse {
    0%, 100% {
        filter: 
            drop-shadow(0 40px 100px rgba(0, 0, 0, 1))
            drop-shadow(0 0 50px rgba(139, 0, 0, 0.4))
            contrast(1.3) 
            saturate(0.7)
            brightness(0.9)
            blur(0.3px)
            contrast(1.5);
    }
    50% {
        filter: 
            drop-shadow(0 45px 110px rgba(0, 0, 0, 1))
            drop-shadow(0 0 70px rgba(139, 0, 0, 0.6))
            contrast(1.4) 
            saturate(0.6)
            brightness(0.85)
            blur(0.4px)
            contrast(1.6);
    }
}

/* ===== Accessibility & Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .stage,
    .fog,
    .scanlines,
    .ring,
    #clockhead,
    body::after,
    .scene::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .hud {
        top: 20px;
    }
    
    .chip {
        padding: 8px 14px;
    }
    
    .chip-content {
        gap: 10px;
    }
    
    .countdown-label {
        font-size: 8px;
    }
    
    #localTime,
    #toHalloween {
        font-size: 12px;
    }
    
    #clockhead {
        width: 100vw;
        transform: scale(1.1);
    }
}

@media (max-height: 600px) {
    .hud {
        top: 20px;
    }
    
    .chip {
        padding: 6px 12px;
    }
    
    .countdown-label {
        font-size: 8px;
    }
    
    #localTime,
    #toHalloween {
        font-size: 11px;
    }
    
    #clockhead {
        width: 95vw;
        transform: scale(1.0);
    }
}

JS

// === Halloween Time Clock Monster ===
// Enhanced with better error handling and performance optimizations

Halloween Countdown Clock Monster

Recommended

Pixel Clock

React Clock Concept

Clock

HTML

CSS

JS

Recommended

Pixel Clock

React Clock Concept

Clock

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS