Twelve standard easing curves running side-by-side.
<!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: var(--cream); height: 100vh; margin: 0; padding: 4%; overflow: hidden;
display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
gap: 14px; font-family: ui-sans-serif, system-ui; color: var(--ink); }
.row { position: relative; background: white; border: 1px solid var(--line); border-radius: 14px;
padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.lbl { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .15em;
text-transform: uppercase; color: var(--mute); }
.track { position: relative; height: 16px; background: #f0ece2; border-radius: 8px; }
.dot { position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 16px;
border-radius: 50%; background: var(--signal); will-change: left; left: 0; }
</style></head><body>
<script>
var CURVES = [
['linear', function(t){ return t; }],
['ease', function(t){ return t<.5?2*t*t:1-Math.pow(-2*t+2,2)/2; }],
['settle', function(t){ var c1=1.70158,c3=c1+1; return 1+c3*Math.pow(t-1,3)+c1*Math.pow(t-1,2); }],
['ease-in', function(t){ return t*t*t; }],
['ease-out', function(t){ return 1 - Math.pow(1-t,3); }],
['in-out', function(t){ return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2; }],
['back', function(t){ var c=1.70158; return 1+c*Math.pow(t-1,3)+c*Math.pow(t-1,2); }],
['bounce', function(t){ var n=7.5625,d=2.75; if(t<1/d)return n*t*t; if(t<2/d){t-=1.5/d;return n*t*t+.75;} if(t<2.5/d){t-=2.25/d;return n*t*t+.9375;} t-=2.625/d; return n*t*t+.984375; }],
['elastic', function(t){ var c=(2*Math.PI)/3; return t===0?0:t===1?1:Math.pow(2,-10*t)*Math.sin((t*10-0.75)*c)+1; }],
['expo-out', function(t){ return t===1?1:1-Math.pow(2,-10*t); }],
['circ-out', function(t){ return Math.sqrt(1-Math.pow(t-1,2)); }],
['quint-out', function(t){ return 1-Math.pow(1-t,5); }],
];
var body = document.body;
var dots = [];
CURVES.forEach(function(pair){
var row = document.createElement('div'); row.className = 'row';
var lbl = document.createElement('div'); lbl.className = 'lbl'; lbl.textContent = pair[0];
var track = document.createElement('div'); track.className = 'track';
var dot = document.createElement('div'); dot.className = 'dot';
track.appendChild(dot); row.appendChild(lbl); row.appendChild(track); body.appendChild(row);
dots.push([dot, pair[1]]);
});
function render(t){
var u = (t % 3) / 3;
dots.forEach(function(d){
var pos = Math.max(0, Math.min(1, d[1](u)));
d[0].style.left = 'calc(' + (pos * 100) + '% - 16px)';
});
}
addEventListener('hf-seek', function(e){ render(e.detail.time); });
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.