vibecodng.com

Free MCP betaIndex and tools live

Measured entry

animata-blur-out-up

text-effectspatialmotion on file

A client-side React text cycler that reveals copy word by word, then lifts and blurs it out before swapping to the next phrase. It ships as a shadcn registry item with a shared TextAnimator runtime and Tailwind-based stylesheet. It declares no packages, but relies on React, the Web Animations API, sibling runtime files, and the @/lib/utils cn helper.

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

What the harness recorded

BARE BUILD

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

Verdict

A focused choice for decorative rotating copy, with useful tuning hooks and a convincing exit treatment. The shared runtime is a lot to adopt for one effect, though. It needs a shadcn-style setup, and essential messaging deserves a persistent fallback plus reduced-motion handling.

Use it if

  • You need a rotating hero tagline or short status phrase with a word-by-word entrance and airy upward exit.
  • You want control over the copy cycle, hold, gap, travel, and entrance or exit behavior through props.
  • Your app already has a shadcn-style Tailwind setup and can absorb the shared text animation runtime.

Skip it if

  • The text is essential content that must stay continuously visible and present in the document.
  • You need a built-in reduced-motion mode rather than adding that behavior yourself.
  • You want a self-contained component without shared runtime, stylesheet, alias, or utility dependencies.

Install

Installation record for animata-blur-out-up
Declared dependenciesnone declared
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 app, copy the component plus its TextAnimator, stylesheet, and demo-class helper; add a cn utility or rewrite that import; configure the @ alias; and ensure Tailwind understands the stylesheet's @reference and utility directives. Also provide a client-rendered React environment with the Web Animations API.

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/codse/animata
License
MIT
Record published
2026-08-13

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.