Reveal
`<pura-reveal>` wraps any content and animates it (fade, slide-up, or zoom) the first time it enters the viewport, using IntersectionObserver. The entrance is purely visual (opacity + transform): the content always stays in the accessibility tree and is never truly hidden, and under reduced motion it appears immediately with no delay. It has an agent-native layer: each instance registers in `window.__puraReveals` by `data-pura-id` and mirrors config and live state in `data-pura-reveal-*` attributes, letting an agent enumerate, read, and trigger each reveal without traversing the DOM.
Preview
<pura-reveal animation="slide-up" delay="100" threshold="0.3">
<article>
<h3>Revealed content</h3>
<p>This block slides up and fades in smoothly as soon as it enters the screen.</p>
</article>
</pura-reveal>
<pura-reveal animation="zoom" once>
<article>
<h3>Reveals only once</h3>
<p>With <code>once</code>, it animates on the first entry and stops observing.</p>
</article>
</pura-reveal>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
animation | "fade" | "slide-up" | "zoom" | fade | Entrance animation style. Invalid values fall back to fade. |
delay | number | 0 | Milliseconds to wait before animating when it enters the viewport. Applied as transition-delay and ignored under reduced motion. |
once | boolean | false | When present, reveals once and stops observing. When absent, re-hides on exit and reveals again on re-entry. |
threshold | number | 0.15 | IntersectionObserver threshold 0..1 that defines how much of the element must be visible to reveal. |
revealed | boolean | false | Read-only reflected state: present while the content is visible. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/reveal.js"></script>import "./pura/lib/reveal.js";