Reveal

Animate children into view as they scroll into the viewport, via IntersectionObserver (useInView).

import { Reveal } from "@naraya-ai/ui";

Examples

Staggered list

Scroll the preview — each card slides up + fades, staggered by delay. Scroll back up to replay (once={false}).

↓ scroll ↓

Item 1

Item 2

Item 3

Item 4

Item 5

{items.map((item, i) => (
  <Reveal key={i} animation="slide-up" delay={i * 80}>
    <Card>{item}</Card>
  </Reveal>
))}

Directions

Six entrance styles. Scroll within the box — they animate out and back in.

↓ scroll ↓

slide-up

slide-down

slide-left

slide-right

scale-in

blur-in

<Reveal animation="slide-left">…</Reveal>
<Reveal animation="scale-in">…</Reveal>
<Reveal animation="blur-in">…</Reveal>

Enter + exit combo

Enter from below, leave upward (pass-through). Set exit to compose any in/out pair.

↓ scroll ↓

In ↑ from below · out ↑ to top

In → from left · out ← to left

{/* enter from below, exit upward */}
<Reveal animation="slide-up" exit="slide-up" once={false}>…</Reveal>

{/* enter from left, exit back to the left */}
<Reveal animation="slide-right" exit="slide-left" once={false}>…</Reveal>

⚠️ Don't wrap glass

Reveal animates opacity + transform on its wrapper, which makes it a backdrop root and kills the frost of any .naraya-glass descendant. Reveal a glass-free element, or reveal the content inside the glass surface instead.

Props

Prop	Type	Default	Description
animation	`"fade-in" \| "slide-up" \| "slide-down" \| "slide-left" \| "slide-right" \| "scale-in" \| "blur-in"`	`"slide-up"`	Entrance style (motion into place).
exit	`RevealAnimation`	`= animation`	Exit style when scrolled away (needs once={false}).
delay	`number`	`0`	Delay before the transition, in ms.
once	`boolean`	`true`	Reveal once, or animate out + back in each pass.
threshold	`number \| number[]`	—	Forwarded to useInView.
rootMargin	`string`	`"0px 0px -10% 0px"`	Forwarded to useInView.
as	`ElementType`	`"div"`	Element to render.

useInView

The underlying hook is exported from @naraya-ai/hooks: const [ref, inView] = useInView(). SSR-safe; falls back to visible when IntersectionObserver is unavailable.

Reveal

Examples

⚠️ Don't wrap glass

Props

useInView

Accessibility

Related