ViewAnimation

Scroll-triggered fade-in animation using Intersection Observer.

The ViewAnimation component wraps content and fades it in when it enters the viewport.

Usage

---
import { ViewAnimation } from '@publier/primitives';
---

<ViewAnimation>
  <h2>This fades in on scroll</h2>
  <p>Content appears with a smooth animation.</p>
</ViewAnimation>

With delay:

<ViewAnimation delay={100}>
  <div>Appears 100ms after entering viewport</div>
</ViewAnimation>

Props

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`delay`	`number`	`0`	Delay in ms before animation starts (capped at 200ms)
`once`	`boolean`	`true`	Only animate once (don’t re-animate on scroll back)

Behavior

Uses IntersectionObserver to detect when the element enters the viewport
Applies a fade-in + slight upward slide animation
Respects prefers-reduced-motion — skips animation if the user prefers reduced motion
Delay is capped at 200ms to prevent sluggish-feeling UI