Content remains readable when motion is reduced or JavaScript is unavailable.
Documentation
Layout
ScrollReveal
Animates wrapped content as it first enters the viewport.
01
See it in context
Preview
02
Copy a working example
Usage
Astro examples assume UIPrimitives is mounted once in your root layout. Do not add the runtime next to each component instance.
---
import { ScrollReveal } from '@santi020k/lumen-astro'
---
<ScrollReveal animation="fade">
<article 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>
</article>
</ScrollReveal>---
import { ScrollReveal } from '@santi020k/lumen-astro'
---
<ScrollReveal animation="fade">
<article 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>
</article>
</ScrollReveal>import { ScrollReveal } from '@santi020k/lumen-react'
export const Example = () => (
<>
<ScrollReveal animation="fade">
<article style={{ maxWidth: '28rem' }}>
<strong>Progressive by default</strong>
<p style={{ marginTop: '0.35rem', color: 'hsl(var(--ink-soft))' }}>
Content remains readable when motion is reduced or JavaScript is unavailable.
</p>
</article>
</ScrollReveal>
</>
)import { ScrollReveal } from '@santi020k/lumen-react'
export const Example = () => (
<>
<ScrollReveal animation="fade">
<article style={{ maxWidth: '28rem' }}>
<strong>Progressive by default</strong>
<p style={{ marginTop: '0.35rem', color: 'hsl(var(--ink-soft))' }}>
Content remains readable when motion is reduced or JavaScript is unavailable.
</p>
</article>
</ScrollReveal>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-scroll-reveal animation="fade">
<article 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>
</article>
</lumen-scroll-reveal><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-scroll-reveal animation="fade">
<article 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>
</article>
</lumen-scroll-reveal>03
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. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| animation | "fade" | "slide-up" | "scale" | "fade" | Sets the reveal transition. UIPrimitives observes the element and reveals it as it enters the viewport. |
| 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. |