<!DOCTYPE html>
<html>
<head>
<title>ASCII Animation - Sketchbook and PoorTraits</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
background-color: #333;
color: #fff;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
}
pre {
font-size: 40px;
text-align: left;
}
#book {
font-size: 95px;
position: fixed;
top: 40%;
left: 46%;
transform: translate(-50%, -50%);
text-align: left;
}
</style>
</head>
<body>
<pre id="book">
PoorTraits
SketchBook
</pre>
<pre id="animation"></pre>
<script>
var animation = document.getElementById("animation");
function getRandomChar() {
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;':\",./<>?";
return chars.charAt(Math.floor(Math.random() * chars.length));
}
function generateAnimation() {
var output = "";
var width = Math.floor(window.innerWidth / 9); // 9 is the width of the book animation
var height = Math.floor(window.innerHeight / 10);
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
output += getRandomChar();
}
output += "\n";
}
animation.textContent = output;
}
setInterval(generateAnimation, 8);
</script>
</body>
</html>