From 9be255febf218deb57ca15e44bde902b66c4694d Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Fri, 15 May 2026 13:55:50 -0700 Subject: [PATCH] feat(skills): dynamic transform-origin scales card toward viewport center Calculates offset from card center to viewport center and sets transform-origin so the zoom always converges on the middle of the screen regardless of card position. Co-Authored-By: Claude Opus 4.6 (1M context) --- skills/hyperframes/templates/template-picker.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/skills/hyperframes/templates/template-picker.html b/skills/hyperframes/templates/template-picker.html index d46d3c6317..60b2fc9781 100644 --- a/skills/hyperframes/templates/template-picker.html +++ b/skills/hyperframes/templates/template-picker.html @@ -585,7 +585,17 @@ function selectTemplate(slug) { var card = document.getElementById("card-" + slug); var overlay = document.getElementById("trans-overlay"); overlay.classList.add("active"); - if (card) card.classList.add("selected-exit"); + if (card) { + var rect = card.getBoundingClientRect(); + var cx = rect.left + rect.width / 2; + var cy = rect.top + rect.height / 2; + var vw = window.innerWidth; + var vh = window.innerHeight; + var ox = ((vw / 2 - cx) / rect.width * 100 + 50) + "%"; + var oy = ((vh / 2 - cy) / rect.height * 100 + 50) + "%"; + card.style.transformOrigin = ox + " " + oy; + card.classList.add("selected-exit"); + } setTimeout(function() { if (window.parent !== window) {