# Scroll Reveal (Moonarc) Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation. Server HTML stays readable without JavaScript. - Import: `import Reveal from '@moonarc/core/Reveal'` - Install: `npx astro add moonarc` · copy-paste: `npx shadcn@latest add https://moonarc.dev/r/reveal.json` - Tier B · category scroll · trigger scroll - Readout: `` - Browser support: widely (every browser); elsewhere: scrub uses animation-timeline: view() where it exists and, everywhere else, a scroll listener that measures the same entry range; from="clip" wipes with mask-size (Chrome 120, Firefox 53, Safari 15.4) and simply appears before that - Measured cost: 1.3 kB raw JS · 718 B gzip · + runtime (with dependencies 3.0 kB raw; CSS 6.7 kB raw) - Page: https://moonarc.dev/components/reveal/ ## Props | Prop | Type | Default | Description | |---|---|---|---| | `as` | `HTMLTag` | `'div'` | Element to render. | | `from` | `'bottom' | 'top' | 'left' | 'right' | 'clip' | 'none'` | `'bottom'` | Where the element travels from. clip wipes the element open from its bottom edge (fully painted, no fade, no travel); none fades only. | | `distance` | `number` | `preset (ui: 24)` | Travel distance in px. Unset, it follows the preset's --ma-travel-enter from whichever side it travels; set, it pins this instance. | | `scale` | `number` | none | Scale to grow from, e.g. 0.96. Never below 0.9. | | `blur` | `number` | none | Blur in px to sharpen from. Costly on large elements; keep under 8. | | `duration` | `number` | `preset (ui: 450)` | Duration in ms. Unset, it follows the active preset (data-ma-preset). | | `delay` | `number` | `0` | Delay in ms. | | `easing` | `string` | `preset curve` | Any CSS easing. Unset, it is the preset's sampled spring. | | `stagger` | `number | true` | none | Interval in ms between direct children; the preset's --ma-stagger when set without a value. When set, the children animate instead of the wrapper. 30–80 ms reads well. | | `once` | `boolean` | `true` | Play once and stay. false re-plays on every entry, leaving quickly and without stagger. | | `threshold` | `number` | `0.2` | Fraction of the element that must be visible to trigger; for an element taller than the viewport, that fraction of the viewport's height. | | `rootMargin` | `string` | `'0px 0px -10% 0px'` | IntersectionObserver rootMargin; the default waits until the element is 10% into the viewport. | | `scrub` | `boolean` | `false` | Scroll-linked: progress follows entry into the viewport. Uses animation-timeline: view() where supported; elsewhere a scroll listener measures the same entry range, so a tall element still reaches full and stays full as it leaves. | ## Usage ```astro

Appears once, stays.

one

two

three

``` ## Reduced motion Keeps a fast opacity fade, drops translate, scale, blur and stagger. Scrub becomes static. ## With ClientRouter Binds through the shared runtime: every instance on the new page is observed after each navigation, observers are disconnected before the swap, and the html[data-ma-js] gate is restored so nothing flashes. A once-reveal persisted across the swap (transition:persist) keeps its revealed state instead of being observed again. ## Craft - Curve, duration, travel and stagger resolve from the active preset, so one attribute on retunes every reveal on the page; a prop pins one instance. - 24 px of travel is visible without reading as a slide; scale never below 0.9. - Stagger 30–80 ms; cap the group: ten items at 60 ms is 600 ms of waiting. - Leaving (once=false) is fast and unstaggered so re-entry never fights the reader. - Hidden state is gated on html[data-ma-js]; without JS the server HTML is the end state. - from="clip" is a wipe, not a fade: the element is painted in full and a mask grows from its bottom edge to full height on the same preset curve. An image or a card appears as if uncovered. It is a mask rather than clip-path because Chromium's IntersectionObserver applies the target's clip-path: an element clipped to nothing never intersects, so it would never reveal. ## Replaces - AOS - AnimatedContent (React Bits) - FadeContent (React Bits) - ScrollReveal (React Bits) - BlurText (React Bits) - motion.div whileInView ## Source ```astro --- /** * Reveal — scroll-triggered entrance that survives . * * Play once and stay (or replay), per-child stagger, scroll-linked scrub with * a real fallback, a reduced-motion branch that keeps the fade and drops the * travel, and server HTML that is fully readable when JS never runs. * * Content is hidden only under html[data-ma-js] (set before paint by the * integration), never in the server HTML itself. * * Curve, duration, travel and stagger default to the active preset * (--ma-ease, --ma-duration, --ma-travel-enter, --ma-stagger); a prop sets a * component-local property (--ma-r-*) that wins over the preset. The delay * and the per-child index are --ma-r-delay and --ma-r-i: as bare --ma-delay * and --ma-i they were inherited from any other component that set them. */ import type { HTMLAttributes, HTMLTag } from 'astro/types'; type From = 'bottom' | 'top' | 'left' | 'right' | 'clip' | 'none'; interface Props extends HTMLAttributes<'div'> { /** Element to render. */ as?: HTMLTag; /** Where the element travels from; `clip` wipes it open from the bottom edge, fully painted; `none` fades only. */ from?: From; /** Travel distance in px. Unset, the preset's --ma-travel-enter, from whichever side. */ distance?: number; /** Scale to grow from, e.g. 0.96. */ scale?: number; /** Blur in px to sharpen from. */ blur?: number; /** Duration in ms. */ duration?: number; /** Delay in ms before the reveal starts. */ delay?: number; /** Any CSS easing. */ easing?: string; /** Interval in ms between direct children; `true` takes the preset's --ma-stagger. When set, the children animate and the wrapper does not. */ stagger?: number | boolean; /** Play once and stay. `false` re-plays every time the element enters. */ once?: boolean; /** Fraction of the element that must be visible to trigger, 0–1; for an element taller than the viewport, that fraction of the viewport's height. */ threshold?: number; /** IntersectionObserver rootMargin. */ rootMargin?: string; /** Scroll-linked: progress follows the element's entry instead of triggering once. Ignores stagger. */ scrub?: boolean; } const { as: Tag = 'div', from = 'bottom', distance, scale, blur, duration, delay, easing, stagger, once = true, threshold, rootMargin, scrub = false, class: className, style, ...rest } = Astro.props; // Only non-default values become inline custom properties; defaults live in the CSS. An unset distance is the preset's // travel from any side: it used to follow the preset from the bottom only (the CSS default) and be pinned at 24 px from // the top, the left and the right. const vars: string[] = []; const travel = distance === undefined ? 'var(--ma-travel-enter, 24px)' : `${distance}px`; if (from === 'left' || from === 'right') vars.push(`--ma-dx:${from === 'left' ? `calc(-1 * ${travel})` : travel}`, '--ma-dy:0px'); else if (from === 'top') vars.push(`--ma-dy:calc(-1 * ${travel})`); else if (from !== 'bottom') vars.push('--ma-dy:0px'); else if (distance !== undefined) vars.push(`--ma-dy:${travel}`); if (scale !== undefined && scale !== 1) vars.push(`--ma-scale:${scale}`); if (blur) vars.push(`--ma-blur:${blur}px`); if (duration !== undefined) vars.push(`--ma-r-dur:${duration}ms`); if (delay) vars.push(`--ma-r-delay:${delay}ms`); if (easing) vars.push(`--ma-r-ease:${easing}`); // `stagger` alone (true) leaves the interval to the preset's --ma-stagger; it used to print --ma-r-stagger:truems if (typeof stagger === 'number' && stagger) vars.push(`--ma-r-stagger:${stagger}ms`); if (typeof style === 'string' && style) vars.push(style); --- ```