RascalTwo/base.css

## base.css
.widget-AlertBox {
	position: relative;
}
body,
html {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
#wrap {
	position: relative;
	height: 100%;
	width: 100%;
}
#alert-box {
	height: 100%;
	width: 100%;
	position: absolute;
}
#alert-box.hidden,
.hidden {
	opacity: 0;
}
#alert-text {
	padding: 20px;
	text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
	text-align: center;
}
#alert-user-message img {
	vertical-align: middle;
	height: 1em;
}
#alert-image {
	position: relative;
}
#alert-image video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#alert-message > span > span {
	display: inline-block;
}
#alert-image {
	z-index: 6;
	position: relative;
}
#alert-text {
	z-index: 6;
	position: relative;
}
#alert-text-wrap {
	z-index: 6;
	position: relative;
}

.form {
	display: none;
}

#code-alert {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: max-content;
	margin: auto;
	animation: 1s ease-in-out slide-down;
	z-index: 6;
	font-size: 2em;
	overflow: hidden;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	overflow: hidden;
}

#code-alert-nav {
	position: relative;
	background-color: #090c10;
	padding: 0;
	text-align: center;
	height: 1.65em;
}

#code-alert-tab {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background-color: #0d1117;
	color: white;
	padding: 0.25em;
	z-index: 8;
	width: max-content;
	margin: auto;
	border: 1px solid #30363d;
	border-bottom: 0;
}

#code-alert .border {
	position: absolute;
	width: 100%;
	top: 1.65em;
	left: 0px;
	border: 1px solid #30363d;
	z-index: 7;
}

#code-alert pre {
	padding: 0;
	margin: 0;
}

@keyframes slide-down {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}


pre {
	overflow: hidden;
}

code {
	overflow: hidden;
}


pre code.hljs {
	overflow: hidden !important;
}

code:after{
	content: "|";
	font-size: 1.5em;
	line-height: 1em;
	animation: blink 500ms linear infinite alternate;
}

@keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

form {
	display: none;
}

## base.html
<html>
	<head></head>
	<body>
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/github-dark.min.css">
		<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
		<link rel="stylesheet" href="./base.css" >


		<div id="code-alert">
			<div id="code-alert-nav">
				<span id="code-alert-tab"></span>
			</div>
			<span class="border"></span>
			<pre><code class="language-javascript"></code></pre>
		</div>

		<form>
			<input name="tabName" value="New Follower" />
			<input name="name" value="{name}" />
			<input name="amount" value="{amount}" />
			<input name="count" value="{count}" />
		</form>

		<script src="./base.js"></script>
	</body>
</html>

## base.js
(() => {
	const randomBetween = (min, max) => Math.floor(Math.random() * (max - min) + min);
	const randomFrom = array => array[randomBetween(0, array.length)];
	const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

	const CODE_TYPERS = [
		(node, _) => {
			const children = Object.values(node.childNodes);
			node.innerHTML = '';
			return async () => {
				for (const child of children){
					if (child.innerHTML) child.innerHTML = child.innerHTML.replace(/RascalTwo/g, 'Rascal_Two')
					node.appendChild(child);
					await delay(randomBetween(500, 750));
				}
			}
		},
		(node, codeText) => {
			node.innerHTML = '';
			return async () => {
				for (let i = 0; i < codeText.length; i++){
					node.innerHTML = codeText.slice(0, i + 1);
					hljs.highlightElement(node);
					node.innerHTML = node.innerHTML.replace(/RascalTwo/g, 'Rascal_Two')
					await delay(randomBetween(100, 200));
				}
			}
		}
	]

	function spawnCode(tabName, codeText){
		const codeAlert = document.querySelector('#code-alert');
		codeAlert.querySelector('#code-alert-tab').textContent = tabName;

		const code = codeAlert.querySelector('code');
		code.innerHTML = codeText;
		hljs.highlightElement(code);
		const computed = window.getComputedStyle(code)
		code.style.width = computed.width;
		code.style.height = computed.height;
		const typeCode = randomFrom(CODE_TYPERS)(code, codeText);
		codeAlert.addEventListener('animationend', typeCode);
	}

	const getValues = (() => {
		const tryAsNumber = string => {
			const number = Number(string);
			return isNaN(number) ? string : number;
		}

		return (...keys) => {
			if (!keys.length) keys = ['tabName', 'name', 'amount', 'count'];

			const form = document.querySelector('form');

			const values = keys
				.map(key => [key, form.elements[key]?.value.trim()])
				.filter(([key, value]) => value && value !== '{' + key + '}')
				.map(([key, value]) => [key, tryAsNumber(value)])
				.reduce((values, [key, value]) => ({ ...values, [key]: value }), {});


			return values;
		}
	})();

	const CODE_VARITIONS = {
		'New Follower': [
			({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\nRascalTwo.addFollower(${username});`,
			({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.follow(RascalTwo);`,
			({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\nRascalTwo.addFollower(${username});`,
			({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\n${username}.follow(RascalTwo);`,
			({ name: username }) => `from twitch import ${username}, RascalTwo\n\nRascalTwo.add_follower(${username})`,
		],
		'Donation': [
			({ name: username, amount: donationAmount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.donateTo(RascalTwo, '${donationAmount}');`,
		],
		'Raid': [
			({ name: username, count: viewerCount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.raid(RascalTwo, ${viewerCount});`,
		],
		'Host': [
			({ name: username, count: viewerCount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.host(RascalTwo, ${viewerCount});`,
		],
		'Subscription': [
			({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\nRascalTwo.addSubscriber(${username});`,
			({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.subscribe(RascalTwo);`,
			({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\nRascalTwo.addSubscriber(${username});`,
			({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\n${username}.subscribe(RascalTwo);`,
			({ name: username }) => `from twitch import ${username}, RascalTwo\n\nRascalTwo.add_subscriber(${username})`,
		],
		'Bits': [
			({ name: username, amount: donationAmount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.cheerBits(RascalTwo, '${donationAmount}');`,
		]
	}

	const values = getValues();
	const code = randomFrom(CODE_VARITIONS[values.tabName])(values);
	spawnCode(values.tabName, code);
})()
	.widget-AlertBox {
	position: relative;
	}
	body,
	html {
	height: 100%;
	width: 100%;
	overflow: hidden;
	}
	#wrap {
	position: relative;
	height: 100%;
	width: 100%;
	}
	#alert-box {
	height: 100%;
	width: 100%;
	position: absolute;
	}
	#alert-box.hidden,
	.hidden {
	opacity: 0;
	}
	#alert-text {
	padding: 20px;
	text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
	}
	#alert-message,
	#alert-user-message {
	text-align: center;
	}
	#alert-user-message img {
	vertical-align: middle;
	height: 1em;
	}
	#alert-image {
	position: relative;
	}
	#alert-image video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	}
	#alert-message > span > span {
	display: inline-block;
	}
	#alert-image {
	z-index: 6;
	position: relative;
	}
	#alert-text {
	z-index: 6;
	position: relative;
	}
	#alert-text-wrap {
	z-index: 6;
	position: relative;
	}

	.form {
	display: none;
	}

	#code-alert {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: max-content;
	margin: auto;
	animation: 1s ease-in-out slide-down;
	z-index: 6;
	font-size: 2em;
	overflow: hidden;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	overflow: hidden;
	}

	#code-alert-nav {
	position: relative;
	background-color: #090c10;
	padding: 0;
	text-align: center;
	height: 1.65em;
	}

	#code-alert-tab {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background-color: #0d1117;
	color: white;
	padding: 0.25em;
	z-index: 8;
	width: max-content;
	margin: auto;
	border: 1px solid #30363d;
	border-bottom: 0;
	}

	#code-alert .border {
	position: absolute;
	width: 100%;
	top: 1.65em;
	left: 0px;
	border: 1px solid #30363d;
	z-index: 7;
	}

	#code-alert pre {
	padding: 0;
	margin: 0;
	}

	@keyframes slide-down {
	from {
	transform: translateY(-100%);
	}
	to {
	transform: translateY(0);
	}
	}


	pre {
	overflow: hidden;
	}

	code {
	overflow: hidden;
	}


	pre code.hljs {
	overflow: hidden !important;
	}

	code:after{
	content: "\|";
	font-size: 1.5em;
	line-height: 1em;
	animation: blink 500ms linear infinite alternate;
	}

	@keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
	}

	form {
	display: none;
	}
	<html>
	<head></head>
	<body>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/github-dark.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
	<link rel="stylesheet" href="./base.css" >


	<div id="code-alert">
	<div id="code-alert-nav">
	<span id="code-alert-tab"></span>
	</div>
	<span class="border"></span>
	<pre><code class="language-javascript"></code></pre>
	</div>

	<form>
	<input name="tabName" value="New Follower" />
	<input name="name" value="{name}" />
	<input name="amount" value="{amount}" />
	<input name="count" value="{count}" />
	</form>

	<script src="./base.js"></script>
	</body>
	</html>
	(() => {
	const randomBetween = (min, max) => Math.floor(Math.random() * (max - min) + min);
	const randomFrom = array => array[randomBetween(0, array.length)];
	const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

	const CODE_TYPERS = [
	(node, _) => {
	const children = Object.values(node.childNodes);
	node.innerHTML = '';
	return async () => {
	for (const child of children){
	if (child.innerHTML) child.innerHTML = child.innerHTML.replace(/RascalTwo/g, 'Rascal_Two')
	node.appendChild(child);
	await delay(randomBetween(500, 750));
	}
	}
	},
	(node, codeText) => {
	node.innerHTML = '';
	return async () => {
	for (let i = 0; i < codeText.length; i++){
	node.innerHTML = codeText.slice(0, i + 1);
	hljs.highlightElement(node);
	node.innerHTML = node.innerHTML.replace(/RascalTwo/g, 'Rascal_Two')
	await delay(randomBetween(100, 200));
	}
	}
	}
	]

	function spawnCode(tabName, codeText){
	const codeAlert = document.querySelector('#code-alert');
	codeAlert.querySelector('#code-alert-tab').textContent = tabName;

	const code = codeAlert.querySelector('code');
	code.innerHTML = codeText;
	hljs.highlightElement(code);
	const computed = window.getComputedStyle(code)
	code.style.width = computed.width;
	code.style.height = computed.height;
	const typeCode = randomFrom(CODE_TYPERS)(code, codeText);
	codeAlert.addEventListener('animationend', typeCode);
	}

	const getValues = (() => {
	const tryAsNumber = string => {
	const number = Number(string);
	return isNaN(number) ? string : number;
	}

	return (...keys) => {
	if (!keys.length) keys = ['tabName', 'name', 'amount', 'count'];

	const form = document.querySelector('form');

	const values = keys
	.map(key => [key, form.elements[key]?.value.trim()])
	.filter(([key, value]) => value && value !== '{' + key + '}')
	.map(([key, value]) => [key, tryAsNumber(value)])
	.reduce((values, [key, value]) => ({ ...values, [key]: value }), {});


	return values;
	}
	})();

	const CODE_VARITIONS = {
	'New Follower': [
	({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\nRascalTwo.addFollower(${username});`,
	({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.follow(RascalTwo);`,
	({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\nRascalTwo.addFollower(${username});`,
	({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\n${username}.follow(RascalTwo);`,
	({ name: username }) => `from twitch import ${username}, RascalTwo\n\nRascalTwo.add_follower(${username})`,
	],
	'Donation': [
	({ name: username, amount: donationAmount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.donateTo(RascalTwo, '${donationAmount}');`,
	],
	'Raid': [
	({ name: username, count: viewerCount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.raid(RascalTwo, ${viewerCount});`,
	],
	'Host': [
	({ name: username, count: viewerCount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.host(RascalTwo, ${viewerCount});`,
	],
	'Subscription': [
	({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\nRascalTwo.addSubscriber(${username});`,
	({ name: username }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.subscribe(RascalTwo);`,
	({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\nRascalTwo.addSubscriber(${username});`,
	({ name: username }) => `const { ${username}, RascalTwo } = require('twitch');\n\n${username}.subscribe(RascalTwo);`,
	({ name: username }) => `from twitch import ${username}, RascalTwo\n\nRascalTwo.add_subscriber(${username})`,
	],
	'Bits': [
	({ name: username, amount: donationAmount }) => `import { ${username}, RascalTwo } from 'twitch';\n\n${username}.cheerBits(RascalTwo, '${donationAmount}');`,
	]
	}

	const values = getValues();
	const code = randomFrom(CODE_VARITIONS[values.tabName])(values);
	spawnCode(values.tabName, code);
	})()