From 780eb6a8066d32abf8cb8dd0bb9ccdeb9b38662c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:10:45 +0100
Subject: [PATCH 1/5] feat: Add matrix screen

---
 source/screens/demo/examples/matrix.liquid | 242 +++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 source/screens/demo/examples/matrix.liquid

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
new file mode 100644
index 0000000..1e2c266
--- /dev/null
+++ b/source/screens/demo/examples/matrix.liquid
@@ -0,0 +1,242 @@
+---
+title: Matrix
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block style %}
+<style>
+	:root {
+		--space: 16px;
+	}
+
+	html, body {
+		height: calc(100vh - calc(var(--space) * 2));
+		box-sizing: border-box;
+	}
+
+	body {
+		position: relative;
+		margin: var(--space);
+		/* background-color: grey; */
+		border: 1px solid black;
+		font-family: 'Courier New', Courier, monospace;
+	}
+
+	.container {
+		background-color: grey;
+	}
+
+	.glyph {
+		position: absolute;
+		top: 0;
+		left: 0;
+		font-size: 24px;
+		line-height: 1;
+		font-weight: bold;
+	}
+</style>
+{% endblock %}
+
+{% block body %}
+<canvas id="canvas">
+	<div>Canvas element not supported.</div>
+</canvas>
+<div id="container">
+	<span id="a" class="glyph">A</span>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	const glyphEls = document.getElementsByClassName('glyph');
+	const glyphEl = document.getElementById('a');
+	const cEl = document.getElementById('container');
+
+	let createId = undefined;
+	let holdId = undefined;
+	let cleanId = undefined;
+	let createInterval = 300;
+	let holdInterval = 5000;
+	let cleanInterval = 1000;
+	let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
+	let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
+	let glyphW = glyphEl.offsetWidth;
+	let glyphH = glyphEl.offsetHeight;
+	let maxHeight = bodyHeight - glyphY - 2 * 16;
+
+	cEl.style.display = 'none';
+
+	function canvasTrail() {
+		const canvas = document.getElementById("canvas");
+		const body = document.querySelector("body");
+		canvas.width = body.clientWidth - 2;
+		canvas.height = body.clientHeight - 2;
+
+		if (canvas.getContext) {
+			const ctx = canvas.getContext("2d");
+
+			ctx.font = "24px 'Courier New', Courier, monospace";
+			// ctx.textBaseline = "top";
+
+			let glyphText = "A";
+			let glyphMeasure = ctx.measureText(glyphText);
+			let glyphX = 0;
+			let glyphY = 0;
+			let glyphW = Math.max(glyphMeasure.actualBoundingBoxLeft + glyphMeasure.actualBoundingBoxRight, glyphMeasure.width);
+			let glyphH = glyphMeasure.fontBoundingBoxDescent + glyphMeasure.fontBoundingBoxAscent;
+			let glyph = {
+				text: glyphText,
+				measure: glyphMeasure,
+				x: glyphX,
+				y: glyphY,
+				w: glyphW,
+				h: glyphH
+			}
+			let lane = [];
+
+			ctx.fillStyle = "grey";
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+			// ctx.fillStyle = "black";
+			// ctx.fillRect(glyphX, glyphY, glyphW, glyphH);
+			// ctx.fillStyle = "red";
+			// ctx.fillText(glyphText, glyphX, glyphY + glyphMeasure.fontBoundingBoxAscent);
+
+			ctx.fillStyle = "black";
+
+			createId = setInterval(createGlyph, createInterval, ctx, characters, glyph, lane);
+		} else {
+			console.log('Canvas element not supported.');
+		}
+	}
+
+	function createGlyph(ctx, chars, glyph, lane) {
+		clearTimeout(cleanId);
+		glyph.text = chars.charAt(Math.floor(Math.random() * chars.length));
+		console.log(glyph.text, glyph.y);
+
+		lane.push([glyph.text, glyph.y]);
+
+		// ctx.fillStyle = "black";
+		// ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
+		ctx.fillStyle = "white";
+		ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.measure.fontBoundingBoxAscent);
+
+		if (glyph.y >= glyph.h) {
+			let prevY = glyph.y - glyph.h;
+			let bkg = "rgba(128, 128, 128, " + randomBetween(.1, 1) + ")";
+
+			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "grey";
+			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "black";
+			ctx.fillText(glyph.text, glyph.x, prevY + glyph.measure.fontBoundingBoxAscent);
+			ctx.fillStyle = bkg;
+			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+		}
+
+		glyph.y += glyph.h;
+
+		if (glyph.y > canvas.height) {
+			// holdLane(ctx, chars, glyph, lane);
+			clearInterval(createId);
+			holdId = setTimeout(holdLane, holdInterval, ctx, chars, glyph, lane);
+		}
+	}
+
+	function holdLane(ctx, chars, glyph, lane) {
+		console.log("hold");
+
+		glyph.y = 0;
+
+		// clearInterval(createId);
+
+		// Änderung der Transparenz (sehr selten)
+
+		// Änderung des Symbols (selten)
+
+		cleanId = setTimeout(cleanLane, cleanInterval, ctx, chars, glyph, lane);
+	}
+
+	function cleanLane(ctx, chars, glyph, lane) {
+		console.log("clean");
+
+		clearTimeout(holdId);
+
+		lane = [];
+
+		ctx.clearRect(glyph.x, glyph.y, glyph.w, canvas.height);
+		ctx.fillStyle = "grey";
+		ctx.fillRect(0, 0, glyph.w, canvas.height);
+
+		createId = setInterval(createGlyph, randomIntFrom(100, 1000), ctx, chars, glyph, lane);
+	}
+
+	function containerTrail(position, container) {
+		const laneEl = document.createElement('div');
+
+		laneEl.className = 'lane';
+		container.appendChild(laneEl);
+
+		let changeGlyphId = setInterval(() => {
+			let newEl = glyphEl.cloneNode();
+			let glyphX = position;
+
+			glyphY += glyphEl.clientHeight;
+			newEl.innerHTML = characters.charAt(Math.floor(Math.random() * characters.length));
+			newEl.id = '';
+			newEl.style.top = glyphY + 'px';
+			newEl.style.left = glyphX + 'px';
+			newEl.style.opacity = 1;
+
+			if (glyphY > maxHeight) {
+				glyphY = 0;
+				laneEl.textContent = '';
+			}
+
+			laneEl.appendChild(newEl);
+			let prevEl = newEl.previousElementSibling;
+
+			if (prevEl !== null) {
+				prevEl.style.opacity = randomBetween(.5, 1);
+			}
+		}, createInterval);
+	}
+
+	function addTrails(amount) {
+		for (let index = 0; index <= amount; index++) {
+			let position = index * glyphW;
+			containerTrail(position);
+		}
+	}
+
+	function getGlyph(fontSize = 24, lineHeight = 1) {
+		const glyphEl = document.createElement('span');
+
+		glyphEl.style = 'glyph';
+
+		return glyphEl;
+	}
+
+	function createStyle() {
+		const stylesheet = document.styleSheets[0];
+		stylesheet.cssRules[0].style.backgroundColor = "aqua";
+	}
+
+	// containerTrail(0, cEl);
+	window.addEventListener("load", canvasTrail);
+
+	function randomBetween(min, max) {
+		return (Math.random() * (max - min) + min).toFixed(2);
+	}
+
+	function randomIntFrom(min, max) {
+		min = Math.ceil(min);
+		max = Math.floor(max);
+
+		return Math.floor(Math.random() * (max - min + 1) + min);
+	}
+</script>
+{% endblock %}
\ No newline at end of file

From 8fe884aad6d7150fa3a7db4ebd7d2c3a8e1aaa75 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:21:59 +0100
Subject: [PATCH 2/5] feat: Change matrix

Add change function and test in console.
---
 source/screens/demo/examples/matrix.liquid | 41 +++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 1e2c266..5685600 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -56,16 +56,19 @@ tags:
 	const cEl = document.getElementById('container');
 
 	let createId = undefined;
+	let changeId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
 	let createInterval = 300;
-	let holdInterval = 5000;
+	let changeInterval = 300;
+	let holdInterval = 1000;
 	let cleanInterval = 1000;
 	let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
 	let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
 	let glyphW = glyphEl.offsetWidth;
 	let glyphH = glyphEl.offsetHeight;
 	let maxHeight = bodyHeight - glyphY - 2 * 16;
+	let index = 0;
 
 	cEl.style.display = 'none';
 
@@ -226,17 +229,47 @@ tags:
 	}
 
 	// containerTrail(0, cEl);
-	window.addEventListener("load", canvasTrail);
+	// window.addEventListener("load", canvasTrail);
+
+	/**
+	 * Change glyph
+	 */
+	console.log("init", changeInterval);
+	changeId = setInterval(change, changeInterval);
+
+	function change() {
+		clearInterval(holdId);
+		let char = characters.charAt(Math.floor(Math.random() * characters.length));
+		console.log(index, char);
+
+		index++;
+
+		if (index > 10) {
+			clearInterval(changeId);
+			index = 0;
+			changeInterval = randomIntFrom(100, 1000, 2);
+			console.clear();
+			console.log("hold", holdInterval);
+
+			holdId = setTimeout(() => {
+				holdInterval = randomIntFrom(1000, 10000, 3);
+
+				console.log("change", changeInterval);
+				changeId = setInterval(change, changeInterval);
+			}, holdInterval);
+		}
+	}
 
 	function randomBetween(min, max) {
 		return (Math.random() * (max - min) + min).toFixed(2);
 	}
 
-	function randomIntFrom(min, max) {
+	function randomIntFrom(min, max, pos = 0) {
+		pos = Math.pow(10, pos);
 		min = Math.ceil(min);
 		max = Math.floor(max);
 
-		return Math.floor(Math.random() * (max - min + 1) + min);
+		return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 	}
 </script>
 {% endblock %}
\ No newline at end of file

From c1633e0bc9ae8a70e8b7661446d294426e07a9d3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:44:07 +0100
Subject: [PATCH 3/5] feat: Change matrix

- Use blocks for now
- Hold and clean for line
- Only one line for now
---
 source/screens/demo/examples/matrix.liquid | 294 ++++++---------------
 1 file changed, 83 insertions(+), 211 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 5685600..8306978 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -7,255 +7,127 @@ tags:
 
 {% block style %}
 <style>
-	:root {
-		--space: 16px;
-	}
-
 	html, body {
-		height: calc(100vh - calc(var(--space) * 2));
+		height: 100vh;
 		box-sizing: border-box;
 	}
 
 	body {
-		position: relative;
-		margin: var(--space);
-		/* background-color: grey; */
-		border: 1px solid black;
+		margin: 0;
+		background-color: grey;
 		font-family: 'Courier New', Courier, monospace;
 	}
 
-	.container {
-		background-color: grey;
-	}
-
-	.glyph {
-		position: absolute;
-		top: 0;
-		left: 0;
-		font-size: 24px;
-		line-height: 1;
-		font-weight: bold;
+	#canvas {
+		display: block;
+		width: 100%;
+		height: 100%;
 	}
 </style>
 {% endblock %}
 
 {% block body %}
-<canvas id="canvas">
-	<div>Canvas element not supported.</div>
-</canvas>
-<div id="container">
-	<span id="a" class="glyph">A</span>
-</div>
+<canvas id="canvas"></canvas>
 {% endblock %}
 
 {% block script %}
 <script>
 	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	const glyphEls = document.getElementsByClassName('glyph');
-	const glyphEl = document.getElementById('a');
-	const cEl = document.getElementById('container');
+	const canvas = document.getElementById("canvas");
+	const ctx = canvas.getContext("2d");
+	const observer = new ResizeObserver(() => {
+		canvas.width = canvas.clientWidth;
+		canvas.height = canvas.clientHeight;
+		console.log("resize");
+	});
 
-	let createId = undefined;
-	let changeId = undefined;
+	let newId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
-	let createInterval = 300;
-	let changeInterval = 300;
+	let newInterval = 300;
 	let holdInterval = 1000;
-	let cleanInterval = 1000;
-	let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
-	let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
-	let glyphW = glyphEl.offsetWidth;
-	let glyphH = glyphEl.offsetHeight;
-	let maxHeight = bodyHeight - glyphY - 2 * 16;
+	let cleanInterval = 3000;
 	let index = 0;
 
-	cEl.style.display = 'none';
+	ctx.font = "24px 'Courier New', Courier, monospace";
 
-	function canvasTrail() {
-		const canvas = document.getElementById("canvas");
-		const body = document.querySelector("body");
-		canvas.width = body.clientWidth - 2;
-		canvas.height = body.clientHeight - 2;
-
-		if (canvas.getContext) {
-			const ctx = canvas.getContext("2d");
-
-			ctx.font = "24px 'Courier New', Courier, monospace";
-			// ctx.textBaseline = "top";
-
-			let glyphText = "A";
-			let glyphMeasure = ctx.measureText(glyphText);
-			let glyphX = 0;
-			let glyphY = 0;
-			let glyphW = Math.max(glyphMeasure.actualBoundingBoxLeft + glyphMeasure.actualBoundingBoxRight, glyphMeasure.width);
-			let glyphH = glyphMeasure.fontBoundingBoxDescent + glyphMeasure.fontBoundingBoxAscent;
-			let glyph = {
-				text: glyphText,
-				measure: glyphMeasure,
-				x: glyphX,
-				y: glyphY,
-				w: glyphW,
-				h: glyphH
-			}
-			let lane = [];
-
-			ctx.fillStyle = "grey";
-			ctx.fillRect(0, 0, canvas.width, canvas.height);
-			// ctx.fillStyle = "black";
-			// ctx.fillRect(glyphX, glyphY, glyphW, glyphH);
-			// ctx.fillStyle = "red";
-			// ctx.fillText(glyphText, glyphX, glyphY + glyphMeasure.fontBoundingBoxAscent);
-
-			ctx.fillStyle = "black";
-
-			createId = setInterval(createGlyph, createInterval, ctx, characters, glyph, lane);
-		} else {
-			console.log('Canvas element not supported.');
-		}
+	let char = characters.charAt(Math.floor(Math.random() * characters.length));
+	let charMeasure = ctx.measureText(char);
+	let glyph = {
+		text: char,
+		x: 0,
+		y: 0,
+		w: Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width)),
+		h: charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent
 	}
+	let lane = [];
 
-	function createGlyph(ctx, chars, glyph, lane) {
-		clearTimeout(cleanId);
-		glyph.text = chars.charAt(Math.floor(Math.random() * chars.length));
-		console.log(glyph.text, glyph.y);
+	console.log("init", newInterval);
+	console.log(glyph);
 
-		lane.push([glyph.text, glyph.y]);
+	observer.observe(canvas);
 
-		// ctx.fillStyle = "black";
-		// ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
-		ctx.fillStyle = "white";
-		ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.measure.fontBoundingBoxAscent);
+	newId = setInterval(newTrail, newInterval);
 
-		if (glyph.y >= glyph.h) {
-			let prevY = glyph.y - glyph.h;
-			let bkg = "rgba(128, 128, 128, " + randomBetween(.1, 1) + ")";
-
-			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
-			ctx.fillStyle = "grey";
-			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
-			ctx.fillStyle = "black";
-			ctx.fillText(glyph.text, glyph.x, prevY + glyph.measure.fontBoundingBoxAscent);
-			ctx.fillStyle = bkg;
-			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
-		}
-
-		glyph.y += glyph.h;
-
-		if (glyph.y > canvas.height) {
-			// holdLane(ctx, chars, glyph, lane);
-			clearInterval(createId);
-			holdId = setTimeout(holdLane, holdInterval, ctx, chars, glyph, lane);
-		}
-	}
-
-	function holdLane(ctx, chars, glyph, lane) {
-		console.log("hold");
-
-		glyph.y = 0;
-
-		// clearInterval(createId);
-
-		// Änderung der Transparenz (sehr selten)
-
-		// Änderung des Symbols (selten)
-
-		cleanId = setTimeout(cleanLane, cleanInterval, ctx, chars, glyph, lane);
-	}
-
-	function cleanLane(ctx, chars, glyph, lane) {
-		console.log("clean");
-
-		clearTimeout(holdId);
-
-		lane = [];
-
-		ctx.clearRect(glyph.x, glyph.y, glyph.w, canvas.height);
-		ctx.fillStyle = "grey";
-		ctx.fillRect(0, 0, glyph.w, canvas.height);
-
-		createId = setInterval(createGlyph, randomIntFrom(100, 1000), ctx, chars, glyph, lane);
-	}
-
-	function containerTrail(position, container) {
-		const laneEl = document.createElement('div');
-
-		laneEl.className = 'lane';
-		container.appendChild(laneEl);
-
-		let changeGlyphId = setInterval(() => {
-			let newEl = glyphEl.cloneNode();
-			let glyphX = position;
-
-			glyphY += glyphEl.clientHeight;
-			newEl.innerHTML = characters.charAt(Math.floor(Math.random() * characters.length));
-			newEl.id = '';
-			newEl.style.top = glyphY + 'px';
-			newEl.style.left = glyphX + 'px';
-			newEl.style.opacity = 1;
-
-			if (glyphY > maxHeight) {
-				glyphY = 0;
-				laneEl.textContent = '';
-			}
-
-			laneEl.appendChild(newEl);
-			let prevEl = newEl.previousElementSibling;
-
-			if (prevEl !== null) {
-				prevEl.style.opacity = randomBetween(.5, 1);
-			}
-		}, createInterval);
-	}
-
-	function addTrails(amount) {
-		for (let index = 0; index <= amount; index++) {
-			let position = index * glyphW;
-			containerTrail(position);
-		}
-	}
-
-	function getGlyph(fontSize = 24, lineHeight = 1) {
-		const glyphEl = document.createElement('span');
-
-		glyphEl.style = 'glyph';
-
-		return glyphEl;
-	}
-
-	function createStyle() {
-		const stylesheet = document.styleSheets[0];
-		stylesheet.cssRules[0].style.backgroundColor = "aqua";
-	}
-
-	// containerTrail(0, cEl);
-	// window.addEventListener("load", canvasTrail);
-
-	/**
-	 * Change glyph
-	 */
-	console.log("init", changeInterval);
-	changeId = setInterval(change, changeInterval);
-
-	function change() {
+	function newTrail() {
 		clearInterval(holdId);
-		let char = characters.charAt(Math.floor(Math.random() * characters.length));
-		console.log(index, char);
+
+		glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
+		console.log(index, glyph.text);
+
+		lane.push([index, glyph.text, glyph.y]);
+
+		ctx.fillStyle = "white";
+		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
+		// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
+
+		if (index > 0) {
+			let prevY = glyph.y - glyph.h;
+			ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
+			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+		}
 
 		index++;
+		glyph.y += glyph.h;
 
 		if (index > 10) {
-			clearInterval(changeId);
-			index = 0;
-			changeInterval = randomIntFrom(100, 1000, 2);
-			console.clear();
 			console.log("hold", holdInterval);
 
-			holdId = setTimeout(() => {
-				holdInterval = randomIntFrom(1000, 10000, 3);
+			clearInterval(newId);
 
-				console.log("change", changeInterval);
-				changeId = setInterval(change, changeInterval);
+			index = 0;
+			glyph.y = 0;
+			newInterval = randomIntFrom(100, 1000, 2);
+
+			holdId = setTimeout(() => {
+				console.log("clean", cleanInterval);
+
+				holdInterval = randomIntFrom(1000, 10000, 3);
+				cleanId = setInterval(cleanTrail, cleanInterval);
+			}, holdInterval);
+		}
+	}
+
+	function cleanTrail() {
+		clearInterval(holdId);
+
+		let pos = lane.shift();
+		console.log(pos);
+
+		ctx.clearRect(0, pos[2], glyph.w, glyph.h);
+		// ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		if (!lane.length) {
+			console.log("hold", holdInterval);
+
+			clearInterval(cleanId);
+
+			holdId = setTimeout(() => {
+				console.clear();
+				console.log("new", newInterval);
+
+				cleanInterval = randomIntFrom(1000, 10000, 3);
+				newId = setInterval(newTrail, newInterval);
 			}, holdInterval);
 		}
 	}

From 87bea407760638e79c7b37283b3e5b954943dc10 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:49:13 +0100
Subject: [PATCH 4/5] feat: Change matrix

Improvements to line trailing.
---
 source/screens/demo/examples/matrix.liquid | 70 ++++++++++++----------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 8306978..5e06d92 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -41,26 +41,30 @@ tags:
 		console.log("resize");
 	});
 
+	ctx.font = "24px 'Courier New', Courier, monospace";
+
+	let char = characters.charAt(Math.floor(Math.random() * characters.length));
+	let charMeasure = ctx.measureText(char);
+	let charW = Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width));
+	let charH = charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent;
+	let glyph = {
+		text: char,
+		x: 0,
+		y: 0,
+		w: 13,
+		h: 24
+	}
+	let lane = [];
+	let max = Math.floor(canvas.clientHeight / glyph.h);
+
 	let newId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
 	let newInterval = 300;
 	let holdInterval = 1000;
-	let cleanInterval = 3000;
-	let index = 0;
-
-	ctx.font = "24px 'Courier New', Courier, monospace";
-
-	let char = characters.charAt(Math.floor(Math.random() * characters.length));
-	let charMeasure = ctx.measureText(char);
-	let glyph = {
-		text: char,
-		x: 0,
-		y: 0,
-		w: Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width)),
-		h: charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent
-	}
-	let lane = [];
+	let cleanInterval = 400;
+	let newIndex = 0;
+	let cleanIndex = randomIntFrom(1, max);
 
 	console.log("init", newInterval);
 	console.log(glyph);
@@ -73,49 +77,53 @@ tags:
 		clearInterval(holdId);
 
 		glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
-		console.log(index, glyph.text);
+		console.log(newIndex, glyph.text);
 
-		lane.push([index, glyph.text, glyph.y]);
+		lane.push([newIndex, glyph.text, glyph.y]);
 
 		ctx.fillStyle = "white";
 		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
 		// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
 
-		if (index > 0) {
+		if (newIndex > 0) {
 			let prevY = glyph.y - glyph.h;
 			ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
 			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
 		}
 
-		index++;
+		if (newIndex === cleanIndex) {
+			console.log("clean", cleanInterval, cleanIndex);
+
+			cleanId = setInterval(cleanTrail, cleanInterval);
+		}
+
+		newIndex++;
 		glyph.y += glyph.h;
 
-		if (index > 10) {
-			console.log("hold", holdInterval);
+		if (newIndex > max) {
+			// console.log("hold", holdInterval);
+			console.log("end");
 
 			clearInterval(newId);
 
-			index = 0;
+			newIndex = 0;
 			glyph.y = 0;
 			newInterval = randomIntFrom(100, 1000, 2);
 
-			holdId = setTimeout(() => {
-				console.log("clean", cleanInterval);
+			// holdId = setTimeout(() => {
+			// 	console.log("clean", cleanInterval);
 
-				holdInterval = randomIntFrom(1000, 10000, 3);
-				cleanId = setInterval(cleanTrail, cleanInterval);
-			}, holdInterval);
+			// 	holdInterval = randomIntFrom(1000, 10000, 3);
+			// 	cleanId = setInterval(cleanTrail, cleanInterval);
+			// }, holdInterval);
 		}
 	}
 
 	function cleanTrail() {
-		clearInterval(holdId);
-
 		let pos = lane.shift();
 		console.log(pos);
 
 		ctx.clearRect(0, pos[2], glyph.w, glyph.h);
-		// ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 		if (!lane.length) {
 			console.log("hold", holdInterval);
@@ -126,7 +134,9 @@ tags:
 				console.clear();
 				console.log("new", newInterval);
 
+				cleanIndex = randomIntFrom(1, max);
 				cleanInterval = randomIntFrom(1000, 10000, 3);
+				holdInterval = randomIntFrom(1000, 10000, 3);
 				newId = setInterval(newTrail, newInterval);
 			}, holdInterval);
 		}

From a9620461830ffb4f842f8808b2af3f4213a951ad Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:53:49 +0100
Subject: [PATCH 5/5] feat: Change matrix

- Show characters
- Stop using observer
---
 source/screens/demo/examples/matrix.liquid | 32 ++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 5e06d92..3eb62e9 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -35,13 +35,19 @@ tags:
 	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 	const canvas = document.getElementById("canvas");
 	const ctx = canvas.getContext("2d");
-	const observer = new ResizeObserver(() => {
-		canvas.width = canvas.clientWidth;
-		canvas.height = canvas.clientHeight;
-		console.log("resize");
-	});
+	// const observer = new ResizeObserver(() => {
+	// 	canvas.width = canvas.clientWidth;
+	// 	canvas.height = canvas.clientHeight;
+	// 	console.log("resize");
+	// });
+
+	canvas.width = canvas.clientWidth;
+	canvas.height = canvas.clientHeight;
+
+	// observer.observe(canvas);
 
 	ctx.font = "24px 'Courier New', Courier, monospace";
+	ctx.textBaseline = "top";
 
 	let char = characters.charAt(Math.floor(Math.random() * characters.length));
 	let charMeasure = ctx.measureText(char);
@@ -51,8 +57,8 @@ tags:
 		text: char,
 		x: 0,
 		y: 0,
-		w: 13,
-		h: 24
+		w: charH,
+		h: charH
 	}
 	let lane = [];
 	let max = Math.floor(canvas.clientHeight / glyph.h);
@@ -69,8 +75,6 @@ tags:
 	console.log("init", newInterval);
 	console.log(glyph);
 
-	observer.observe(canvas);
-
 	newId = setInterval(newTrail, newInterval);
 
 	function newTrail() {
@@ -83,12 +87,18 @@ tags:
 
 		ctx.fillStyle = "white";
 		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
-		// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
+		ctx.fillStyle = "black";
+		ctx.fillText(glyph.text, Math.floor((charH - charW) / 2), glyph.y);
 
 		if (newIndex > 0) {
 			let prevY = glyph.y - glyph.h;
-			ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
+			let alpha = randomBetween(.2, 1);
+			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
 			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "rgba(255, 255, 255, " + alpha + ")";
+			// TODO: can not use array lane if it is changed by cleanTrail()
+			ctx.fillText(lane[newIndex - 1][1], Math.floor((charH - charW) / 2), prevY);
 		}
 
 		if (newIndex === cleanIndex) {