CRT Boot

Old school CRT monitor boot up sequence.

Under the Hood: How it Works

Retro CSS Phosphor Effects

Evoking classic terminal monitors, this uses heavily stylized CSS. text-shadow is layered heavily to simulate monitor glow, while an overlaying transparent background image with a linear-gradient creates authentic scanlines.

Edit locally or copy directly

Download

<!DOCTYPE html>
<html>
<head>
<title>CRT Boot Sequence</title>
<style>
    :root {
        --crt-glow: #18ff62;
    }
    body {
        background-color: #000;
        margin: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: 'VT323', 'Courier New', monospace; /* VT323 is a great free retro font from Google Fonts */
        color: var(--crt-glow);
        text-shadow: 0 0 5px var(--crt-glow), 0 0 10px var(--crt-glow);
    }
    .crt-container {
        width: 100vw;
        height: 100vh;
        position: relative;
        background: #040804;
        animation: flicker 10s infinite linear;
    }
    /* Scanline Overlay */
    .crt-container::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        z-index: 2;
        background-size: 100% 4px, 3px 100%;
        pointer-events: none;
    }
    /* Vignette and Glow Overlay */
    .crt-container::after {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        box-shadow: inset 0 0 50px 20px #000, inset 0 0 20px 10px #000;
        z-index: 3;
        pointer-events: none;
    }

    .terminal {
        padding: 2rem;
        font-size: 1.5rem;
        line-height: 1.7rem;
    }

    .line {
        opacity: 0;
        animation: appear 0.1s forwards;
    }

    .cursor {
        display: inline-block;
        width: 1.2rem;
        height: 1.7rem;
        background-color: var(--crt-glow);
        box-shadow: 0 0 5px var(--crt-glow);
        animation: blink 1s steps(2, start) infinite;
        margin-left: 0.2rem;
    }

    @keyframes appear {
        to { opacity: 1; }
    }

    @keyframes blink {
        to { visibility: hidden; }
    }
    
    @keyframes flicker {
        0%, 100% { opacity: 1; }
        49.8% { opacity: 1; }
        50% { opacity: 0.7; }
        50.2% { opacity: 1; }
    }
</style>
<!-- Adding a retro font from Google Fonts for authenticity -->
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head>
<body>
<div class="crt-container">
    <div class="terminal" id="terminal"></div>
</div>

<script>
    const terminal = document.getElementById('terminal');
    const lines = [
        "J-CORP BIOS v4.18.88",
        "Initializing System Core...",
        "CPU   : J-RISC III 64-bit @ 66MHz... OK",
        "MEMORY: 64512KB RAM... OK",
        "VGA   : NEBULA-256 GFX Adapter... OK",
        "AUDIO : SoundBlaster AWE32... OK",
        "NET   : J-NET 10/100 Etherlink... OK",
        " ",
        "Searching for boot device...",
        "Found C: on ATA-2 Controller",
        "Loading Kernel from C:\\JOS\\KERNEL.SYS",
        "System Ready.",
        " ",
        "> <span class='cursor'></span>"
    ];

    function animateTerminal() {
        let lineIndex = 0;
        let charIndex = 0;
        terminal.innerHTML = ''; 

        function type() {
            if (lineIndex < lines.length) {
                const currentLine = lines[lineIndex];
                if(charIndex === 0) {
                    const lineElem = document.createElement('div');
                    lineElem.id = 'line-' + lineIndex;
                    lineElem.style.opacity = 0; // Prepare for animation
                    terminal.appendChild(lineElem);
                }
                
                const lineElem = document.getElementById('line-' + lineIndex);
                lineElem.innerHTML = currentLine;
                lineElem.style.animationDelay = `${lineIndex * 0.15}s`;
                lineElem.classList.add('line');

                lineIndex++;
                setTimeout(type, 70);
            }
        }
        type();
    }
    
    // Loop the animation every 10 seconds
    animateTerminal();
    setInterval(animateTerminal, 10000);
</script>

</body>
</html>

<div class="crt-container">
    <div class="terminal" id="terminal"></div>
</div>

:root {
        --crt-glow: #18ff62;
    }
    body {
        background-color: #000;
        margin: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: 'VT323', 'Courier New', monospace; /* VT323 is a great free retro font from Google Fonts */
        color: var(--crt-glow);
        text-shadow: 0 0 5px var(--crt-glow), 0 0 10px var(--crt-glow);
    }
    .crt-container {
        width: 100vw;
        height: 100vh;
        position: relative;
        background: #040804;
        animation: flicker 10s infinite linear;
    }
    /* Scanline Overlay */
    .crt-container::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        z-index: 2;
        background-size: 100% 4px, 3px 100%;
        pointer-events: none;
    }
    /* Vignette and Glow Overlay */
    .crt-container::after {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        box-shadow: inset 0 0 50px 20px #000, inset 0 0 20px 10px #000;
        z-index: 3;
        pointer-events: none;
    }

    .terminal {
        padding: 2rem;
        font-size: 1.5rem;
        line-height: 1.7rem;
    }

    .line {
        opacity: 0;
        animation: appear 0.1s forwards;
    }

    .cursor {
        display: inline-block;
        width: 1.2rem;
        height: 1.7rem;
        background-color: var(--crt-glow);
        box-shadow: 0 0 5px var(--crt-glow);
        animation: blink 1s steps(2, start) infinite;
        margin-left: 0.2rem;
    }

    @keyframes appear {
        to { opacity: 1; }
    }

    @keyframes blink {
        to { visibility: hidden; }
    }
    
    @keyframes flicker {
        0%, 100% { opacity: 1; }
        49.8% { opacity: 1; }
        50% { opacity: 0.7; }
        50.2% { opacity: 1; }
    }

const terminal = document.getElementById('terminal');
    const lines = [
        "J-CORP BIOS v4.18.88",
        "Initializing System Core...",
        "CPU   : J-RISC III 64-bit @ 66MHz... OK",
        "MEMORY: 64512KB RAM... OK",
        "VGA   : NEBULA-256 GFX Adapter... OK",
        "AUDIO : SoundBlaster AWE32... OK",
        "NET   : J-NET 10/100 Etherlink... OK",
        " ",
        "Searching for boot device...",
        "Found C: on ATA-2 Controller",
        "Loading Kernel from C:\\JOS\\KERNEL.SYS",
        "System Ready.",
        " ",
        "> <span class='cursor'></span>"
    ];

    function animateTerminal() {
        let lineIndex = 0;
        let charIndex = 0;
        terminal.innerHTML = ''; 

        function type() {
            if (lineIndex < lines.length) {
                const currentLine = lines[lineIndex];
                if(charIndex === 0) {
                    const lineElem = document.createElement('div');
                    lineElem.id = 'line-' + lineIndex;
                    lineElem.style.opacity = 0; // Prepare for animation
                    terminal.appendChild(lineElem);
                }
                
                const lineElem = document.getElementById('line-' + lineIndex);
                lineElem.innerHTML = currentLine;
                lineElem.style.animationDelay = `${lineIndex * 0.15}s`;
                lineElem.classList.add('line');

                lineIndex++;
                setTimeout(type, 70);
            }
        }
        type();
    }
    
    // Loop the animation every 10 seconds
    animateTerminal();
    setInterval(animateTerminal, 10000);

Creator:

Full Screen Preview Download HTML

Technical Details

Category Retro & Cyberpunk

Technology css

Performance lightweight

Interaction none

Related Animations

Crimson Glitch Stream

A crimson-colored data stream with glitch effects.

System Corruption Breach

Visual representation of a system security breach.

Dynamic Pixel Flow

Flowing grid of dynamic pixels.

CRT Boot

Under the Hood: How it Works

Retro CSS Phosphor Effects

Source Code

Technical Details

Tags

Related Animations

Crimson Glitch Stream

System Corruption Breach

Dynamic Pixel Flow

How to Use This Animation

Add CRT Boot to Your Site

Use as a Full-Page Background

Speed

CRT Boot

Under the Hood: How it Works

Retro CSS Phosphor Effects

Source Code

Technical Details

Tags

Related Animations

Crimson Glitch Stream

System Corruption Breach

Dynamic Pixel Flow

How to Use This Animation

Add CRT Boot to Your Site

Use as a Full-Page Background

Background Setup

Colors

Typography

Speed

Welcome Back