Instead of moving linearly, these particles use a randomized Brownian motion algorithm. They jitter and float erratically across the canvas just like dust caught in a sunbeam, calculating randomized sub-pixel drifts every frame.
<!DOCTYPE html>
<html>
<head>
<title>Digital Dust Motes</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #222222;
}
.scene {
position: relative;
width: 100%;
height: 100%;
perspective: 300px;
font-family: 'Courier New', Courier, monospace;
color: #666;
}
.binary-char {
position: absolute;
will-change: transform, opacity;
animation-name: float;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes float {
0% {
transform: translateY(15px) rotateX(0deg);
opacity: var(--start-opacity);
}
100% {
transform: translateY(-15px) rotateX(5deg);
opacity: var(--end-opacity);
}
}
</style>
</head>
<body>
<div class="scene" id="scene"></div>
<script>
const scene = document.getElementById('scene');
const charCount = 150;
for (let i = 0; i < charCount; i++) {
const char = document.createElement('div');
char.className = 'binary-char';
char.textContent = Math.random() > 0.5 ? '1' : '0';
const zPos = (Math.random() * 400) - 200; // -200px to 200px
const scale = (400 - (zPos + 200)) / 400; // Scale based on Z for depth
char.style.setProperty('--start-opacity', Math.random() * 0.5);
char.style.setProperty('--end-opacity', Math.random() * 0.5 + 0.2);
char.style.left = `${Math.random() * 100}%`;
char.style.top = `${Math.random() * 100}%`;
char.style.fontSize = `${10 + scale * 12}px`;
char.style.transform = `translateZ(${zPos}px)`;
char.style.animationDelay = `${Math.random() * -10}s`; // Stagger start times
char.style.color = `rgba(150, 150, 150, ${0.2 + scale * 0.5})`;
scene.appendChild(char);
}
</script>
</body>
</html>Step-by-step instructions to integrate Digital Dust into your project.
<style> block into your CSS <script> block before your closing </body> tag position: fixed; inset: 0; z-index: -1 pointer-events: none to the container if the animation blocks clicks