vibecodng.com

Free MCP betaIndex and tools live

Measured entry

motion-primitives-in-view

scroll-effectspatialmotion on file

A client-side React reveal wrapper distributed as a shadcn registry source file, so it is copied into your codebase rather than consumed as a packaged widget. It renders a configurable Motion element, watches viewport entry with useInView, and switches between hidden and visible variants. It depends on React and the motion package.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of motion-primitives-in-view at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of motion-primitives-in-view at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of motion-primitives-in-view at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for motion-primitives-in-view
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal58.1 KB (123.5 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A clean, focused choice for teams already committed to Motion, with a pleasantly small API and no surrounding provider. For a single reveal it is hard to justify the added dependency, and accessibility-conscious teams should add a reduced-motion path before adoption.

Use it if

  • You want a small reusable wrapper for fading or transforming content as it enters the viewport.
  • Your app already uses Motion and you want reveal variants and transitions to remain configurable at each call site.
  • You are comfortable owning and adapting a copied client component in your codebase.

Skip it if

  • You only need a basic opacity reveal and do not want to add Motion's runtime cost.
  • You require built-in reduced-motion handling, because this wrapper does not provide it.
  • You need the wrapper's custom once flag to guarantee that off-screen content stays hidden until first entry; its animation-complete state can make that behavior ambiguous.
  • You need the as prop to accept arbitrary custom React components rather than Motion element names.

Install

Installation record for motion-primitives-in-view
Declared dependenciesmotion
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, copy the component source into a client-rendered React module, install the motion package, and ensure React is present. Preserve the client directive where your framework requires it. Add your own reduced-motion policy and import the component from its new local path; no provider or shared styles are required.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/ibelick/motion-primitives
License
MIT
Record published
2026-08-13

Alternatives

Other published entries for the scroll-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.