Perspective-tilted card with specular highlight and stroke trim.
<!doctype html>
<!-- Example: conic-shader — perspective card · matrix3d tilt · specular sweep · stroke trim -->
<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: #06060c; height: 100vh; overflow: hidden;
display: grid; place-items: center; font-family: ui-sans-serif, system-ui; color: white;
perspective: 1400px; }
.card { position: relative; width: 520px; height: 320px;
transform-style: preserve-3d;
border-radius: 24px;
background: conic-gradient(from 0deg,
var(--signal), var(--frame), var(--blue), var(--green), var(--signal));
box-shadow: 0 80px 160px -40px rgba(255,59,31,.55),
inset 0 1px 0 rgba(255,255,255,.5);
overflow: hidden; }
.spec { position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 80% at var(--sx, 50%) var(--sy, 30%),
rgba(255,255,255,.55), transparent 55%);
mix-blend-mode: screen; pointer-events: none; }
.outline { position: absolute; inset: 8px;
border-radius: 18px; pointer-events: none; }
.outline svg { width: 100%; height: 100%; }
.outline rect { fill: none; stroke: white; stroke-width: 2;
stroke-dasharray: 1320; stroke-dashoffset: 1320;
filter: drop-shadow(0 0 4px white); }
.label { position: absolute; left: 24px; top: 22px;
font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .25em;
color: white; mix-blend-mode: difference; }
.tag { position: absolute; right: 24px; bottom: 22px;
font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .25em;
color: white; mix-blend-mode: difference; }
</style></head><body>
<div class="card" id="c">
<div class="label">● CONIC · SHADER</div>
<div class="spec" id="sp"></div>
<div class="outline"><svg viewBox="0 0 504 304"><rect id="rc" x="2" y="2" width="500" height="300" rx="18"/></svg></div>
<div class="tag">v1.0 · brand</div>
</div>
<script>
var c = document.getElementById('c');
var sp = document.getElementById('sp');
var rc = document.getElementById('rc');
var t = 0;
var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function render() {
var tt = reduced ? 0 : t;
// Rotate the conic gradient via background reset.
var ang = (tt * 50) % 360;
c.style.background =
'conic-gradient(from ' + ang + 'deg, var(--signal), var(--frame), var(--blue), var(--green), var(--signal))';
// matrix3d tilt: subtle wobble in 3D.
var rx = Math.sin(tt * 0.7) * 14;
var ry = Math.cos(tt * 0.8) * 18;
c.style.transform = 'rotateX(' + rx.toFixed(1) + 'deg) rotateY(' + ry.toFixed(1) + 'deg)';
// Specular highlight tracks the inverse tilt.
var sx = 50 - ry * 1.6;
var sy = 30 + rx * 1.6;
sp.style.setProperty('--sx', sx.toFixed(1) + '%');
sp.style.setProperty('--sy', sy.toFixed(1) + '%');
// Stroke-trim of the inner outline cycles continuously.
var trim = (Math.sin(tt * 1.1) + 1) / 2;
rc.setAttribute('stroke-dashoffset', String(1320 * trim));
}
addEventListener('hf-seek', function(e) { t = e.detail.time; render(); });
render();
</script>
</body></html>