What problem does it solve? Scroll reveal animations on server-rendered or statically exported Next.js sites often break in subtle ways: hydration mismatches from branching on the OS reduced-motion preference, invisible text when MotionConfig disables transforms, and clipped layouts from overflow-hidden wrappers. This Skill provides a proven pattern that avoids all four failure modes. ## Core Features & Use Cases - Scroll-linked reveals: Ties animation progress to element scroll position via useScroll and useTransform, so content can never be stranded off-screen and no reduced-motion branch is needed. - Deterministic load animations: Gives above-the-fold content a fixed initial/animate state instead of OS-preference branching, eliminating hydration mismatches. - Safe overflow handling: Uses overflow-x: clip instead of overflow-hidden so horizontal reveals do not break position: sticky scroll scenes. - Use Case: When building a marketing site with Next.js App Router and static export, apply this pattern to add fade/slide-in reveals and mask-rise headings without triggering dev-only hydration warnings or hiding text for reduced-motion users. ## Quick Start Apply the safe-scroll-reveal pattern to add scroll-linked entrance animations to my Next.js static export site.
