JIT
Grid - Untitled
Log in
@megabit
Create a white candle with a single flame animated with realistic movement using only CSS and HTML (in one file). The sparks should also be animated with smooth movement.
Grok 4
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Candle</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; overflow: hidden; } 
    .candle-container {
        position: relative;
        width: 20vw;
        height: 60vh;
        min-width: 100px;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .candle-body {
        width: 100%;
        height: 80%;
        background-color: #fff;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }

    .flame {
        position: absolute;
        top: -15%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 3vw solid transparent;
        border-right: 3vw solid transparent;
        border-bottom: 10vw solid orange;
        animation: flicker 0.5s infinite alternate;
        filter: blur(2px);
    }

    .flame-inner {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
        border-bottom: 7vw solid yellow;
        animation: flicker-inner 0.3s infinite alternate;
    }

    @keyframes flicker {
        0% { border-bottom-width: 10vw; opacity: 1; transform: translateX(-50%) scale(1); }
        100% { border-bottom-width: 11vw; opacity: 0.8; transform: translateX(-50%) scale(1.05) translateY(-5%); }
    }

    @keyframes flicker-inner {
        0% { border-bottom-width: 7vw; opacity: 1; transform: translateX(-50%) scale(1); }
        100% { border-bottom-width: 8vw; opacity: 0.9; transform: translateX(-50%) scale(1.1) translateY(-3%); }
    }

    .sparks {
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
    }

    .spark {
        position: absolute;
        width: 0.5vw;
        height: 0.5vw;
        background-color: #ffd700;
        border-radius: 50%;
        opacity: 0;
        animation: spark 2s infinite;
    }

    .spark:nth-child(1) { left: -1vw; animation-delay: 0s; animation-duration: 1.5s; }
    .spark:nth-child(2) { left: 0.5vw; animation-delay: 0.3s; animation-duration: 1.8s; }
    .spark:nth-child(3) { left: -0.5vw; animation-delay: 0.6s; animation-duration: 1.2s; }
    .spark:nth-child(4) { left: 1vw; animation-delay: 0.9s; animation-duration: 1.6s; }
    .spark:nth-child(5) { left: 0vw; animation-delay: 1.2s; animation-duration: 1.4s; }

    @keyframes spark {
        0% { opacity: 1; transform: translateY(0) scale(1); }
        50% { opacity: 0.8; transform: translateY(-5vh) scale(1.2); }
        100% { opacity: 0; transform: translateY(-10vh) scale(0.5); }
    }

    @media (max-width: 768px) {
        .candle-container {
            width: 30vw;
            height: 70vh;
        }
        .flame { border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-bottom: 15vw solid orange; }
        .flame-inner { border-left: 3vw solid transparent; border-right: 3vw solid transparent; border-bottom: 10vw solid yellow; }
        .spark { width: 1vw; height: 1vw; }
    }
</style>
</head> <body> <div class="candle-container"> <div class="candle-body"></div> <div class="flame"> <div class="flame-inner"></div> </div> <div class="sparks"> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> </div> </div> </body> </html>
Updated files
v1