Act as a senior front-end engineer with a motion design eye. Add scroll reveals to {{page_or_feature}} in my {{tech_stack}} project, in this style: {{visual_style}}. Read the existing components and any animation library first, and tell me what already animates. What moves and why: a reveal marks where a new group of content starts. Apply it to section headings with their content block, card grids and large images. Never to body paragraphs one by one, navigation, or anything in the first screen, which must be visible on load. Values: - Opacity 0 to 1 and translateY 12px to 0, 450ms, ease-out cubic-bezier(0.2, 0, 0, 1) - Trigger once when 15% of the element is visible, with one shared IntersectionObserver, then stop observing it - Stagger siblings by 60ms, capped at 5 items; item 6 onward appears with item 5 - Only transform and opacity, so nothing shifts layout Safety: - Content is visible by default; the hidden starting state is added only once JavaScript runs, so no-JS visitors, crawlers and print see everything - Jumping to an anchor or using find-in-page reveals everything above the target at once - If the observer never fires, content appears after 1 second anyway - Under prefers-reduced-motion: reduce, no movement: content shows instantly, or with a 150ms fade at most Performance budget: no scroll event listeners, no new library if CSS and the observer can do it, no long tasks from reveal code, and layout shift unchanged. Avoid: fade-up on every section, slide-ins from the side, blur-in, scale-in, and reveals that replay each time you scroll back. Finish with the elements that reveal and why, the elements you deliberately left still, and the files changed.