wip: foto da pasta principal antes de trocar de branch

Estado do disco em 14/10/2026, sem filtrar. Inclui as copias .sync-conflict-* do Syncthing de 07/10 e os 15 arquivos que o Syncthing apagou; todo esse conteudo ja existia em outros commits. So havia fora do Git: AGENTS.md, CLAUDE.md e a alteracao em data/project-health.json.

app/components/animations/TextDiffuseReveal.reducedMotion.test.sync-conflict-20261007-222936-5YVN6QV.tsx

@@ -0,0 +1,81 @@
+import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+import { TextDiffuseReveal } from "./TextDiffuseReveal";
+
+let mockReducedMotion = false;
+let mockInView = true;
+let mockAnimations: Array<{ animate?: Record<string, unknown> }> = [];
+jest.mock("motion/react", () => {
+  const React = require("react");
+
+  return {
+    motion: {
+      span: ({
+        children,
+        initial: _initial,
+        animate,
+        transition: _transition,
+        onAnimationComplete: _onAnimationComplete,
+        ...props
+      }: {
+        children?: ReactNode;
+        initial?: unknown;
+        animate?: Record<string, unknown>;
+        transition?: unknown;
+        onAnimationComplete?: () => void;
+      } & Record<string, unknown>) => {
+        mockAnimations.push({ animate });
+        return React.createElement("span", props, children);
+      },
+    },
+    useInView: () => mockInView,
+    useReducedMotion: () => mockReducedMotion,
+  };
+});
+
+describe("TextDiffuseReveal reduced motion", () => {
+  beforeEach(() => {
+    mockReducedMotion = false;
+    mockInView = true;
+    mockAnimations = [];
+  });
+
+  it("clears blur and scale when reduced motion resolves after mount", () => {
+    const { rerender } = render(<TextDiffuseReveal text="Reveal" />);
+
+    mockAnimations = [];
+    mockReducedMotion = true;
+    rerender(<TextDiffuseReveal text="Reveal" />);
+
+    expect(mockAnimations).toHaveLength(6);
+    expect(mockAnimations).toEqual(
+      expect.arrayContaining(
+        Array.from({ length: 6 }, () =>
+          expect.objectContaining({
+            animate: {
+              opacity: 1,
+              filter: "blur(0px)",
+              scale: 1,
+            },
+          }),
+        ),
+      ),
+    );
+  });
+
+  it("keeps the first render independent of the reduced-motion preference", () => {
+    mockReducedMotion = true;
+    mockInView = false;
+
+    render(<TextDiffuseReveal text="Reveal" />);
+
+    expect(mockAnimations[0]).toEqual({
+      animate: {
+        filter: "blur(12px)",
+        opacity: 0,
+        scale: 0.9,
+      },
+    });
+  });
+});

app/components/animations/TextDiffuseReveal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useInView } from "motion/react";
-import { type CSSProperties, useRef } from "react";
+import { motion, useInView } from "motion/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface TextDiffuseRevealProps {
   text: string;
@@ -11,12 +12,8 @@ interface TextDiffuseRevealProps {
   amount?: number;
 }
 
-/**
- * Título que entra palavra por palavra. A animação é CSS (.text-reveal em globals.css) com transparência
- * e deslocamento: a placa de vídeo compõe sem redesenhar. A versão anterior animava cada letra com
- * desfoque e renderizava o React de novo a cada letra, o que pesava justamente durante as transições.
- * Movimento reduzido: o CSS mostra o texto direto, sem animação.
- */
+const EXPO_OUT = [0.16, 1, 0.3, 1] as const;
+
 export function TextDiffuseReveal({
   text,
   className = "",
@@ -25,35 +22,111 @@ export function TextDiffuseReveal({
   amount = 0.3,
 }: Readonly<TextDiffuseRevealProps>) {
   const ref = useRef<HTMLSpanElement | null>(null);
+  const shouldReduceMotion = useReducedMotion();
   const isInView = useInView(ref, { once, amount });
-  let word = 0;
+  const [staggerDelay, setStaggerDelay] = useState(0.03);
+  const [completedChars, setCompletedChars] = useState(0);
+
+  useEffect(() => {
+    const media = window.matchMedia("(max-width: 768px)");
+    const updateStagger = () => setStaggerDelay(media.matches ? 0.015 : 0.03);
+
+    updateStagger();
+    media.addEventListener("change", updateStagger);
+    return () => media.removeEventListener("change", updateStagger);
+  }, []);
+
+  const tokens = useMemo(() => {
+    let offset = 0;
+    return text
+      .split(/(\n|\s+)/)
+      .filter(Boolean)
+      .map((value) => {
+        const key = `${offset}:${value}`;
+        offset += value.length;
+        return { key, value };
+      });
+  }, [text]);
+  const animatedChars = useMemo(
+    () =>
+      Array.from(text).filter((char) => char !== "\n" && char !== " ").length,
+    [text],
+  );
+
+  useEffect(() => {
+    if (!isInView) {
+      setCompletedChars(0);
+    }
+  }, [isInView]);
+
+  const hasActiveWillChange =
+    !shouldReduceMotion && isInView && completedChars < animatedChars;
+
+  let animatedIndex = 0;
 
   return (
     <span
       ref={ref}
-      className={`text-reveal ${className}`.trim()}
-      data-shown={isInView ? "" : undefined}
-      style={{ "--d": `${startDelay}s` } as CSSProperties}
+      className={className}
+      style={{
+        willChange: hasActiveWillChange
+          ? "filter, opacity, transform"
+          : undefined,
+      }}
     >
       <span className="sr-only">{text}</span>
       <span aria-hidden="true">
-        {text
-          .split(/(\n|\s+)/)
-          .filter(Boolean)
-          .map((token, index) => {
-            const key = `${index}:${token}`;
-            if (token === "\n") return <br key={key} />;
-            if (/^\s+$/.test(token)) return " ";
-            return (
-              <span
-                key={key}
-                className="text-reveal-word"
-                style={{ "--i": word++ } as CSSProperties}
-              >
-                {token}
-              </span>
-            );
-          })}
+        {tokens.map(({ key, value: token }) => {
+          if (token === "\n") {
+            return <br key={key} />;
+          }
+
+          if (/^\s+$/.test(token)) {
+            return <span key={key}>{token.replace(/ /g, "\u00A0")}</span>;
+          }
+
+          return (
+            <span key={key} className="inline-block whitespace-nowrap">
+              {Array.from(token).map((char) => {
+                const currentIndex = animatedIndex;
+                animatedIndex += 1;
+
+                return (
+                  <motion.span
+                    key={`${key}-${currentIndex}-${char}`}
+                    className="inline-block"
+                    initial={
+                      shouldReduceMotion
+                        ? { opacity: 0 }
+                        : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
+                    }
+                    animate={
+                      isInView
+                        ? { filter: "blur(0px)", opacity: 1, scale: 1 }
+                        : shouldReduceMotion
+                          ? { filter: "blur(0px)", opacity: 0, scale: 1 }
+                          : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
+                    }
+                    transition={{
+                      duration: shouldReduceMotion ? 0.3 : 0.6,
+                      ease: EXPO_OUT,
+                      delay: startDelay + currentIndex * staggerDelay,
+                    }}
+                    onAnimationComplete={() => {
+                      if (!shouldReduceMotion) {
+                        setCompletedChars((count) =>
+                          count < animatedChars ? count + 1 : count,
+                        );
+                      }
+                    }}
+                  >
+                    {char}
+                  </motion.span>
+                );
+              })}
+            </span>
+          );
+        })}
       </span>
     </span>
   );