motion-reveal

Animates its content in when it enters the viewport. Uses IntersectionObserver with spring-based fade and lift.

Preview

Scroll to reveal

import 'motion-components/motion-reveal'   // just this one
import 'motion-components'               // or the whole library

<motion-reveal duration="0.6" y="24">
  <h2>Fades into view</h2>
</motion-reveal>

Attribute	Property	Type	Default	Description
duration	duration	number	0.6	Spring duration hint in seconds
y	y	number	24	Initial vertical offset in px
threshold	threshold	number	0.1	IntersectionObserver visibility threshold (0–1)
once	once	boolean	true	Animate only on first intersection. Set it to "false" to replay on every entry

Trigger the reveal programmatically with play(), cancel(), and replay().

Reveal from JavaScript

–

Respects prefers-reduced-motion: when enabled, the reveal animation is skipped and content appears immediately at its final state.