Glitched Writer - Terminal

glitched-writer-terminal.markdown

Glitched Writer - Terminal

Showcase for GlitchedWriter's "terminal" preset. With additionally enabled "html" option. In the future will make it interactive, but for now it's only a nice animation.

A Pen by Shane White on CodePen.

License.

index.html

<div class="wrapper">
	<pre><output id="output"></output><div class="user-input"><span class="incentive">$></span><input type="text"/></div></pre>
</div>

<!-- 
Package: GlitchedWriter
Version: 2.0.7
Time: 1208ms
                               Asset       Size  Chunks                    Chunk Names
                            index.js    12.3 MB       0  [emitted]  [big]  index
                        dashboard.js    6.36 MB       1  [emitted]  [big]  dashboard
0.81c79b4db476a98d272f.hot-update.js    87.4 kB       0  [emitted]         project
81c79b4db476a98d272f.hot-update.json   52 bytes          [emitted]
                       manifest.json  272 bytes          [emitted]
./app/javascript/common/components/Termianl.js 2.42 kB {0} {1} [built]

Welcome To Glitched Terminal! (v 2.0.7)
23/3/2021, 18:39
Documentation: type "help" 
-->

script.typescript

import GlitchedWriter, {
	wait,
	presets
} from "https://cdn.skypack.dev/glitched-writer@2.0.29";

// Glitched Writer npm module:
// https://www.npmjs.com/package/glitched-writer

const random = (min, max, mathFunc = null) => {
	let w = Math.random() * (max - min) + min;
	return mathFunc == null ? w : Math[mathFunc](w);
};

const Writer = new GlitchedWriter("#output", {
	...presets.terminal,
	mode: "erase_smart",
	html: true
});

const date = new Date();

(async function () {
	await Writer.write("script: Compiling.");
	await wait(200);
	await Writer.add(".");
	await wait(200);
	await Writer.add(".");
	await wait(200);
	await Writer.remove(1);
	await wait(200);
	await Writer.remove(1);
	await wait(200);
	await Writer.add(".");
	await wait(200);
	await Writer.add(".");
	await wait(300);
	await Writer.write(`script: Compiled successfully.
hash: ${Date.now()}
package: <a href="https://glitched-writer.site" target="_blank">glitched-writer</a>
version: 2.0.29
time: ${random(0, 1500, "round")}ms
                                Asset       Size  Chunks                    Chunk Names
                             <i>index.js</i>    ${random(
																														10,
																														50,
																														"round"
																													)}.3 MB       3  <strong>[emitted]</strong>  <strong>[big]</strong>  index
                         <i>dashboard.js</i>    6.${random(
																										10,
																										80,
																										"round"
																									)} MB       1  <strong>[emitted]</strong>  <strong>[big]</strong>  dashboard
 <i>0.81c79b4db476a98d272f.hot-update.js</i>    ${random(
		40,
		100,
		"round"
	)}.4 kB       0  <strong>[emitted]</strong>         project
 <i>81c79b4db476a98d272f.hot-update.json</i>   52 bytes          <strong>[emitted]</strong>
                        <i>manifest.json</i>  ${random(
																									100,
																									300,
																									"round"
																								)} bytes          <strong>[emitted]</strong>
<i>./app/javascript/common/components/Terminal.js</i> 2.42 kB {0} {1} <strong>[built]</strong>

<b>Welcome To Glitched Terminal!</b> (v 2.0.29)
<i>${date.getDate()}/${
		date.getMonth() + 1
	}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}</i>
Documentation: type "help"

`);
})();

style.scss

$black: #000000;
$dark: #33202a;
$lighter: #5f5566;
$white: #f5f4f6;
$red: #f05d5e;
$yellow: #fcab10;

body {
	background-color: $black;
	background: radial-gradient(
		ellipse at right 34% bottom 5%,
		$dark,
		$black 80%,
		$black
	);
	background-position: left;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	color: $white;
	font: 1.3rem Inconsolata, monospace;
	text-shadow: 0 0 5px $white;
	&::after {
		content: "";
		position: absolute;
		opacity: 0.3;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: repeating-linear-gradient(
			0deg,
			rgba($black, 1),
			rgba($black, 1) 2px,
			transparent,
			transparent 4px
		);
		pointer-events: none;
	}
	&::before {
		content: "";
		position: absolute;
		z-index: 1000;
		opacity: 0.4;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: radial-gradient(
			ellipse at right 34% bottom 5%,
			transparent 60%,
			$black
		);
		pointer-events: none;
	}
}
::selection {
	background: $dark;
	text-shadow: none;
}
pre {
	margin: 0;
	white-space: pre-wrap;
	margin-bottom: 80vh;
	animation: text-blink 0.01s steps(2) infinite;
}

@keyframes text-blink {
	from,
	to {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes blink {
	from,
	to {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

#output {
	&:after {
		content: "▮";
		opacity: 1;
		animation: blink 1s steps(1) infinite;
	}
	&.gw-writing {
		&:after {
			animation: none;
		}
	}

	a {
		color: $yellow;
		text-decoration: none;
		text-shadow: 0 0 5px $yellow;
		&:hover {
			font-weight: bold;
		}
	}
	b {
		font-weight: normal;
		&:hover {
			color: $lighter;
			text-shadow: 0 0 5px $lighter;
		}
	}
	strong {
		font-weight: normal;
		color: $red;
		text-shadow: 0 0 5px $red;
	}
	i {
		color: $lighter;
		text-shadow: 0 0 5px $lighter;
		font-style: normal;
	}
}

.wrapper {
	padding: 2rem;
	overflow-y: scroll;
	height: 100%;
	-ms-overflow-style: none;
	scrollbar-width: none;
	&::-webkit-scrollbar {
		display: none;
	}
}

.user-input {
	display: flex;
	display: none;
}

.incentive {
	color: $yellow;
}

input {
	width: 100%;
	margin-left: 10px;
	background: transparent;
	outline: none !important;
	border: none !important;
	color: $white;
	font: 1.3rem Inconsolata, monospace;
	text-shadow: 0 0 5px $white;
}