Layout
ScrollReveal
Animates wrapped content as it first enters the viewport.
01
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.
Framework usage
Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens andui-* class contract.---
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 { ScrollReveal } from '@santi020k/lumen-react'
export const Example = () => (
<>
<ScrollReveal as="section" animation="slide-up" duration="slow" threshold={0.2}>
<div 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>
</div>
</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>02
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 |
|---|---|---|---|
| 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. |