Spring-overshoot mark with per-character wordmark stagger.
Edit these placeholders inline or pass --var NAME=value to hyperframes render.
| Variable | Type | Default | Range |
|---|---|---|---|
{{$INITIAL}}Mark glyph | text | H | — |
{{$BRAND}}Wordmark | text | Hyperframes | — |
{{$ACCENT}}Mark color | color | #ff3b1f | — |
{{$BG_COLOR}}Background | color | #f6f5f1 | — |
<!doctype html>
<html data-duration="6" 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_COLOR}}; color: var(--ink); height: 100vh; overflow: hidden;
display: grid; place-items: center; font-family: ui-sans-serif, system-ui; }
.wrap { display: flex; align-items: center; gap: 40px; }
.mark { width: 180px; height: 180px; border-radius: 36px; display: grid; place-items: center;
background: {{$ACCENT}}; color: white; font-weight: 900; font-size: 120px;
letter-spacing: -.06em; box-shadow: 0 30px 80px -30px rgba(0,0,0,.4);
transform: scale(0); will-change: transform; }
.word { font-size: 88px; font-weight: 700; letter-spacing: -.04em; overflow: hidden; display: flex; }
.word span { display: inline-block; transform: translateY(110%); will-change: transform; }
</style></head><body>
<div class="wrap">
<div class="mark" id="m">{{$INITIAL}}</div>
<div class="word" id="w"></div>
</div>
<script>
var WORD = "{{$BRAND}}";
var w = document.getElementById('w');
var chars = WORD.split('').map(function(c){
var s = document.createElement('span'); s.textContent = c === ' ' ? ' ' : c; w.appendChild(s); return s;
});
var m = document.getElementById('m');
function spring(t){ return 1 - Math.exp(-6 * t) * Math.cos(8 * t); }
function ease(t){ return 1 - Math.pow(1 - t, 3); }
function render(t){
var s = spring(Math.min(1, t / 1.2));
m.style.transform = 'scale(' + s.toFixed(3) + ')';
chars.forEach(function(el, i){
var start = 0.6 + i * 0.06;
var u = Math.max(0, Math.min(1, (t - start) / 0.6));
el.style.transform = 'translateY(' + ((1 - ease(u)) * 110).toFixed(1) + '%)';
});
}
var tt = 0;
addEventListener('hf-seek', function(e){ tt = e.detail.time; render(tt); });
render(0);
</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.