Merge branch 'main' into fix-issue-1983

Author: Aamod007

lib/svg/animations.test.ts

@@ -30,6 +30,22 @@ describe('getTowerAnimationCSS', () => {
     expect(css).not.toContain('@keyframes');
   });
 
+  it('scales transform-origin for rise animation when scale factor is provided', () => {
+    const cssScale045 = getTowerAnimationCSS('rise', 0.45);
+    expect(cssScale045).toContain('transform-origin: 0 4.5px');
+
+    const cssScale08 = getTowerAnimationCSS('rise', 0.8);
+    expect(cssScale08).toContain('transform-origin: 0 8px');
+  });
+
+  it('scales translateY translation for slide animation when scale factor is provided', () => {
+    const cssScale045 = getTowerAnimationCSS('slide', 0.45);
+    expect(cssScale045).toContain('transform: translateY(-9px)');
+
+    const cssScale08 = getTowerAnimationCSS('slide', 0.8);
+    expect(cssScale08).toContain('transform: translateY(-16px)');
+  });
+
   it('includes accessibility support for prefers-reduced-motion', () => {
     const css = getTowerAnimationCSS('rise');
     expect(css).toContain('prefers-reduced-motion');

lib/svg/animations.ts

@@ -21,7 +21,8 @@
 const TOWER_BASE_Y = 10;
 
 export function getTowerAnimationCSS(
-  entrance: 'rise' | 'fade' | 'slide' | 'none' = 'rise'
+  entrance: 'rise' | 'fade' | 'slide' | 'none' = 'rise',
+  scale = 1.0
 ): string {
   if (entrance === 'none') {
     return `
@@ -33,9 +34,10 @@ export function getTowerAnimationCSS(
   let keyframes = '';
 
   if (entrance === 'rise') {
+    const baseY = Math.round(TOWER_BASE_Y * scale * 100) / 100;
     baseStyles = `
       transform: scaleY(0);
-      transform-origin: 0 ${TOWER_BASE_Y}px;
+      transform-origin: 0 ${baseY}px;
       animation: grow-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     `;
     keyframes = `
@@ -56,14 +58,15 @@ export function getTowerAnimationCSS(
       }
     `;
   } else if (entrance === 'slide') {
+    const slideOffset = Math.round(-20 * scale * 100) / 100;
     baseStyles = `
       opacity: 0;
-      transform: translateY(-20px);
+      transform: translateY(${slideOffset}px);
       animation: slide-down 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     `;
     keyframes = `
       @keyframes slide-down {
-        from { opacity: 0; transform: translateY(-20px); }
+        from { opacity: 0; transform: translateY(${slideOffset}px); }
         to   { opacity: 1; transform: translateY(0); }
       }
     `;

lib/svg/generator.ts

@@ -221,7 +221,7 @@ function renderStyle(
   <style>
   @import url('https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=JetBrains+Mono&amp;family=Roboto&amp;family=Syncopate:wght@400;700&amp;family=Space+Grotesk:wght@400;500;600;700&amp;display=swap');
   ${googleFontsImport}
-  ${getTowerAnimationCSS(entrance)}
+  ${getTowerAnimationCSS(entrance, sf)}
   .scan-line {
     animation: scan-sweep var(--scan-speed, 8s) linear infinite;
     transform-box: fill-box;
@@ -617,7 +617,7 @@ function generateAutoThemeSVG(
   :root { --cp-bg: #${light.bg}; --cp-text: #${light.text}; --cp-accent: #${light.accent}; --cp-label-fill: ${lightLabelFill}; --cp-label-opacity: ${lightLabelOpacity}; }
   @media (prefers-color-scheme: dark) { :root { --cp-bg: #${dark.bg}; --cp-text: #${dark.text}; --cp-accent: #${dark.accent}; --cp-label-fill: ${darkLabelFill}; --cp-label-opacity: ${darkLabelOpacity}; } }
   .cp-bg-fill { fill: var(--cp-bg); } .cp-text-fill { fill: var(--cp-text); color: var(--cp-text); } .cp-accent-fill { fill: var(--cp-accent); color: var(--cp-accent); }
-  ${getTowerAnimationCSS(params.entrance || 'rise')}
+  ${getTowerAnimationCSS(params.entrance || 'rise', sf)}
   .scan-line {
     animation: scan-sweep var(--scan-speed, 8s) linear infinite;
     transform-box: fill-box;
@@ -2014,7 +2014,7 @@ function generateAutoThemeVersusSVG(
   :root { --cp-bg: #${light.bg}; --cp-text: #${light.text}; --cp-accent: #${light.accent}; --cp-label-fill: ${lightLabelFill}; --cp-label-opacity: ${lightLabelOpacity}; }
   @media (prefers-color-scheme: dark) { :root { --cp-bg: #${dark.bg}; --cp-text: #${dark.text}; --cp-accent: #${dark.accent}; --cp-label-fill: ${darkLabelFill}; --cp-label-opacity: ${darkLabelOpacity}; } }
   .cp-bg-fill { fill: var(--cp-bg); } .cp-text-fill { fill: var(--cp-text); color: var(--cp-text); } .cp-accent-fill { fill: var(--cp-accent); color: var(--cp-accent); }
-  ${getTowerAnimationCSS(params.entrance || 'rise')}
+  ${getTowerAnimationCSS(params.entrance || 'rise', sf)}
   .scan-line {
     animation: scan-sweep var(--scan-speed, 8s) linear infinite;
     transform-box: fill-box;