ScrollReveal
Animates wrapped content as it first enters the viewport.
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
View ScrollReveal code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { ScrollReveal } from '@santi020k/lumen-astro'
---
<ScrollReveal as="section" animation="slide-up" duration="slow" threshold={0.2}>
<div style="max-width: 28rem;">
<strong>Progressive by default</strong>
<p style="margin-top: 0.35rem; color: hsl(var(--ink-soft));">
Content remains readable when motion is reduced or JavaScript is unavailable.
</p>
</div>
</ScrollReveal>import { Card, ScrollReveal } from '@santi020k/lumen-react'
export const Example = () => (
<ScrollReveal animation="slide-up" duration="slow" threshold={0.2}>
<Card>
<strong>Progressive by default</strong>
<p>Content remains readable when motion is reduced.</p>
</Card>
</ScrollReveal>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-scroll-reveal as="section" animation="slide-up" duration="slow" threshold="0.2">
<div style="max-width: 28rem;">
<strong>Progressive by default</strong>
<p style="margin-top: 0.35rem; color: hsl(var(--ink-soft));">
Content remains readable when motion is reduced or JavaScript is unavailable.
</p>
</div>
</lumen-scroll-reveal>Framework differences
React: The React root is a div. Compose a semantic section inside it when needed rather than copying the Astro as prop.
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add ScrollReveallumen add ScrollRevealpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add ScrollReveal --target reactlumen add ScrollReveal --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add ScrollReveal --target elementslumen add ScrollReveal --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| as | "article" | "div" | "section" | "div" | Preserves the semantic root without changing reveal behavior. |
| animation | "fade" | "slide-up" | "scale" | "fade" | Sets the reveal transition. UIPrimitives observes the element and reveals it as it enters the viewport. |
| delay | number | 0 | Delays the entrance in milliseconds. |
| duration | "fast" | "standard" | "slow" | "slow" | Uses the shared Lumen motion duration. |
| once | boolean | true | When false, the content transitions again when it re-enters the viewport. |
| threshold | number | 0.15 | Sets the visible intersection ratio that starts the reveal. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |