GhostReveal
Scroll reveals that feel expensive and weigh nothing. A blur-to-sharp fade with an expo-out curve by default, and drop-in compatible with AOS.
npm i ghost-reveal
<div data-reveal>
The default
Zero config, already premium.
Each item below is just data-reveal, with data-reveal-stagger on the list. The fade rises 16px, goes from a 4px blur to sharp over 700ms on cubic-bezier(.16,1,.3,1), and only touches opacity, transform and filter.
- 01
Blur-to-sharp
4px blurA subtle focus pull as each element lands. Tune it with
data-reveal-blur. - 02
Expo-out easing
700msIt moves quickly at first, then settles softly. No bounce, no lag.
- 03
Smart stagger
per batchOnly elements revealed together are staggered, so later rows never wait.
- 04
No layout shift
CLS 0Nothing moves in layout, and there is never a sideways scrollbar.
- 05
Reduced motion
liveHonored as the setting changes. Content appears instantly, with no motion.
- 06
SPA-ready
autoContent added later is picked up on its own, so route changes just work.
Blur
Focus pull, from none to dreamy.
data-reveal-blur="0" for a crisp fade, or higher for a more cinematic arrival.
Crisp
Opacity and travel only.
Subtle
Barely noticed, clearly felt.
Cinematic
For hero moments.
Big moments
Large surfaces stay smooth.
All the work happens on the compositor (transform, opacity, filter). There are no scroll listeners: IntersectionObserver decides when, and the Web Animations API does the rest.
AOS-compatible
Every AOS animation name works.
Keep your data-aos markup. Fade, zoom, slide and flip, each with the same blur-fade polish. Horizontal slides never widen the page.
Dynamic content
New nodes reveal themselves.
Ghost Reveal watches the DOM by default with a cheap MutationObserver that only scans added subtrees. That covers framework route changes, infinite lists and CMS embeds.
Experimental · native scroll-driven
Scrubbed with ViewTimeline.
data-reveal-scrub ties progress to scroll position (no JS per frame) where ViewTimeline exists. Other browsers get the normal reveal.
Scroll me
Then scroll back up. It reverses.
zoom-in
The same keyframe data on a scroll timeline.
fade-left
Runs on the compositor in Chromium.
Start
One line.
<script src="https://unpkg.com/ghost-reveal@0.2/dist/ghost-reveal.umd.min.js" data-auto></script> <h2 data-reveal>Hello</h2> <img data-reveal="zoom-in" data-reveal-delay="150" src="…" alt="">