64-band beat envelope with quarter-bar kick and logo side-chain.
<!doctype html>
<!-- Example: bar-spectrum-fft — 64-band beat envelope · kick on 0.25-bars · side-chain logo glow -->
<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: #06060c; color: var(--cream); height: 100vh;
display: grid; grid-template-rows: auto 1fr auto; padding: 48px;
font-family: ui-monospace, monospace; }
.head { display: flex; justify-content: space-between; align-items: center; }
.title { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.bpm { color: var(--signal); }
.stage { position: relative; padding-top: 32px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 100%;
position: relative; z-index: 1; }
.bars > i { flex: 1; background: linear-gradient(180deg, var(--signal), var(--frame));
border-radius: 4px 4px 0 0; transform-origin: bottom; height: 100%; min-height: 6px;
will-change: transform; box-shadow: 0 0 12px rgba(255,59,31,.35); }
.logo { position: absolute; right: 36px; top: 0; bottom: 0; display: grid; place-items: center;
z-index: 0; pointer-events: none; }
.logo .h { font-size: 240px; font-weight: 900; letter-spacing: -0.08em;
color: rgba(255,59,31,.35); filter: blur(0px); will-change: filter, opacity; }
.bottom { display: flex; justify-content: space-between; padding-top: 16px;
font-size: 11px; opacity: .6; letter-spacing: .2em; }
.kick { position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: radial-gradient(circle at 50% 90%, rgba(255,184,0,.4), transparent 50%);
mix-blend-mode: screen; z-index: 2; }
</style></head><body>
<div class="head">
<span class="title">● Spectrum · 64-band · live</span>
<span class="bpm" id="bpm">128 BPM · 4/4</span>
</div>
<div class="stage">
<div class="logo"><span class="h" id="logo">HF</span></div>
<div class="bars" id="s"></div>
<div class="kick" id="kick"></div>
</div>
<div class="bottom">
<span>20Hz</span><span>200Hz</span><span>2kHz</span><span>8kHz</span><span>20kHz</span>
</div>
<script>
var N = 64;
var s = document.getElementById('s');
var bars = [];
for (var i = 0; i < N; i++) {
var el = document.createElement('i');
s.appendChild(el);
bars.push(el);
}
var logo = document.getElementById('logo');
var kick = document.getElementById('kick');
var BPM = 128;
var beat = 60 / BPM;
var quarter = beat / 4;
var t = 0;
var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function render() {
var tt = reduced ? 1.2 : t;
// Beat envelope: rises sharp on each quarter, decays.
var phase = (tt % quarter) / quarter;
var env = Math.max(0, 1 - phase * 1.6);
// Kick fires at the start of every full beat.
var beatPhase = (tt % beat) / beat;
var kickEnv = Math.max(0, 1 - beatPhase * 4);
bars.forEach(function(b, i) {
var freq = i / N;
var lowEnv = (1 - freq) * env * 0.9;
var midEnv = (1 - Math.abs(freq - 0.5) * 2) * env * 0.4;
var sparkle = 0.22 + 0.7 * Math.abs(Math.sin(tt * (3.5 + freq * 9) + i * 1.7));
var h = Math.min(1, 0.12 + lowEnv * 0.7 + midEnv * 0.3 + sparkle * 0.5 * freq);
b.style.transform = 'scaleY(' + h.toFixed(3) + ')';
});
kick.style.opacity = String(kickEnv * 0.85);
// Logo side-chains against the kick: brighter during low envelope, dimmer at kick onset.
var sc = 1 - kickEnv * 0.55;
logo.style.opacity = String(0.45 * sc + 0.3);
logo.style.filter = 'blur(' + (kickEnv * 6).toFixed(1) + 'px)';
}
addEventListener('hf-seek', function(e) { t = e.detail.time; render(); });
render();
</script>
</body></html>Editorial line-by-line clip reveal with monospace ticker and accent flash.
SVG path interpolation between topology-matched glyph shapes.
Constrained damped-spring char stagger with decaying chromatic split.