ugly-app 0.1.621 → 0.1.622

package/dist/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const CLI_VERSION = "0.1.621";
+export declare const CLI_VERSION = "0.1.622";
 //# sourceMappingURL=version.d.ts.map

package/dist/cli/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.621";
+export const CLI_VERSION = "0.1.622";
 //# sourceMappingURL=version.js.map

package/dist/client/animation/useScrollAnimation.d.ts

@@ -15,7 +15,17 @@ export interface ScrollAnimationStyle {
     opacity: number;
     transform: string;
     transition?: string;
+    willChange?: string;
 }
+/**
+ * Reveal-on-scroll hook driven entirely by CSS transitions.
+ *
+ * The element renders ONCE in its hidden state and ONCE in its visible state;
+ * the GPU interpolates opacity/transform between them. There is no per-frame
+ * React re-render (the previous implementation ran a requestAnimationFrame loop
+ * that called forceUpdate() every frame, per instance — with several staggered
+ * items on screen that re-render storm caused the visible jank).
+ */
 export declare function useScrollAnimation<T extends HTMLElement = HTMLDivElement>(config?: ScrollAnimationConfig): {
     ref: import("react").RefObject<T | null>;
     style: ScrollAnimationStyle;

package/dist/client/animation/useScrollAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollAnimation.d.ts","sourceRoot":"","sources":["../../../src/client/animation/useScrollAnimation.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,WAAW,qBAAqB;IACpC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACvE,MAAM,GAAE,qBAA0B;;;;;EAiFnC;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,WAUW,MAAM,KAAG,qBAAqB,CAQzC"}
+{"version":3,"file":"useScrollAnimation.d.ts","sourceRoot":"","sources":["../../../src/client/animation/useScrollAnimation.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,WAAW,qBAAqB;IACpC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiCD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACvE,MAAM,GAAE,qBAA0B;;;;;EAoDnC;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,IASS,OAAO,MAAM,KAAG,qBAAqB,CAM9C"}

package/dist/client/animation/useScrollAnimation.js

@@ -1,82 +1,87 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
-import { easingFunctions, useAnimatedValue, useAnimatedValueTracker, } from './animatedValue.js';
+import { useEffect, useRef, useState } from 'react';
+// Smooth ease-out (no overshoot/bounce — the old springBouncy easing read as
+// "jerky" once many items animated at once). Compositor-friendly.
+const EASE = 'cubic-bezier(0.16, 1, 0.3, 1)';
+function hiddenTransform(animation) {
+    switch (animation) {
+        case 'slideUp':
+            return 'translateY(40px)';
+        case 'slideDown':
+            return 'translateY(-40px)';
+        case 'slideLeft':
+            return 'translateX(40px)';
+        case 'slideRight':
+            return 'translateX(-40px)';
+        case 'scale':
+            return 'scale(0.92)';
+        case 'fadeIn':
+        case 'none':
+        default:
+            return 'none';
+    }
+}
+function prefersReducedMotion() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+/**
+ * Reveal-on-scroll hook driven entirely by CSS transitions.
+ *
+ * The element renders ONCE in its hidden state and ONCE in its visible state;
+ * the GPU interpolates opacity/transform between them. There is no per-frame
+ * React re-render (the previous implementation ran a requestAnimationFrame loop
+ * that called forceUpdate() every frame, per instance — with several staggered
+ * items on screen that re-render storm caused the visible jank).
+ */
 export function useScrollAnimation(config = {}) {
-    const { animation = 'fadeIn', delay = 0, duration, threshold = 0.2, once = true, } = config;
+    const { animation = 'fadeIn', delay = 0, duration = 600, threshold = 0.2, once = true, } = config;
     const ref = useRef(null);
-    const [isVisible, setIsVisible] = useState(true);
-    const hasAnimated = useRef(false);
-    const animatedValue = useAnimatedValue(1);
-    const progress = useAnimatedValueTracker(animatedValue);
-    useLayoutEffect(() => {
-        const element = ref.current;
-        if (!element)
-            return;
-        const rect = element.getBoundingClientRect();
-        if (rect.top >= window.innerHeight) {
-            animatedValue.set(0);
-            setIsVisible(false);
-            hasAnimated.current = false;
-        }
-        else {
-            hasAnimated.current = true;
-        }
-    }, [animatedValue]);
+    const reduce = animation === 'none' || prefersReducedMotion();
+    // Hidden until revealed (unless there's nothing to animate).
+    const [visible, setVisible] = useState(reduce);
+    const hasAnimated = useRef(reduce);
     useEffect(() => {
+        if (reduce)
+            return;
         const element = ref.current;
         if (!element)
             return;
         const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
+            for (const entry of entries) {
                 if (entry.isIntersecting) {
-                    if (once && hasAnimated.current)
-                        return;
                     hasAnimated.current = true;
-                    setIsVisible(true);
-                    setTimeout(() => {
-                        void animatedValue.start(1, {
-                            duration,
-                            easing: easingFunctions.springBouncy,
-                        });
-                    }, delay);
+                    setVisible(true);
+                    if (once)
+                        observer.disconnect();
                 }
-                else if (!once) {
-                    setIsVisible(false);
-                    animatedValue.set(0);
+                else if (!once && !hasAnimated.current) {
+                    setVisible(false);
                 }
-            });
+            }
         }, { threshold });
         observer.observe(element);
         return () => observer.disconnect();
-    }, [animatedValue, delay, duration, once, threshold]);
-    const getStyle = useCallback(() => {
-        const p = progress;
-        switch (animation) {
-            case 'fadeIn':
-                return { opacity: p, transform: 'none' };
-            case 'slideUp':
-                return { opacity: p, transform: `translateY(${40 * (1 - p)}px)` };
-            case 'slideDown':
-                return { opacity: p, transform: `translateY(${-40 * (1 - p)}px)` };
-            case 'slideLeft':
-                return { opacity: p, transform: `translateX(${40 * (1 - p)}px)` };
-            case 'slideRight':
-                return { opacity: p, transform: `translateX(${-40 * (1 - p)}px)` };
-            case 'scale':
-                return { opacity: p, transform: `scale(${0.9 + 0.1 * p})` };
-            case 'none':
-            default:
-                return { opacity: 1, transform: 'none' };
-        }
-    }, [animation, progress]);
-    return { ref, style: getStyle(), isVisible, progress };
+    }, [reduce, once, threshold]);
+    const transitionDelay = delay > 0 ? ` ${delay}ms` : '';
+    const style = {
+        opacity: visible ? 1 : 0,
+        transform: visible ? 'none' : hiddenTransform(animation),
+        transition: reduce
+            ? undefined
+            : `opacity ${duration}ms ${EASE}${transitionDelay}, transform ${duration}ms ${EASE}${transitionDelay}`,
+        // GPU-hint only while waiting to animate in; drop it once shown.
+        willChange: visible ? undefined : 'opacity, transform',
+    };
+    return { ref, style, isVisible: visible, progress: visible ? 1 : 0 };
 }
 export function useStaggerAnimation(config) {
     const { baseDelay = 100, startDelay = 0, animation = 'slideUp', duration = 600, threshold = 0.2, } = config;
-    return useCallback((index) => ({
+    return (index) => ({
         animation,
         delay: startDelay + index * baseDelay,
         duration,
         threshold,
-    }), [animation, baseDelay, duration, startDelay, threshold]);
+    });
 }
 //# sourceMappingURL=useScrollAnimation.js.map

package/dist/client/animation/useScrollAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollAnimation.js","sourceRoot":"","sources":["../../../src/client/animation/useScrollAnimation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useScrollAnimation.js","sourceRoot":"","sources":["../../../src/client/animation/useScrollAnimation.ts"],"names":[],"mappings":"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"}

package/dist/client/components/ScrollAnimatedView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAnimatedView.d.ts","sourceRoot":"","sources":["../../../src/client/components/ScrollAnimatedView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,qBAAqB,EAEtB,MAAM,oCAAoC,CAAC;AAG5C,MAAM,WAAW,uBAAwB,SAAQ,qBAAqB;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,SAAoB,EACpB,KAAS,EACT,QAAQ,EACR,SAAe,EACf,IAAW,GACZ,EAAE,uBAAuB,qBA4BzB;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,QAAQ,EACR,SAAqB,EACrB,SAAe,EACf,UAAc,EACd,QAAQ,EACR,SAAe,EACf,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,qBAkBA"}
+{"version":3,"file":"ScrollAnimatedView.d.ts","sourceRoot":"","sources":["../../../src/client/components/ScrollAnimatedView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,qBAAqB,EAEtB,MAAM,oCAAoC,CAAC;AAG5C,MAAM,WAAW,uBAAwB,SAAQ,qBAAqB;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,SAAoB,EACpB,KAAS,EACT,QAAQ,EACR,SAAe,EACf,IAAW,GACZ,EAAE,uBAAuB,qBAyBzB;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,QAAQ,EACR,SAAqB,EACrB,SAAe,EACf,UAAc,EACd,QAAQ,EACR,SAAe,EACf,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,qBAkBA"}

package/dist/client/components/ScrollAnimatedView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useScrollAnimation, } from '../animation/useScrollAnimation.js';
 import { View } from './View.js';
 export function ScrollAnimatedView({ children, style, animation = 'fadeIn', delay = 0, duration, threshold = 0.2, once = true, }) {
-    const { ref, style: animationStyle, isVisible, } = useScrollAnimation({
+    const { ref, style: animationStyle } = useScrollAnimation({
         animation,
         delay,
         duration,
@@ -14,7 +14,8 @@ export function ScrollAnimatedView({ children, style, animation = 'fadeIn', dela
             ...Object(style),
             opacity: animationStyle.opacity,
             transform: animationStyle.transform,
-            willChange: isVisible ? 'auto' : 'opacity, transform',
+            transition: animationStyle.transition,
+            willChange: animationStyle.willChange,
             width: '100%',
             alignItems: 'center',
         }, children: children }));

package/dist/client/components/ScrollAnimatedView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAnimatedView.js","sourceRoot":"","sources":["../../../src/client/components/ScrollAnimatedView.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAOjC,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,KAAK,GAAG,CAAC,EACT,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,IAAI,GAAG,IAAI,GACa;IACxB,MAAM,EACJ,GAAG,EACH,KAAK,EAAE,cAAc,EACrB,SAAS,GACV,GAAG,kBAAkB,CAAC;QACrB,SAAS;QACT,KAAK;QACL,QAAQ;QACR,SAAS;QACT,IAAI;KACL,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,GAAG,EACZ,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,KAAK,CAAC;YAChB,OAAO,EAAE,cAAc,CAAC,OAAO;YAC/B,SAAS,EAAE,cAAc,CAAC,SAAS;YACnC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB;YACrD,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,QAAQ;SACrB,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,2BAA2B,CAAC,EAC1C,QAAQ,EACR,SAAS,GAAG,SAAS,EACrB,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,KAAK,GASN;IACC,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,YACf,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,kBAAkB,IAEjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,GAAG,KAAK,GAAG,SAAS,EACrC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,YAEnB,KAAK,IAND,KAAK,CAOS,CACtB,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ScrollAnimatedView.js","sourceRoot":"","sources":["../../../src/client/components/ScrollAnimatedView.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAOjC,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,KAAK,GAAG,CAAC,EACT,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,IAAI,GAAG,IAAI,GACa;IACxB,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,kBAAkB,CAAC;QACxD,SAAS;QACT,KAAK;QACL,QAAQ;QACR,SAAS;QACT,IAAI;KACL,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,GAAG,EACZ,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,KAAK,CAAC;YAChB,OAAO,EAAE,cAAc,CAAC,OAAO;YAC/B,SAAS,EAAE,cAAc,CAAC,SAAS;YACnC,UAAU,EAAE,cAAc,CAAC,UAAU;YACrC,UAAU,EAAE,cAAc,CAAC,UAAU;YACrC,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,QAAQ;SACrB,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,2BAA2B,CAAC,EAC1C,QAAQ,EACR,SAAS,GAAG,SAAS,EACrB,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,KAAK,GASN;IACC,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,YACf,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,kBAAkB,IAEjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,GAAG,KAAK,GAAG,SAAS,EACrC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,YAEnB,KAAK,IAND,KAAK,CAOS,CACtB,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-app",
-  "version": "0.1.621",
+  "version": "0.1.622",
   "type": "module",
   "comment:files": "Allowlist what ships to npm. dist = runtime; src = sourcemap targets (dist/*.js.map reference ../../src/); templates = CLI scaffold. Everything else at repo root (.pgdata local Postgres, coverage, assets/icons sources, test/, test-results/) is excluded by omission. The !negations strip the scaffold's installed deps + cruft (templates/node_modules is 200MB+ and must never ship). package.json/README/LICENSE ship automatically.",
   "files": [

package/src/cli/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.621";
+export const CLI_VERSION = "0.1.622";

package/src/client/animation/useScrollAnimation.ts

@@ -1,15 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  easingFunctions,
-  useAnimatedValue,
-  useAnimatedValueTracker,
-} from './animatedValue.js';
+import { useEffect, useRef, useState } from 'react';
 
 export type ScrollAnimationType =
   | 'fadeIn'
@@ -37,90 +26,102 @@ export interface ScrollAnimationStyle {
   opacity: number;
   transform: string;
   transition?: string;
+  willChange?: string;
 }
 
+// Smooth ease-out (no overshoot/bounce — the old springBouncy easing read as
+// "jerky" once many items animated at once). Compositor-friendly.
+const EASE = 'cubic-bezier(0.16, 1, 0.3, 1)';
+
+function hiddenTransform(animation: ScrollAnimationType): string {
+  switch (animation) {
+    case 'slideUp':
+      return 'translateY(40px)';
+    case 'slideDown':
+      return 'translateY(-40px)';
+    case 'slideLeft':
+      return 'translateX(40px)';
+    case 'slideRight':
+      return 'translateX(-40px)';
+    case 'scale':
+      return 'scale(0.92)';
+    case 'fadeIn':
+    case 'none':
+    default:
+      return 'none';
+  }
+}
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
+}
+
+/**
+ * Reveal-on-scroll hook driven entirely by CSS transitions.
+ *
+ * The element renders ONCE in its hidden state and ONCE in its visible state;
+ * the GPU interpolates opacity/transform between them. There is no per-frame
+ * React re-render (the previous implementation ran a requestAnimationFrame loop
+ * that called forceUpdate() every frame, per instance — with several staggered
+ * items on screen that re-render storm caused the visible jank).
+ */
 export function useScrollAnimation<T extends HTMLElement = HTMLDivElement>(
   config: ScrollAnimationConfig = {},
 ) {
   const {
     animation = 'fadeIn',
     delay = 0,
-    duration,
+    duration = 600,
     threshold = 0.2,
     once = true,
   } = config;
 
   const ref = useRef<T>(null);
-  const [isVisible, setIsVisible] = useState(true);
-  const hasAnimated = useRef(false);
-  const animatedValue = useAnimatedValue(1);
-  const progress = useAnimatedValueTracker(animatedValue);
-
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    const rect = element.getBoundingClientRect();
-    if (rect.top >= window.innerHeight) {
-      animatedValue.set(0);
-      setIsVisible(false);
-      hasAnimated.current = false;
-    } else {
-      hasAnimated.current = true;
-    }
-  }, [animatedValue]);
+  const reduce = animation === 'none' || prefersReducedMotion();
+  // Hidden until revealed (unless there's nothing to animate).
+  const [visible, setVisible] = useState(reduce);
+  const hasAnimated = useRef(reduce);
 
   useEffect(() => {
+    if (reduce) return;
     const element = ref.current;
     if (!element) return;
 
     const observer = new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
+        for (const entry of entries) {
           if (entry.isIntersecting) {
-            if (once && hasAnimated.current) return;
             hasAnimated.current = true;
-            setIsVisible(true);
-            setTimeout(() => {
-              void animatedValue.start(1, {
-                duration,
-                easing: easingFunctions.springBouncy,
-              });
-            }, delay);
-          } else if (!once) {
-            setIsVisible(false);
-            animatedValue.set(0);
+            setVisible(true);
+            if (once) observer.disconnect();
+          } else if (!once && !hasAnimated.current) {
+            setVisible(false);
           }
-        });
+        }
       },
       { threshold },
     );
 
     observer.observe(element);
     return () => observer.disconnect();
-  }, [animatedValue, delay, duration, once, threshold]);
+  }, [reduce, once, threshold]);
 
-  const getStyle = useCallback((): ScrollAnimationStyle => {
-    const p = progress;
-    switch (animation) {
-      case 'fadeIn':
-        return { opacity: p, transform: 'none' };
-      case 'slideUp':
-        return { opacity: p, transform: `translateY(${40 * (1 - p)}px)` };
-      case 'slideDown':
-        return { opacity: p, transform: `translateY(${-40 * (1 - p)}px)` };
-      case 'slideLeft':
-        return { opacity: p, transform: `translateX(${40 * (1 - p)}px)` };
-      case 'slideRight':
-        return { opacity: p, transform: `translateX(${-40 * (1 - p)}px)` };
-      case 'scale':
-        return { opacity: p, transform: `scale(${0.9 + 0.1 * p})` };
-      case 'none':
-      default:
-        return { opacity: 1, transform: 'none' };
-    }
-  }, [animation, progress]);
+  const transitionDelay = delay > 0 ? ` ${delay}ms` : '';
+  const style: ScrollAnimationStyle = {
+    opacity: visible ? 1 : 0,
+    transform: visible ? 'none' : hiddenTransform(animation),
+    transition: reduce
+      ? undefined
+      : `opacity ${duration}ms ${EASE}${transitionDelay}, transform ${duration}ms ${EASE}${transitionDelay}`,
+    // GPU-hint only while waiting to animate in; drop it once shown.
+    willChange: visible ? undefined : 'opacity, transform',
+  };
 
-  return { ref, style: getStyle(), isVisible, progress };
+  return { ref, style, isVisible: visible, progress: visible ? 1 : 0 };
 }
 
 export function useStaggerAnimation(config: {
@@ -138,13 +139,10 @@ export function useStaggerAnimation(config: {
     threshold = 0.2,
   } = config;
 
-  return useCallback(
-    (index: number): ScrollAnimationConfig => ({
-      animation,
-      delay: startDelay + index * baseDelay,
-      duration,
-      threshold,
-    }),
-    [animation, baseDelay, duration, startDelay, threshold],
-  );
+  return (index: number): ScrollAnimationConfig => ({
+    animation,
+    delay: startDelay + index * baseDelay,
+    duration,
+    threshold,
+  });
 }

package/src/client/components/ScrollAnimatedView.tsx

@@ -19,11 +19,7 @@ export function ScrollAnimatedView({
   threshold = 0.2,
   once = true,
 }: ScrollAnimatedViewProps) {
-  const {
-    ref,
-    style: animationStyle,
-    isVisible,
-  } = useScrollAnimation({
+  const { ref, style: animationStyle } = useScrollAnimation({
     animation,
     delay,
     duration,
@@ -38,7 +34,8 @@ export function ScrollAnimatedView({
         ...Object(style),
         opacity: animationStyle.opacity,
         transform: animationStyle.transform,
-        willChange: isVisible ? 'auto' : 'opacity, transform',
+        transition: animationStyle.transition,
+        willChange: animationStyle.willChange,
         width: '100%',
         alignItems: 'center',
       }}