# Fade In Up

> Rise + fade key elements in as the page loads, optionally staggered. Use for hero content and a small group of important elements. Honors prefers-reduced-motion. For long lists or off-screen content use scroll-reveal instead; never delay must-read content by more than a moment.

- Skill: `xpert-ai/fade-in-up` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/fade-in-up`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/fade-in-up/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/fade-in-up

---


# fade-in-up

A clean rise + fade entrance, on load. Part of
[motion-anything](https://github.com/nexu-io/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
1. Copy `fade-in-up.css` and `fade-in-up.js` and link them.
2. Mark elements: `<h1 data-fade>…</h1>` (optional `data-fade-delay="80"`; auto-staggers otherwise).

## Accessibility & performance
- `prefers-reduced-motion`: shown immediately. Transform/opacity only.