Animations/Scroll Reveal

ScrollReveal

Wraps any element and triggers a Motion animation when it enters the viewport. Supports fade, slide, and scale effects with configurable thresholds and delays.

import { ScrollReveal } from "@animui/ui"

Usage

Wrap any element. Scroll down on a real page to see the entrance animations trigger.

example.tsx

import { ScrollReveal } from "@animui/ui";

export default function Example() {
  return (
    <div className="space-y-8">
      <ScrollReveal direction="up">
        <div className="p-6 bg-white rounded-xl border">Slides up into view</div>
      </ScrollReveal>

      <ScrollReveal direction="none" delay={0.2}>
        <div className="p-6 bg-white rounded-xl border">Fades in with delay</div>
      </ScrollReveal>

      <ScrollReveal direction="left" distance={48}>
        <div className="p-6 bg-white rounded-xl border">Slides in from left</div>
      </ScrollReveal>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The content to animate into view.
`direction`	`"up" \| "down" \| "left" \| "right" \| "none"`	`"up"`	Direction the element slides in from. Use "none" for a pure fade.
`distance`	`number`	`32`	Pixel distance the element travels during the entrance animation.
`delay`	`number`	`0`	Seconds to delay the animation after the element enters the viewport.
`duration`	`number`	`0.6`	Animation duration in seconds.
`once`	`boolean`	`true`	If true, the animation only plays once. If false, it replays when the element re-enters.
`className`	`string`	—	Classes applied to the wrapper div.
`style`	`React.CSSProperties`	—	Inline styles applied to the wrapper div.

Staggering children

To stagger a list of items, map over them and add an incrementing delay:

{items.map((item, i) => (
  <ScrollReveal key={item.id} direction="up" delay={i * 0.1}>
    <FeatureCard {...item} />
  </ScrollReveal>
))}