m17e.co
1<!DOCTYPE html>
2<html lang=en>
3<head>
4<meta charset=utf-8>
5<style>
6 body { padding: 15px 0 0 30px; }
7 div { font-family: "Maple Mono", "Berkeley Mono", monospace; font-size: 3.0vw; line-height: 4.0vw; }
8</style>
9<title>split</title>
10</head>
11<body>
12<div id=messenger></div>
13
14<script>
15
16 const messengerElement = document.getElementById("messenger"),
17 s = "below average heavy industries inc.";
18 // s = "BELOW AVERAGE HEAVY INDUSTRIES INC.";
19 t = "0123456789&%$#@",
20 // t = "0123456789&%$#@!()[]{}";
21 // t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!/";
22 // t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!()[]{}/";
23 // t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!()[]{}/.,<>~`^*-+=_|";
24 u = s.length;
25 let l = 0,
26 a = 0,
27 i = "";
28 (function o(c) {
29 setTimeout(function() {
30 --c && o(c);
31 (function() {
32 const randomChars = [];
33 for (let d = 0; d < u - l; d++) {
34 let e = Math.floor(t.length * Math.random());
35 randomChars.push(t.charAt(e));
36 }
37 if (a === 4) {
38 l++;
39 }
40 if (a === 5) {
41 i += s.charAt(l - 1);
42 a = 0;
43 }
44 messengerElement.innerHTML = i + randomChars.join('');
45 })();
46 a += 1;
47 }, 16); // ms - roughly 60fps
48 })(5 * u + 1);
49
50</script>
51
52<!-- inspired by https://turbopuffer.com/ turbopuffer <(\xb0O\xb0)> -->
53<!-- https://en.wikipedia.org/wiki/Split-flap_display -->
54<!-- https://turbopuffer.com/_next/static/chunks/app/(home)/layout-fe175645c9c43802.js -->
55
56</body>