ScrollReveal

Scroll-triggered entrance animation with five named flavours — lift, glide, pop, slide, mist. Each tunes opacity, transform, and ease for a different feel. Use it instead of Reveal when you want a softer, transform-based entrance rather than a clip-path mask.

Usage

import { ScrollReveal } from '@bwo-ui/react';

<ScrollReveal flavor="lift">
  <h2>This lifts in from below as it enters view.</h2>
</ScrollReveal>

<ScrollReveal flavor="mist" duration={1.1}>
  <p>This unblurs from a 14px blur as it enters view.</p>
</ScrollReveal>

<ScrollReveal flavor="pop" once={false}>
  <Card>Replays every time it re-enters the viewport.</Card>
</ScrollReveal>

Flavours

lift — fades + translates 32px up. The default.
glide — fades + translates 24px up & 32px from the left. Use for sidebar items entering laterally.
pop — fades + scales 0.92 → 1 with a back-out ease. Use for badges, avatars, small accent tiles.
slide — fades + translates 64px from the right. Use for off-canvas side-rails.
mist — fades + blurs 14px → 0. Use for hero copy and feature blocks where you want the entrance to feel atmospheric.

Props