Starfield
page decoration 1998 still worksStars streaming past the screen, like the Windows screensaver.
In 2026: Works. The 1998 version drew this with 60 stacked <layer> tags. This one uses a canvas and is about a thousand times cheaper.
Where it came from: Ported by many people from the Windows 3.1 Starfield Simulation screensaver, which everybody had already seen. Wikipedia ↗
<style>
/* Black page. The canvas sits fixed behind everything and the content rides
on top with a higher z-index. A z-index:-1 canvas would vanish behind an
opaque body background, which is the classic way this effect "breaks". */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
#stars { position: fixed; inset: 0; z-index: 0; display: block; }
.cyber { position: relative; z-index: 1; margin: 0 0 8px; padding: 0 18px;
color: #fff; font-family: Verdana, sans-serif; text-shadow: 0 0 6px #39f; }
h2.cyber { padding-top: 16px; }
</style>
<canvas id="stars"></canvas>
<h2 class="cyber">WELCOME TO CYBERSPACE</h2>
<p class="cyber">Stars stream past behind the text, like the Windows 3.1 screensaver.</p>
<script language="JavaScript">
var cv = document.getElementById("stars"), cx = cv.getContext("2d"), st = [];
function sizeIt() { cv.width = window.innerWidth; cv.height = window.innerHeight; }
sizeIt(); window.onresize = sizeIt;
for (var i = 0; i < 220; i++) {
st.push({ x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2,
z: Math.random() });
}
setInterval(function () {
cx.fillStyle = "#000"; cx.fillRect(0, 0, cv.width, cv.height);
var hw = cv.width / 2, hh = cv.height / 2;
for (var i = 0; i < st.length; i++) {
var s = st[i];
s.z -= 0.006;
if (s.z <= 0.01) { s.z = 1; s.x = (Math.random() - 0.5) * 2; s.y = (Math.random() - 0.5) * 2; }
var px = hw + (s.x / s.z) * hw, py = hh + (s.y / s.z) * hh;
var r = (1 - s.z) * 2.4;
cx.fillStyle = "rgba(255,255,255," + (1 - s.z) + ")";
cx.fillRect(px, py, r, r);
}
}, 33);
</script>