design-infraReport a problem or share feedback← Catalog
In View
curatedtheme-awarefreemotion-primitives/in-view
A component that triggers animations when elements enter the viewport.
$
npx shadcn@latest add @motion-primitives/in-viewnpm deps: motion
Our notes
Animate children when they enter the viewport — thin, reusable wrapper. Colourless.- Source
- Motion Primitives
- Kind
- component
- Categories
- transition
- Use as
- wrapper — wraps your existing element
- Applies to
- text-effectherocardimagefeatures
- Motion
- on enter · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (ibelick/motion-primitives). Motion Primitives Pro is a separate paid product — not catalogued.
- Live demo
- motion-primitives.com
- Docs
- motion-primitives.com
Similar
Compare all 4 →- Blur Fademagicui/blur-fadeBlur + fade-in on mount or in view; the go-to entrance wrapper for sections and image grids (stagger with `delay`). Colourless. Respect prefers-reduced-motion yourself.
- Fade Contentreact-bits/fade-contentSimple directional fade / slide entrance / exit wrapper with threshold-based activation.
- Text Reveal Cardaceternity/text-reveal-cardMousemove effect to reveal text content at the bottom of the card.