test: add animated visual smoke coverage

Author: ilyar

docs/visual-acceptance.md

@@ -9,6 +9,10 @@ The baseline covers:
 - mobile hero, team and contact viewport states;
 - real scroll/anchor positions rather than isolated components.
 
+There is also a non-baseline animation smoke test. It runs with reduced motion
+disabled and verifies that two captured hero frames differ, while keeping the
+approved screenshot baselines static and deterministic.
+
 Update the approved screenshots only when a visual change is intentional:
 
 ```bash

playwright.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
   projects: [
     {
       name: 'desktop',
+      testIgnore: /animation\.spec\.ts/,
       use: {
         ...devices['Desktop Chrome'],
         viewport: { width: 1440, height: 1100 },
@@ -29,12 +30,26 @@ export default defineConfig({
     },
     {
       name: 'mobile',
+      testIgnore: /animation\.spec\.ts/,
       use: {
         ...devices['Pixel 5'],
         viewport: { width: 390, height: 844 },
         deviceScaleFactor: 1,
         isMobile: true,
       },
     },
+    {
+      name: 'animation',
+      testMatch: /animation\.spec\.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1440, height: 1100 },
+        deviceScaleFactor: 1,
+        reducedMotion: 'no-preference',
+        launchOptions: {
+          args: ['--ignore-gpu-blocklist', '--use-gl=swiftshader'],
+        },
+      },
+    },
   ],
 });

tests/acceptance/animation.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+function imageDelta(a: Buffer, b: Buffer) {
+  if (a.length !== b.length) {
+    return 1;
+  }
+
+  let changed = 0;
+  for (let i = 0; i < a.length; i += 1) {
+    if (Math.abs(a[i] - b[i]) > 6) {
+      changed += 1;
+    }
+  }
+
+  return changed / a.length;
+}
+
+test.describe('animated design smoke', () => {
+  test('hero motion changes between captured frames', async ({ page }) => {
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+    await expect(page.getByRole('heading', { name: /Software that lasts/i })).toBeVisible();
+
+    await page.waitForTimeout(80);
+    const first = await page.screenshot({
+      clip: { x: 0, y: 0, width: 1440, height: 760 },
+      animations: 'allow',
+      caret: 'hide',
+    });
+
+    await page.waitForTimeout(520);
+    const second = await page.screenshot({
+      clip: { x: 0, y: 0, width: 1440, height: 760 },
+      animations: 'allow',
+      caret: 'hide',
+    });
+
+    expect(imageDelta(first, second), 'animated hero frame should change over time').toBeGreaterThan(0.001);
+  });
+});