vibecodng.com

Free MCP betaIndex and tools live

Measured entry

motion-primitives-text-morph

text-effectgradient-glowmotion on file

A client-side React text transition that splits a string into keyed characters and animates their entry, exit, and layout with Motion. It ships as shadcn registry TypeScript with a named TextMorph export, and depends on Motion plus a cn utility imported through the usual project alias.

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

Verdict

The component source is compact and the bare integration mounts, but this package should be published as a failure because its demo imports a default export while the source exposes only the named TextMorph export. Teams unwilling to repair that import should avoid it.

Use it if

  • You need short labels or status text to morph in place when their string value changes.
  • Your React interface already uses Motion and can accept a client-only component.
  • You want to customize the rendered element, motion variants, or spring transition through props.

Skip it if

  • You need a verified drop-in demo, because the supplied harness demo imports a default export that the component does not provide.
  • You are building a server-only interface or do not want Motion in the client bundle.
  • You need robust word-level transitions for long passages rather than per-character animation.

Install

Installation record for motion-primitives-text-morph
Declared dependenciesmotion, clsx, tailwind-merge
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, install Motion, clsx, and tailwind-merge, provide a cn helper or replace that call, configure the project alias or switch to a relative import, and supply an inline-block utility or equivalent CSS. Import TextMorph by name and keep it in a React client component.

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-18

Alternatives

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