xpert-ai fade-in-up
A clean rise + fade entrance, on load. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Hero content and a few key elements appearing on first paint.
When NOT to use it (restraint)
- Long lists / off-screen content — use
scroll-reveal. - Don't delay must-read content by more than ~300ms; keep to ≤3 staggered elements.
How to apply
- Copy
fade-in-up.cssandfade-in-up.jsand link them. - Mark elements:
<h1 data-fade>…</h1>(optionaldata-fade-delay="80"; auto-staggers otherwise).
Accessibility & performance
prefers-reduced-motion: shown immediately. Transform/opacity only.