Centered serif title card with symmetric framing.
Edit these placeholders inline or pass --var NAME=value to hyperframes render.
| Variable | Type | Default | Range |
|---|---|---|---|
{{$TITLE}}Title | text | The Grand Render | — |
{{$SUBTITLE}}Subtitle | text | an animation in three parts | — |
{{$BG}}Background | color | #f0d9a8 | — |
{{$INK}}Ink color | color | #3a2a14 | — |
<!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}}; height: 100vh; margin: 0; overflow: hidden;
display: grid; place-items: center; font-family: ui-serif, Georgia, serif;
color: {{$INK}}; }
.frame { width: 70%; text-align: center; padding: 60px;
border: 2px solid {{$INK}}; }
.chap { font-size: 18px; letter-spacing: .5em; text-transform: uppercase; opacity: 0;
transform: translateY(8px); }
.title { font-size: 92px; font-weight: 500; letter-spacing: -.02em; margin: 28px 0;
font-style: italic; opacity: 0; }
.sub { font-size: 22px; letter-spacing: .25em; text-transform: uppercase; opacity: 0; }
.bar { width: 60px; height: 1px; background: {{$INK}}; margin: 28px auto; transform: scaleX(0); }
</style></head><body>
<div class="frame">
<div class="chap" id="c">— Chapter One —</div>
<div class="bar" id="b"></div>
<div class="title" id="t">{{$TITLE}}</div>
<div class="bar" id="b2"></div>
<div class="sub" id="s">{{$SUBTITLE}}</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 a = ease(clamp((t - 0.2) / 0.6));
var b = ease(clamp((t - 0.8) / 0.6));
var c = ease(clamp((t - 1.4) / 0.7));
var d = ease(clamp((t - 2.0) / 0.6));
document.getElementById('c').style.opacity = a;
document.getElementById('c').style.transform = 'translateY(' + ((1-a)*8) + 'px)';
document.getElementById('b').style.transform = 'scaleX(' + b + ')';
document.getElementById('t').style.opacity = c;
document.getElementById('b2').style.transform = 'scaleX(' + d + ')';
document.getElementById('s').style.opacity = d;
}
addEventListener('hf-seek', function(e){ render(e.detail.time); });
render(0);
</script>
</body></html>