A Complete Reveal Choreography System

What this builds

A page-level reveal plan where every section has a deliberate entrance choreography chosen to match the content type, with a scheduler that prevents two reveals from fighting each other. This is not a single technique; it is the system that decides which technique each section gets, staggers them so the page reads as one coherent composition, and enforces variety so no two adjacent sections use the same motion.

• A content-type-to-reveal mapping that assigns motion based on what the content IS (hero, text block, card grid, stats, image, testimonial), not a blanket data attribute
• A reveal scheduler that tracks which sections are animating and delays or shortens overlapping reveals
• 8 distinct reveal types: clip-reveal, slide-up, slide-in-left, slide-in-right, scale-fade, draw-on (for rules/borders), counter-roll, and stagger-cascade
• Per-section IntersectionObserver with tuned rootMargin per reveal type
• Group-aware stagger that orchestrates children within a section as one unit
• A "no two adjacent sections use the same reveal" rule enforced at the plan level
• prefers-reduced-motion: all content visible instantly, zero animation

When to use / when not to

• Use when building a marketing page, product page, or portfolio with 5-15 distinct sections and you want the page to feel choreographed, not random.
• Use when you catch yourself applying the same data-aos="fade-up" to every element and the result looks AI-generated.
• Do NOT use for infinite feeds. See scroll-infinite-feed-motion instead.
• Do NOT use for scroll-scrubbed effects (parallax, pinned sequences). This is for entrance reveals -- things that animate once as they scroll into view. For scrubbed animation, see gsap-scrolltrigger or css-scroll-driven-animations.
• For the IntersectionObserver primitives and single-technique recipes, see primitive scroll-reveal-choreography. This toolkit builds the SYSTEM on top of those primitives.