Layout
RevealGroup
Reveals a group of direct children with tokenized, reduced-motion-aware staggering.
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 { Card, RevealGroup } from '@santi020k/lumen-astro'
---
<RevealGroup
as="ul"
animation="slide-up"
stagger={90}
style="display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr));"
>
<li><Card><strong>Plan</strong><p>Start with semantic structure.</p></Card></li>
<li><Card><strong>Build</strong><p>Compose accessible primitives.</p></Card></li>
<li><Card><strong>Ship</strong><p>Keep motion consistent.</p></Card></li>
</RevealGroup>import { Card, RevealGroup } from '@santi020k/lumen-react'
export const Example = () => (
<>
<RevealGroup
as="ul"
animation="slide-up"
stagger={90}
style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
>
<li><Card><strong>Plan</strong><p>Start with semantic structure.</p></Card></li>
<li><Card><strong>Build</strong><p>Compose accessible primitives.</p></Card></li>
<li><Card><strong>Ship</strong><p>Keep motion consistent.</p></Card></li>
</RevealGroup>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-reveal-group
as="ul"
animation="slide-up"
stagger="90"
style="display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr));"
>
<li><lumen-card><strong>Plan</strong><p>Start with semantic structure.</p></lumen-card></li>
<li><lumen-card><strong>Build</strong><p>Compose accessible primitives.</p></lumen-card></li>
<li><lumen-card><strong>Ship</strong><p>Keep motion consistent.</p></lumen-card></li>
</lumen-reveal-group>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 RevealGrouplumen add RevealGrouppnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add RevealGroup --target reactlumen add RevealGroup --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add RevealGroup --target elementslumen add RevealGroup --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 | "div" | "ol" | "section" | "ul" | "div" | Preserves list or section semantics without adding a wrapper. |
| animation | "fade" | "slide-up" | "scale" | "slide-up" | Sets the shared entrance treatment for direct children. |
| stagger | number | 80 | Sets the delay in milliseconds between direct children. |
| delay | number | 0 | Delays the first child in milliseconds. |
| duration | "fast" | "standard" | "slow" | "slow" | Uses the shared Lumen motion duration. |
| once | boolean | true | When false, children transition again when the group 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. |