JIT
Grid - Untitled
Log in
Gemini 3.0 Pro
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Realistic Animated Candle</title> <style> :root { --bg-color: #1a1a1a; --flame-height: 100px; --candle-width: 80px; --candle-height: 250px; --spark-color: rgba(255, 220, 100, 0.8); } 
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--bg-color);
        background: radial-gradient(circle at 50% 60%, #2a2a2a, #111111 60%, #000000);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        font-family: sans-serif;
    }

    .scene {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 15vh;
    }

    /* --- Candle Body --- */
    .candle {
        position: relative;
        width: var(--candle-width);
        height: var(--candle-height);
        background: linear-gradient(
            to right,
            #e0e0e0 0%,
            #ffffff 50%,
            #dcdcdc 100%
        );
        border-radius: 4px 4px 8px 8px;
        box-shadow: 
            inset -10px 0 20px rgba(0,0,0,0.1), /* Side shading */
            0 0 10px rgba(0,0,0,0.3); /* Drop shadow */
        z-index: 10;
    }

    /* Top "Pool" of Wax */
    .candle::before {
        content: '';
        position: absolute;
        top: -15px;
        left: 0;
        width: 100%;
        height: 30px;
        background: radial-gradient(
            ellipse at center, 
            #fff9e0 0%, 
            #ffffff 40%, 
            #e0e0e0 100%
        );
        border-radius: 50%;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
        z-index: 20;
    }

    /* Slight darkening in the wax pool center */
    .candle::after {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 15px;
        background: radial-gradient(
            ellipse at center,
            rgba(100,100,100,0.1) 0%,
            transparent 70%
        );
        border-radius: 50%;
        z-index: 21;
    }

    /* --- Wick --- */
    .wick {
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 20px;
        background: linear-gradient(to bottom, #222, #555);
        border-radius: 2px;
        z-index: 25;
        opacity: 0.9;
    }

    /* --- Flame Structure --- */
    .flame-container {
        position: absolute;
        top: -115px; /* Position above wick */
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 100px;
        z-index: 30;
        transform-origin: 50% 100%;
        /* Main Flicker Movement */
        animation: flame-move 4s ease-in-out infinite alternate;
    }

    /* The Main Flame Shape */
    .flame {
        width: 100%;
        height: 100%;
        border-radius: 50% 50% 20% 20%;
        background: rgba(255, 255, 255, 1);
        background: linear-gradient(
            to bottom, 
            rgba(255,255,255,0.1) 0%,
            rgba(255,240,200,0.8) 20%, 
            rgba(255,160,0,0.8) 60%, 
            rgba(0,0,255,0.3) 95%
        );
        box-shadow: 
            0 0 10px rgba(255, 165, 0, 0.5),
            0 -10px 20px rgba(255, 100, 0, 0.3),
            0 -20px 40px rgba(255, 200, 0, 0.2);
        transform-origin: 50% 90%;
        animation: flame-flicker 0.1s ease-in-out infinite alternate;
        filter: blur(1px);
    }

    /* Inner Blue Core (Hottest part) */
    .flame::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 20px;
        background: rgba(0, 0, 255, 0.4);
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
        filter: blur(2px);
    }

    /* Ambient Glow around the candle */
    .glow {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,180,0,0.25) 0%, rgba(255,100,0,0.05) 50%, transparent 70%);
        border-radius: 50%;
        z-index: 5;
        pointer-events: none;
        animation: glow-pulse 0.1s ease-in-out infinite alternate;
    }

    /* --- Sparks --- */
    .sparks {
        position: absolute;
        top: 60px; /* Start near base of flame */
        left: 50%;
        width: 1px;
        height: 1px;
        z-index: 40;
    }

    .spark {
        position: absolute;
        background: #fff;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        opacity: 0;
        box-shadow: 0 0 5px #ffaa00;
    }

    /* Generate variations for sparks */
    .spark:nth-child(1) { animation: fly-up 2.5s linear infinite; animation-delay: 0s; left: -5px; }
    .spark:nth-child(2) { animation: fly-up 3s linear infinite; animation-delay: 1.2s; left: 5px; }
    .spark:nth-child(3) { animation: fly-up 4s linear infinite; animation-delay: 0.5s; left: -2px; }
    .spark:nth-child(4) { animation: fly-up 2.8s linear infinite; animation-delay: 2.1s; left: 8px; }
    .spark:nth-child(5) { animation: fly-up 3.5s linear infinite; animation-delay: 1.5s; left: -8px; }

    /* --- Animations --- */

    /* High frequency flickering (shape distortion) */
    @keyframes flame-flicker {
        0% {
            transform: scale(1, 1) rotate(-1deg);
            border-radius: 50% 50% 20% 20%;
        }
        25% {
            transform: scale(1.02, 1.02) rotate(1deg);
            border-radius: 52% 48% 22% 18%;
        }
        50% {
            transform: scale(0.98, 1.05) rotate(-0.5deg);
            border-radius: 48% 52% 18% 22%;
        }
        75% {
            transform: scale(1.01, 0.98) rotate(0.5deg);
            border-radius: 50% 50% 20% 20%;
        }
        100% {
            transform: scale(1, 1) rotate(0deg);
            border-radius: 50% 50% 20% 20%;
        }
    }

    /* Low frequency swaying (wind effect) */
    @keyframes flame-move {
        0% { transform: translateX(-50%) rotate(-2deg); }
        20% { transform: translateX(-51%) rotate(1deg); }
        40% { transform: translateX(-49%) rotate(-1deg); }
        60% { transform: translateX(-50%) rotate(2deg); }
        80% { transform: translateX(-51%) rotate(-1deg); }
        100% { transform: translateX(-50%) rotate(1deg); }
    }

    /* Glow pulsation syncs with flicker */
    @keyframes glow-pulse {
        0% { opacity: 0.9; transform: translateX(-50%) scale(1); }
        100% { opacity: 1; transform: translateX(-50%) scale(1.02); }
    }

    /* Sparks flying up and fading */
    @keyframes fly-up {
        0% {
            opacity: 0;
            transform: translateY(0) translateX(0) scale(1);
        }
        20% {
            opacity: 1;
        }
        80% {
            opacity: 0.5;
        }
        100% {
            opacity: 0;
            transform: translateY(-120px) translateX(var(--drift, 10px)) scale(0);
        }
    }

    /* Adding drift to sparks via nth-child logic above isn't fully random without SCSS or JS, 
       so we simulate wind drift in the keyframe by creating two variations or just hardcoding offsets.
       To keep it simple in pure CSS, I'll use a generic wobble path for all, modified by left position.
    */
    
    /* Improve spark drift using specific keyframes for odd/even if needed, 
       but for simplicity, let's make the 'fly-up' translation generic and 
       rely on start position. Let's refine fly-up to wiggle. */
    @keyframes fly-up {
        0% {
            opacity: 0;
            transform: translateY(0) translateX(0);
        }
        15% { opacity: 1; }
        50% {
            transform: translateY(-60px) translateX(5px);
        }
        100% {
            opacity: 0;
            transform: translateY(-140px) translateX(-5px);
        }
    }

</style>
</head> <body> 
<div class="scene">
    <div class="candle">
        
        <div class="wick"></div>
        
        
        <div class="flame-container">
            <div class="flame"></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>

        
        <div class="glow"></div>
    </div>
</div>
</body> </html>
Updated files
v1
@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.