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) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-05-15 13:55:50 -07:00
co-authored by Claude Opus 4.6
parent a459408954
commit 9be255febf
@@ -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) {