5-second channel intro with sliding bars and tagline.
Edit these placeholders inline or pass --var NAME=value to hyperframes render.
| Variable | Type | Default | Range |
|---|---|---|---|
{{$CHANNEL}}Channel name | text | HyperFrames | — |
{{$TAGLINE}}Tagline | text | videos that render themselves | — |
{{$ACCENT}}Bar color | color | #ff3b1f | — |
{{$BG}}Background | color | #0a0a0a | — |
<!doctype html>
<html data-duration="5" 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: {{$BG}}; height: 100vh; margin: 0; overflow: hidden;
display: grid; place-items: center; font-family: ui-sans-serif, system-ui; color: white; }
.stage { text-align: center; }
.bar { width: 0; height: 6px; background: {{$ACCENT}}; margin: 24px auto;
border-radius: 4px; }
.chan { font-size: 132px; font-weight: 900; letter-spacing: -.05em;
opacity: 0; transform: translateY(20px); }
.tag { margin-top: 18px; font-size: 18px; letter-spacing: .5em; text-transform: uppercase;
opacity: 0; }
</style></head><body>
<div class="stage">
<div class="bar" id="bar"></div>
<div class="chan" id="chan">{{$CHANNEL}}</div>
<div class="bar" id="bar2"></div>
<div class="tag" id="tag">{{$TAGLINE}}</div>
</div>
<script>
function ease(t){ return 1 - Math.pow(1-t,3); }
function clamp(x){ return Math.max(0, Math.min(1, x)); }
function render(t){
var b1 = ease(clamp((t - 0.1) / 0.6));
var c = ease(clamp((t - 0.8) / 0.8));
var b2 = ease(clamp((t - 1.6) / 0.5));
var tg = ease(clamp((t - 2.0) / 0.6));
document.getElementById('bar').style.width = (b1 * 60) + '%';
document.getElementById('bar2').style.width = (b2 * 30) + '%';
var chan = document.getElementById('chan');
chan.style.opacity = String(c);
chan.style.transform = 'translateY(' + ((1-c)*20).toFixed(1) + 'px)';
document.getElementById('tag').style.opacity = String(tg);
}
addEventListener('hf-seek', function(e){ render(e.detail.time); });
render(0);
</script>
</body></html>