<style>
a:link {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
</style>

<div class="terminal glitch">
	<div class="scanline"></div>
	<p class="spinner">[/]</p>
	<div class="hydra">
		<div class="hydra_rebooting">
			<p>&lt; SYSTEM REBOOTING &gt;</p>
			<p class="text--sm">KILLACORP. VER 2.0 SYS RECOVERY</p>
			<p class="text--sm">PROCESS: <span class="process-amount">0</span>%</p>
			<p class="loading-bar"></p>
		</div>
		
		<div class="hydra_reboot_success hidden">
			<u><h3>REBOOTING SUCCESSFUL!</h3></u>
			<h4><a href="https://killacorp.com"target="blank">
			<span class="blinking"<p><u>-+-HOME-+-</u><a/><br>_________</h4>
			<p><a href="https://killacorp.com/killa"target="blank">
			<span class="blinking"<p><u>KILLACORP</u><a/>⠀+[PROJECTS]+<br> 
				<p><a href="https://Hit-me.at"target="blank">
			<span class="blinking"<p><u>HIT-ME!</u><a/>⠀+[MAGAZINE]+<br>
					<p><a href="https://Timekilla.de"target="blank">
			<span class="blinking"<p><u>TIMEKILLA</u><a/>⠀+[GAMES]+<br>
							<p><a href="https://killacorp.com/community/"target="blank">
			<span class="blinking"<p><u>KILL-COMM.</u><a/>⠀+[COMMUNITY]+<br>
					<p><a href="https://Cashkilla.com"target="blank">
			<span class="blinking"<p><u>CASHKILLA</u><a/>⠀+[$HOP]+<br>	
						<p><a href="https://instagram.com/killacorp/"target="blank">
			<span class="blinking"<p><u>INSTAGRAM</u><a/>⠀+[FEED]+<br>		<br> <br> 
		</div>
	</div>
</div>
html {
	font-family: Metrophobic, Metrophobic, VT323, VT323, VT323;
	font-size: 3vw;
	font-weight: 100;
	text-shadow: 0 0 3px red;
	background-color: #0f0000;
	background-image: url(https://killacorp.com/wp-content/uploads/2020/04/wall.jpgbackground=00000000&noise=626262&density=15&opacity=100);
	background-size: 100px;
	color: #CC0000;
	height: 100%;
	text-align: center;
}


body {
	margin: 0;
	height: 100%;
	display: grid;
	overflow: hidden;
}

.terminal {
	grid-row: 1;
	grid-column: 1;
	
	grid-gap: 0vw;
	padding: 2vw;
	grid-template-rows: 1fr auto 1fr;
	grid-template-columns: 1fr auto 1fr;
}

.glitch {
	animation: glitch 1.5s linear infinite;
}

.glitch--clone {
	opacity: 0.2;
}

.glitch--clone .hydra {
	filter: blur(2px);
	opacity: 0.8;
}

.glitch--clonee .hidden {
	filter: blur(2px);
	opacity: 0.8;
}

.glitch--top {
	animation: glitch--top 1s linear infinite;
}

.glitch--top .hydra {
	transform: translate(4vw, 4vw);
}



.glitch--bottom {
	animation: glitch--bottom 0.75s linear infinite;
}

.glitch--bottom .hydra {
	transform: translate(-1vw, -1vw);
}

.hydra {
	box-shadow: 0 0 2px red, inset 0 0 2px red;
	padding: 2vw;
	border: 0.2vw solid #CC0000;
	grid-row: 2/2;
	grid-column: 2/2;
}

.scanline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 0, 0, 0.03);
	animation: scanline 6s linear infinite;
}

.loading-bar--unloaded {
	color: #fff;
	text-shadow: 0 0 5px #fff;
}

.hidden {
	display: none;
}

p {
	font-family: Metrophobic, Metrophobic, Liberation Mono, Menlo, Courier,
		monospace;
	font-size: 2.75vw;
	line-height: 1.5;
	margin: 0;
}

.text--sm {
	font-size: 1.75vw;
}

* + .text--sm {
	padding-top: 0.5vw;
}

* + .loading-bar {
	padding-top: 1vw;
}

@keyframes scanline {
	0.01% {
		transform: translatey(-100%);
	}
	99.99% {
		transform: translatey(0);
	}
	100% {
		transform: translatey(-100%);
	}
}

@keyframes glitch {
	2%,
	64% {
		transform: translate(2px, 0) skew(0deg);
	}
	4%,
	60% {
		transform: translate(-2px, 0) skew(0deg);
	}
	62% {
		transform: translate(0, 0) skew(5deg);
	}
}

@keyframes glitch--top {
	2%,
	64% {
		transform: translate(2px, -2px);
	}
	4%,
	60% {
		transform: translate(-2px, 2px);
	}
	62% {
		transform: translate(13px, -1px) skew(-13deg);
	}
}

@keyframes glitch--bottom {
	2%,
	64% {
		transform: translate(-2px, 0);
	}
	4%,
	60% {
		transform: translate(-2px, 0);
	}
	62% {
		transform: translate(-22px, 5px) skew(21deg);
	}
}

.blinking{
    animation:blinkingText 3.2s infinite;
}
@keyframes blinkingText{
0%{opacity: 1;}
40%{opacity: .6;}  
50%{opacity: .5;}
80%{opacity: 1;}
90%{opacity: .5;}  
100%{opacity:0.7;}   
}
View Compiled
const terminal = document.querySelector(".terminal");
const hydra = document.querySelector(".hydra");
const rebootSuccessText = document.querySelector(".hydra_reboot_success");
const maxCharacters = 24;
const unloadedCharacter = ".";
const loadedCharacter = "#";
const spinnerFrames = ["/", "-", "\\", "|"];

// Clone the element and give the glitch classes
(glitchElement => {
	const glitch = glitchElement.cloneNode(true);
	const glitchReverse = glitchElement.cloneNode(true);
	glitch.classList.add("glitch--clone", "glitch--bottom");
	glitchReverse.classList.add("glitch--clone", "glitch--top");
	glitch.setAttribute("aria-hidden", "true");
	glitchReverse.setAttribute("aria-hidden", "true");

	glitchElement.insertAdjacentElement("afterend", glitch);
	glitchElement.insertAdjacentElement("afterend", glitchReverse);
})(terminal);

// Get all the loading bars
const loadingBars = document.querySelectorAll(".loading-bar");
const processAmounts = document.querySelectorAll(".process-amount");
const spinners = document.querySelectorAll(".spinner");
const rebootingText = document.querySelectorAll(".hydra_rebooting");
const glitches = document.querySelectorAll(".glitch--clone");

// Helper for random number
const RandomNumber = (min, max) => Math.floor(Math.random() * max) + min;

const Delay = (time) => {
	return new Promise((resolve) => setTimeout(resolve, time))
};

const HideAll = elements =>
	elements.forEach(glitchGroup =>
		glitchGroup.forEach(element => element.classList.add("hidden"))	);

const ShowAll = elements =>
	elements.forEach(glitchGroup =>
		glitchGroup.forEach(element => element.classList.remove("hidden")) );

// Render the bar to HTML
const RenderBar = ( values ) => {
	const currentLoaded = values.lastIndexOf(loadedCharacter) + 1;
	const loaded = values.slice(0, currentLoaded).join("");
	const unloaded = values.slice(currentLoaded).join("");

	// Update all the loading bars
	loadingBars.forEach(loadingBar => {
		loadingBar.innerHTML = `(${loaded}<span class="loading-bar--unloaded">${unloaded}</span>)`;
	});

	// Update all the percentages
	loadingPercent = Math.floor(currentLoaded / maxCharacters * 100);
	processAmounts.forEach(processAmount => {
		processAmount.innerText = loadingPercent;
	});
};

// Update the loaded value and render it to HTML
const DrawLoadingBar = ( values ) => {
	return new Promise((resolve) => {
			const loadingBarAnimation = setInterval(() => {
				if (!values.includes(unloadedCharacter)) {
					clearInterval(loadingBarAnimation);
					resolve();
				}

				values.pop(unloadedCharacter);
				values.unshift(loadedCharacter);
				RenderBar(values);
		}, RandomNumber(50, 300));
	});
};

const DrawSpinner = (spinnerFrame = 0) => {
	return setInterval(() => {
		spinnerFrame += 1;
		spinners.forEach(
			spinner =>
				(spinner.innerText = `[${
					spinnerFrames[spinnerFrame % spinnerFrames.length]
				}]`)
		);
	}, RandomNumber(50, 300));
};

const AnimateBox = () => {
	const first = hydra.getBoundingClientRect();
	HideAll([spinners, glitches, rebootingText]);
	rebootSuccessText.classList.remove("hidden");
	rebootSuccessText.style.visibility = "hidden";
	const last = hydra.getBoundingClientRect();

	const hydraAnimation = hydra.animate([
		{ transform: `scale(${first.width / last.width}, ${first.height / last.height})` },
		{ transform: `scale(${first.width / last.width}, 1.2)` },
		{ transform: `none` }
	],{
		duration: 1000,
		easing: 'cubic-bezier(0,0,0.32,1)',
	});	

	hydraAnimation.addEventListener('finish', () => {
		rebootSuccessText.removeAttribute("style");
		hydra.removeAttribute("style");
	});
};

const PlayHydra = async() => {
	terminal.classList.add("glitch");
	rebootSuccessText.classList.add("hidden");
	ShowAll([spinners, glitches, rebootingText]);
	const loadingBar = new Array(maxCharacters).fill(unloadedCharacter);
	const spinnerInterval = DrawSpinner();

	// Play the loading bar
	await DrawLoadingBar(loadingBar);
	
	// Loading is complete on the next frame, hide spinner and glitch
	
	requestAnimationFrame(()=> {
		clearInterval(spinnerInterval);
		terminal.classList.remove("glitch");
		AnimateBox();
		setTimeout(PlayHydra, 500000);
	});
};

PlayHydra();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.