Glassmorphism card stack with hue-rotate and inner gauge needle.
<!doctype html>
<!-- Example: dial-gauge — glassmorphism card stack + hue rotate + inner gauge needle -->
<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:
radial-gradient(circle at 20% 20%, rgba(255,59,31,.4), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43,102,255,.35), transparent 55%),
#0e0e14;
color: var(--cream); height: 100vh;
display: grid; place-items: center; font-family: ui-monospace, monospace;
overflow: hidden; }
.stack { position: relative; width: 540px; height: 380px; }
.card { position: absolute; inset: 0;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
border-radius: 22px;
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
padding: 28px;
box-shadow: 0 30px 70px -30px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.18); }
.c1 { transform: translate(-26px, -22px) rotate(-2deg); mix-blend-mode: screen; }
.c2 { transform: translate(0, 0) rotate(0deg); }
.c3 { transform: translate(26px, 22px) rotate(2deg); mix-blend-mode: lighten; opacity: .85; }
.lbl { font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.7);
text-transform: uppercase; }
.v { font-size: 76px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; }
.v em { color: var(--frame); font-style: normal; font-size: 22px; }
.gauge { position: absolute; right: 28px; top: 28px; width: 96px; height: 96px; }
.track { stroke: rgba(255,255,255,.15); fill: none; stroke-width: 8; }
.bar { stroke: var(--signal); fill: none; stroke-width: 8; stroke-linecap: round;
transform: rotate(-90deg); transform-origin: 48px 48px; }
.needle { stroke: white; stroke-width: 2; stroke-linecap: round;
transform-origin: 48px 48px; }
.meta { position: absolute; left: 28px; bottom: 24px;
font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.6); }
</style></head><body>
<div class="stack">
<div class="card c1"></div>
<div class="card c3"></div>
<div class="card c2" id="main">
<div class="lbl">↑ ENCODE PROGRESS</div>
<div class="v"><span id="pct">0</span><em>%</em></div>
<svg class="gauge" viewBox="0 0 96 96">
<circle class="track" cx="48" cy="48" r="40"/>
<circle id="bar" class="bar" cx="48" cy="48" r="40"
stroke-dasharray="251.3" stroke-dashoffset="251.3"/>
<line id="ndl" class="needle" x1="48" y1="48" x2="48" y2="14"/>
</svg>
<div class="meta">2,340 / 2,400 frames muxed · h264 · crf 18</div>
</div>
</div>
<script>
var bar = document.getElementById('bar');
var pct = document.getElementById('pct');
var ndl = document.getElementById('ndl');
var main = document.getElementById('main');
var C = 2 * Math.PI * 40;
var t = 0;
var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function ease(x){ return 1 - Math.pow(1 - x, 2); }
function render() {
var u = reduced ? 0.6 : ease(Math.min(1, t / 4.5));
bar.setAttribute('stroke-dashoffset', C * (1 - u));
pct.textContent = Math.round(u * 100);
ndl.setAttribute('transform', 'rotate(' + (u * 270 - 0).toFixed(1) + ' 48 48)');
// Hue rotate the whole card hub as progress climbs.
var hue = u * 30;
main.style.filter = 'hue-rotate(' + hue + 'deg)';
}
addEventListener('hf-seek', function(e) { t = e.detail.time; render(); });
render();
</script>
</body></html>