200-dot depth-tiered particle field, 'HF' in negative space.
<!doctype html>
<!-- Example: neon-pulse — 200-dot simplex field · depth tiers · "HF" negative space -->
<html data-duration="8" data-aspect="16:9"><head><style>
:root {
--cream:#f6f5f1; --cream-2:#efece4; --ink:#0a0a0a; --mute:#6b6862;
--line:#e3dfd3; --signal:#ff3b1f; --signal-2:#ff6a4a; --frame:#ffb800;
--green:#1f8a5b; --blue:#2b66ff;
}
* { box-sizing: border-box; }
body { margin:0; }
body { background: radial-gradient(circle at 50% 50%, #100024 0%, #050010 70%);
color: white; height: 100vh; overflow: hidden; position: relative;
font-family: ui-sans-serif, system-ui;
display: grid; place-items: center; }
.field { position: absolute; inset: 0; }
.dot { position: absolute; border-radius: 50%;
mix-blend-mode: screen;
will-change: transform, opacity; }
.mark { position: relative; z-index: 2; font-size: 320px; font-weight: 900;
letter-spacing: -0.08em; color: var(--ink);
text-shadow: 0 0 80px rgba(255,59,31,.55);
-webkit-text-stroke: 2px rgba(255,59,31,.45); }
.sub { position: absolute; bottom: 80px; left: 0; right: 0; text-align: center;
font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .35em;
color: rgba(255,106,74,.85); }
</style></head><body>
<div class="field" id="f"></div>
<div class="mark">HF</div>
<div class="sub">// pulse · cycle · ignite</div>
<script>
var f = document.getElementById('f');
var N = 200;
var dots = [];
for (var i = 0; i < N; i++) {
var el = document.createElement('div');
el.className = 'dot';
// Stable per-dot params from the index.
var seed = i * 12.9898;
var bx = (Math.sin(seed) * 43758.5453) % 1; bx = bx < 0 ? bx + 1 : bx;
var by = (Math.sin(seed + 1) * 43758.5453) % 1; by = by < 0 ? by + 1 : by;
var depth = (i % 4) / 3; // 0=back, 1=front
var size = 3 + depth * 12;
var hue = i % 7 === 0 ? '#ffb800' : (i % 3 === 0 ? '#ff6a4a' : '#ff3b1f');
el.style.width = size + 'px'; el.style.height = size + 'px';
el.style.left = (bx * 100).toFixed(2) + '%';
el.style.top = (by * 100).toFixed(2) + '%';
el.style.background = hue;
el.style.boxShadow = '0 0 ' + (size * 4) + 'px ' + hue;
el.style.opacity = String(0.25 + depth * 0.55);
f.appendChild(el);
dots.push({ el: el, bx: bx, by: by, depth: depth, i: i });
}
var t = 0;
var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function render() {
var tt = reduced ? 0 : t;
var pulse = 0.7 + 0.3 * Math.abs(Math.sin(tt * 2.4));
dots.forEach(function(o) {
// Per-dot orbit; depth shifts magnitude and phase.
var amp = 8 + o.depth * 36;
var ph = o.i * 1.7;
var dx = Math.sin(tt * (0.6 + o.depth) + ph) * amp;
var dy = Math.cos(tt * (0.4 + o.depth) + ph * 0.5) * amp;
o.el.style.transform = 'translate(' + dx.toFixed(1) + 'px, ' + dy.toFixed(1) + 'px) scale(' + (0.85 + pulse * 0.45).toFixed(2) + ')';
});
}
addEventListener('hf-seek', function(e) { t = e.detail.time; render(); });
render();
</script>
</body></html>