1:1 with 3D rotating card, orbiting label chips, beat contrast pump.
<!doctype html>
<!-- Example: instagram-square — 3D rotating card · label orbit · contrast pump on beat -->
<html data-duration="10" data-aspect="1:1"><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; }
html, body { height: 100%; }
body { background: var(--cream); color: var(--ink); font-family: ui-sans-serif, system-ui;
overflow: hidden; display: grid; grid-template-rows: 1fr auto; padding: 56px;
perspective: 1400px; }
.stage { display: grid; place-items: center; position: relative; }
.box { width: 400px; height: 400px; border-radius: 32px;
background: linear-gradient(135deg, var(--signal), var(--frame));
display: grid; place-items: center; color: white; font-weight: 800;
font-size: 112px; letter-spacing: -0.05em; transform-origin: center;
box-shadow: 0 40px 100px -30px rgba(255,59,31,.55),
inset 0 1px 0 rgba(255,255,255,.3);
transform-style: preserve-3d; will-change: transform, filter; }
.box::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,255,255,.45), transparent 55%);
pointer-events: none; }
.tags { position: absolute; inset: 0; pointer-events: none; }
.tag { position: absolute; left: 50%; top: 50%; padding: 9px 16px; background: white;
border: 1px solid var(--line); border-radius: 999px;
font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .15em;
transform-origin: 0 0; box-shadow: 0 10px 24px -16px rgba(0,0,0,.25);
will-change: transform, opacity; }
footer { display:flex; justify-content: space-between; align-items: center; padding-top: 18px;
font-family: ui-monospace, monospace; font-size: 15px; color: var(--mute); }
.cta { background: var(--ink); color: white; padding: 11px 18px; border-radius: 12px; }
</style></head><body>
<div class="stage">
<div class="box" id="b">HF</div>
<div class="tags" id="tg"></div>
</div>
<footer>
<div>hyperframes · v1.0</div>
<div class="cta">Try it →</div>
</footer>
<script>
var b = document.getElementById('b');
var tg = document.getElementById('tg');
var LABELS = ['composable', 'git-friendly', 'cli-first', 'deterministic', 'open source'];
var tags = LABELS.map(function(text, i) {
var el = document.createElement('div');
el.className = 'tag';
el.textContent = text;
tg.appendChild(el);
return el;
});
var BPM = 96;
var beat = 60 / BPM;
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 ? 4 : t;
var u = ease(Math.min(1, tt / 1.4));
// 3D rotation on Y and X — like a card turning to face the viewer.
var rx = (1 - u) * 18 + Math.sin(tt * 0.6) * 4;
var ry = (1 - u) * -36 + Math.cos(tt * 0.5) * 8;
var rz = (1 - u) * 12;
b.style.transform =
'scale(' + (0.5 + 0.5 * u).toFixed(3) + ') ' +
'rotateX(' + rx.toFixed(1) + 'deg) rotateY(' + ry.toFixed(1) + 'deg) rotateZ(' + rz.toFixed(1) + 'deg)';
// Contrast pump on beat.
var phase = (tt % beat) / beat;
var pump = 1 + Math.max(0, 0.18 - phase * 0.5);
b.style.filter = 'contrast(' + pump.toFixed(3) + ') saturate(' + pump.toFixed(3) + ')';
// Tags orbit the card on a 220px circle.
tags.forEach(function(el, i) {
var start = 0.6 + i * 0.2;
var tu = Math.max(0, Math.min(1, (tt - start) / 0.7));
var ang = (i / tags.length) * Math.PI * 2 + tt * 0.25;
var radius = 220 * tu;
var x = Math.cos(ang) * radius;
var y = Math.sin(ang) * radius;
el.style.opacity = String(tu);
el.style.transform =
'translate(-50%, -50%) translate(' + x.toFixed(1) + 'px, ' + y.toFixed(1) + 'px) ' +
'rotate(' + (ang * 180 / Math.PI + 90).toFixed(0) + 'deg)';
});
}
addEventListener('hf-seek', function(e) { t = e.detail.time; render(); });
render();
</script>
</body></html>