live - 60fps 1920 x 1080
<!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>About this animation
Old school CRT monitor boot up sequence.
Under the hood
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. 
