Ink-bleed displacement with hand-drawn underline path-draw.
<!doctype html>
<!-- Example: editorial-pull-quote — SVG path-draw + ink-bleed displacement + soft-bloom -->
<html data-duration="7" 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: var(--cream-2); color: var(--ink); height: 100vh;
display: grid; place-items: center; font-family: ui-serif, Georgia, serif;
overflow: hidden; }
.q { max-width: 980px; padding: 72px; text-align: center; position: relative; }
.mark { font-size: 200px; color: var(--signal); line-height: 0;
filter: url(#bloom); display: inline-block; }
h2 { font-size: 64px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.18;
margin: 0; }
.attr { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .25em;
text-transform: uppercase; color: var(--mute); margin-top: 40px; }
.line { display: block; opacity: 0; transform: translateY(14px); }
em { color: var(--signal); font-style: italic; filter: url(#bleed); }
svg.ul { display: block; margin: -12px auto 0; }
.underline { stroke: var(--signal); stroke-width: 4.5; fill: none; stroke-linecap: round;
filter: url(#bleed); }
</style></head><body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<filter id="bleed" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="3" result="n"/>
<feDisplacementMap in="SourceGraphic" in2="n" scale="1.6" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<filter id="bloom" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
</svg>
<div class="q">
<div class="mark" id="mk">“</div>
<h2>
<span class="line" id="l1">Every frame is a commit</span>
<span class="line" id="l2">you can <em>diff</em>, <em>blame</em>, and <em>revert</em>.</span>
</h2>
<svg class="ul" width="380" height="22" viewBox="0 0 380 22">
<path id="ul" class="underline" d="M10,14 Q90,2 200,12 T370,10"
stroke-dasharray="500" stroke-dashoffset="500" />
</svg>
<div class="attr" id="atr" style="opacity:0">— design notes / 2026</div>
</div>
<script>
var mk = document.getElementById('mk');
var lines = [document.getElementById('l1'), document.getElementById('l2')];
var ul = document.getElementById('ul');
var atr = document.getElementById('atr');
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 ? 3.5 : t;
var um = ease(Math.max(0, Math.min(1, tt / 0.9)));
mk.style.opacity = um;
mk.style.transform = 'translateY(' + ((1 - um) * 24).toFixed(1) + 'px) scale(' + (0.8 + um * 0.2).toFixed(2) + ')';
lines.forEach(function(el, i) {
var u = ease(Math.max(0, Math.min(1, (tt - 0.6 - i * 0.5) / 1.1)));
el.style.opacity = u;
el.style.transform = 'translateY(' + ((1 - u) * 14).toFixed(1) + 'px)';
});
var uu = ease(Math.max(0, Math.min(1, (tt - 2.0) / 1.4)));
ul.setAttribute('stroke-dashoffset', String(500 * (1 - uu)));
var ua = ease(Math.max(0, Math.min(1, (tt - 3.0) / 1.2)));
atr.style.opacity = ua;
}
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.