Component / Layout

Scroll Reveal

Reveal content inside the page or a bounded scroller without global scroll handlers. Server markup remains visible, dimensions stay stable, and observation is progressive.

0 / 3 observed

Preset

RepeatReduce motion

Bounded viewport / scroll to reveal

Scroll specimen

Move through the viewport

Each card begins visible in server markup and enhances only after hydration.

Observe locally

A bounded IntersectionObserver watches this scroll pane, not the page.

Reveal without shift

Opacity and transforms preserve layout dimensions during every reveal.

Remain available

Server-rendered content stays readable when JavaScript or observation is unavailable.

End of bounded viewport

Delivery contract

Install it

pnpm add easecraft@0.1.0

The component imports stable APIs from easecraft.

Files / 00

Dependencies / 03

easecraft: npm / 0.1.0
react: peer / >=18.2.0 <20.0.0
react-dom: peer / >=18.2.0 <20.0.0

Package usage

Use it

import { ScrollReveal } from "easecraft";

<ScrollReveal
  preset="fade-rise"
  threshold={0.2}
  rootMargin="0px 0px -10% 0px"
>
  <ProjectCard />
</ScrollReveal>

Typed contract

API

Prop	Type	Default	Purpose
children	ReactNode	required	Content available before enhancement
as	HTML tag	"div"	Polymorphic semantic host
observerRoot	Element \| Document \| null	viewport	Bounded observer root
threshold	number \| readonly number[]	0.15	Visible ratio required
rootMargin	string	"0px 0px -10% 0px"	Observer boundary adjustment
once	boolean	true	Disconnect after first completed reveal
preset	"fade" \| "rise" \| "fade-rise"	"fade-rise"	Reveal treatment
duration	duration token \| number	"normal"	Reveal duration
distance	distance token \| number	"medium"	Reveal travel
delay	number	0	Delay before reveal
easing	easing token \| string	"enter"	Reveal easing
onReveal	() => void	none	Completed reveal callback
onVisibilityChange	(visible) => void	none	Repeat-mode visibility callback

Release requirement

Accessibility

Progressive enhancement: Content is visible in SSR markup and remains available without JavaScript.
No layout shift: Only opacity, visibility, and transforms change during observation.
Bounded observation: IntersectionObserver supports page and local scrolling roots without polling.
Reduced motion: Content remains immediately visible and no observer or animation is created.