vibecodng.com

Free MCP betaIndex and tools live

Measured entry

motion-primitives-animated-group

transition-effectspatialmotion on file

A client-side React wrapper distributed as a shadcn registry component. It uses motion/react to animate a container and each direct child on mount, with built-in transition presets, custom Motion variants, and configurable wrapper element types.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of motion-primitives-animated-group at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of motion-primitives-animated-group at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of motion-primitives-animated-group 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-animated-group
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal58.2 KB (123.6 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A practical, flexible entrance wrapper that builds and mounts cleanly without framework scaffolding. Use it when Motion is already justified; for a single reveal, the dependency cost and extra wrapper around every child may be hard to defend.

Use it if

  • You need a short staggered entrance for a list, heading group, or onboarding sequence.
  • Your project already uses Motion and can absorb another client-side animation component.
  • You want presets for common entrances but still need an escape hatch for custom variants.

Skip it if

  • The content must remain static or respect a strict no-motion product policy without extra adaptation.
  • You want scroll-triggered, exit, or interaction-driven sequencing rather than an animation that starts on mount.
  • You cannot accept a Motion dependency for a small reveal effect.
  • You need true slot-style child composition, since asChild selects a wrapper element instead of merging props into the child.

Install

Installation record for motion-primitives-animated-group
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, add Motion, copy the client component into your source tree, and ensure the app supports React client components and TypeScript JSX. No provider or registry utility is 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 transition-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.