Broadcast LT with sting glow, glitch frame, variable-axis name.
<!doctype html>
<!-- Example: lower-third-news — ticker · glitch frame · sting glow · variable-axis name typeout -->
<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: #0e1220; height: 100vh; overflow: hidden;
font-family: ui-sans-serif, system-ui; color: white;
background-image:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 40%),
linear-gradient(180deg, #1c2030, #0a0a14); }
.glitch { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, transparent 0%, rgba(255,59,31,.4) 50%, transparent 100%);
opacity: 0; mix-blend-mode: screen; transform: translateY(0); }
.sting { position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 30% 80%, rgba(255,59,31,.5), transparent 35%);
opacity: 0; mix-blend-mode: screen; }
.frame { position: absolute; left: 64px; bottom: 110px; right: 64px; max-width: 1100px; z-index: 2; }
.tag { display: inline-block; background: var(--signal); color: white;
padding: 9px 18px; font-family: ui-monospace, monospace; font-size: 13px;
letter-spacing: .25em; text-transform: uppercase; transform: translateX(-100%);
box-shadow: 0 12px 30px -16px rgba(255,59,31,.7); }
.bar { background: rgba(0,0,0,.55); backdrop-filter: blur(10px);
padding: 22px 28px; border-left: 4px solid var(--signal);
clip-path: inset(0 100% 0 0); }
.kick { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .28em;
color: var(--frame); text-transform: uppercase; margin-bottom: 8px; }
.head { font-size: 36px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
min-height: 1.2em; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 12px;
font-family: ui-sans-serif, system-ui; }
.byline .name { font-size: 18px;
font-variation-settings: "wght" 300, "wdth" 80;
font-weight: 400; }
.byline .role { font-family: ui-monospace, monospace; font-size: 11px;
letter-spacing: .2em; color: rgba(255,255,255,.65); text-transform: uppercase; }
.clock { position: absolute; top: 32px; right: 32px; font-family: ui-monospace, monospace;
font-size: 12px; letter-spacing: .22em; color: rgba(255,255,255,.6); z-index: 3; }
.live { display:inline-flex; align-items:center; gap:6px; color: var(--signal); }
.live::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--signal); }
.ticker { position: absolute; left: 0; right: 0; bottom: 0;
background: var(--ink); color: white; padding: 10px 0;
font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .18em;
text-transform: uppercase; overflow: hidden; white-space: nowrap; z-index: 4; }
.ticker .belt { display: inline-block; will-change: transform; }
.ticker .belt span { padding-right: 64px; }
</style></head><body>
<div class="sting" id="st"></div>
<div class="glitch" id="gl"></div>
<div class="clock"><span class="live">LIVE</span> · 23:48 UTC · ch.04</div>
<div class="frame">
<div class="tag" id="tag">BREAKING</div>
<div class="bar" id="bar">
<div class="kick">HyperFrames · global</div>
<div class="head" id="head"></div>
<div class="byline">
<span class="name" id="name">Reported by Sam Vega</span>
<span class="role">// Senior correspondent</span>
</div>
</div>
</div>
<div class="ticker">
<div class="belt" id="belt">
<span>● BROWSER-NATIVE 4K — 5s PER SCENE · NEW PIPELINE · COMMUNITY EDITION · MIT LICENSE · </span>
<span>● BROWSER-NATIVE 4K — 5s PER SCENE · NEW PIPELINE · COMMUNITY EDITION · MIT LICENSE · </span>
</div>
</div>
<script>
var tag = document.getElementById('tag');
var bar = document.getElementById('bar');
var head = document.getElementById('head');
var name = document.getElementById('name');
var st = document.getElementById('st');
var gl = document.getElementById('gl');
var belt = document.getElementById('belt');
var FULL = 'Browser-native renderer ships 4K in under five seconds.';
var NAME = 'Reported by Sam Vega';
var t = 0;
var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function ease(x){ return 1 - Math.pow(1 - x, 3); }
function render() {
var tt = reduced ? 4 : t;
var uTag = ease(Math.min(1, tt / 0.55));
tag.style.transform = 'translateX(' + ((1 - uTag) * -100) + '%)';
var uBar = ease(Math.max(0, Math.min(1, (tt - 0.45) / 0.8)));
bar.style.clipPath = 'inset(0 ' + ((1 - uBar) * 100) + '% 0 0)';
var uText = Math.max(0, Math.min(1, (tt - 1.2) / 2.8));
head.textContent = FULL.slice(0, Math.floor(uText * FULL.length));
// Name typeout with variable-axis morph (light/condensed → semibold/wider).
var uName = Math.max(0, Math.min(1, (tt - 2.0) / 1.6));
name.textContent = NAME.slice(0, Math.floor(uName * NAME.length));
var wght = 250 + uName * 350;
var wdth = 78 + uName * 28;
name.style.fontVariationSettings = '"wght" ' + wght.toFixed(0) + ', "wdth" ' + wdth.toFixed(0);
// Mid-stage sting glow at t≈3.5s.
var sg = Math.max(0, 1 - Math.abs(tt - 3.5) * 1.1);
st.style.opacity = String(sg * 0.9);
// Glitch flicker frame at t≈1.0s.
var gf = Math.max(0, 1 - Math.abs(tt - 1.0) * 5);
gl.style.opacity = String(gf);
gl.style.transform = 'translateY(' + (Math.sin(tt * 40) * 6).toFixed(1) + 'px)';
// Ticker scroll.
var x = -((tt * 140) % 1400);
belt.style.transform = 'translateX(' + x.toFixed(0) + 'px)';
}
addEventListener('hf-seek', function(e) { t = e.detail.time; render(); });
render();
</script>
</body></html>