Six clip-path wipe variants in a comparison grid.
<!doctype html>
<html data-duration="8" 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(--ink); height: 100vh; margin: 0; overflow: hidden;
display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr);
gap: 4px; font-family: ui-sans-serif, system-ui; }
.cell { position: relative; overflow: hidden; background: #111; }
.cell::before { content: attr(data-label); position: absolute; top: 12px; left: 14px;
font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: rgba(255,255,255,.55); z-index: 3; }
.front, .back { position: absolute; inset: 0; display: grid; place-items: center;
font-size: 64px; font-weight: 800; letter-spacing: -.04em; color: white; }
.back { background: var(--signal); }
.front { background: var(--ink); }
</style></head><body>
<div class="cell" data-label="linear">
<div class="back">AFTER</div><div class="front" id="f1">BEFORE</div></div>
<div class="cell" data-label="diagonal">
<div class="back">AFTER</div><div class="front" id="f2">BEFORE</div></div>
<div class="cell" data-label="iris">
<div class="back">AFTER</div><div class="front" id="f3">BEFORE</div></div>
<div class="cell" data-label="bars">
<div class="back">AFTER</div><div class="front" id="f4">BEFORE</div></div>
<div class="cell" data-label="reveal">
<div class="back">AFTER</div><div class="front" id="f5">BEFORE</div></div>
<div class="cell" data-label="circle">
<div class="back">AFTER</div><div class="front" id="f6">BEFORE</div></div>
<script>
function ease(t){ return t < .5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)/2; }
function render(tt){
var t = (tt % 4) / 4;
var e = ease(t);
var p = (e * 100).toFixed(1);
document.getElementById('f1').style.clipPath = 'inset(0 ' + p + '% 0 0)';
document.getElementById('f2').style.clipPath = 'polygon(0 0,' + (100-e*100).toFixed(1) + '% 0,' + Math.max(0,100-e*150).toFixed(1) + '% 100%,0 100%)';
document.getElementById('f3').style.clipPath = 'circle(' + (70-e*70).toFixed(1) + '% at 50% 50%)';
var n = 6;
var bars = [];
for (var i = 0; i < n; i++){
var top = (i/n)*100, bot = ((i+1)/n)*100;
var w = (1 - e) * 100;
bars.push((i%2===0 ? '0% ' + top + '%,' + w + '% ' + top + '%,' + w + '% ' + bot + '%,0% ' + bot + '%' : (100-w) + '% ' + top + '%,100% ' + top + '%,100% ' + bot + '%,' + (100-w) + '% ' + bot + '%'));
}
document.getElementById('f4').style.clipPath = 'polygon(' + bars.join(',') + ')';
document.getElementById('f5').style.clipPath = 'inset(' + p + '% 0 0 0)';
document.getElementById('f6').style.clipPath = 'circle(' + (e*70) + '% at 50% 50%)';
document.getElementById('f6').style.clipPath = 'circle(' + ((1-e)*70) + '% at 50% 50%)';
}
addEventListener('hf-seek', function(e){ render(e.detail.time); });
render(0);
</script>
</body></html>