Installnpx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-fade-in-fade-out.json
- Purpose
- Communicate appearance, disappearance, or visibility changes with minimal distraction.
- Trigger
- Trigger from mounting, async completion, filter-result changes, or an explicit visibility state.
- Interruptibility
- When state changes again, continue from the current opacity without resetting to the start.
- Reduced motion
- Keep a brief 80–120ms fade and pair important information with a static contrast change.
fade-in-fade-outFade in / Fade outAn opacity transition brings an element into view or carries it out without changing its geometry.