From 52e6adc9953df14c97b08685e9cf97d005246e09 Mon Sep 17 00:00:00 2001
From: Corey Johnson <probablycorey@gmail.com>
Date: Tue, 6 Jan 2026 13:41:29 -0800
Subject: [PATCH] fix: scale background-position in keyframes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The animation was broken because keyframes used unscaled
pixel values while the background-size was scaled.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/dev/app.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/dev/app.tsx b/src/dev/app.tsx
index 86e4601..d2135ba 100644
--- a/src/dev/app.tsx
+++ b/src/dev/app.tsx
@@ -41,14 +41,14 @@ const App = () => {
     for (let i = 0; i < frames; i++) {
       const col = i % columns!
       const row = Math.floor(i / columns!)
-      const x = -col * width
-      const y = -row * height
+      const x = -col * width * scale
+      const y = -row * height * scale
       const percent = (i / frames) * 100
       steps.push(`${percent}%{background-position:${x}px ${y}px}`)
     }
     keyframes = `@keyframes ${keyframeId}{${steps.join("")}}`
   } else {
-    keyframes = `@keyframes ${keyframeId}{from{background-position:0 0}to{background-position:-${sheetWidth}px 0}}`
+    keyframes = `@keyframes ${keyframeId}{from{background-position:0 0}to{background-position:-${sheetWidth * scale}px 0}}`
   }
 
   const previewStyle = {