vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-morphing-text

text-effectdark-futuristicmotion on file

A client-side React heading effect that crossfades and blurs through a supplied text list using animation frames, inline styles, overlapping spans, and an SVG threshold filter. It ships as a shadcn registry component and expects Tailwind utilities plus a cn helper backed by clsx and tailwind-merge.

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

What the harness recorded

BARE BUILD

✗ Build failed in 6m 31s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/morphing-text.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A focused hero-text effect that builds and mounts cleanly in its intended environment, with no reported accessibility findings or viewport overflow. It needs a shadcn-style setup as shipped, and teams should add reduced-motion behavior before using it broadly.

Use it if

  • You need a looping hero headline that cycles through short phrases.
  • Your React interface already uses Tailwind and a shadcn-style cn utility.
  • You are comfortable with a continuously animated text treatment driven in the browser.

Skip it if

  • The changing words carry essential information that must remain simultaneously visible or easy to copy.
  • Your design must honor reduced-motion preferences without modifying the component.
  • You want a dependency-free component that can be dropped into a plain React project unchanged.
  • Your headings vary greatly in length and need content-driven height rather than an overlapping fixed-height stage.

Install

Installation record for magicui-morphing-text
Declared dependenciesclsx, tailwind-merge
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add Tailwind, clsx, and tailwind-merge; provide the expected cn utility and its import alias, or replace that import with a local equivalent. Keep the component client-side and ensure Tailwind emits the arbitrary SVG filter utility used by the wrapper.

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/magicuidesign/magicui
License
MIT
Record published
2026-08-17

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.