Measured entry
eldora-letter-pull-up-text
text-effectspatialmotion on file
A client-side React text entrance that lifts and fades each character into place. It ships as a shadcn registry component and depends on React, Motion, clsx, and Tailwind utility classes. Each character is rendered as its own heading element, including spaces represented by nonbreaking content.



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.
| Build | OK |
|---|---|
| Mount | OK |
| Console errors | 0 |
| Uncaught page errors | 0 |
| Horizontal overflow | flagged at 375 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 1 |
| Gzip marginal | 58.3 KB (123.7 KB build, 65.4 KB baseline) |
| Bare mode | OK |
| Provider required | NO |
| Demo used | written from the component source API |
Verdict
A tidy, focused entrance effect for short display copy, but not production-ready unchanged. Its narrow-screen overflow needs responsive treatment, and the per-character heading markup should be replaced with one semantic heading containing animated spans.
Use it if
- You need a short, single-line hero phrase to reveal letter by letter.
- Your project already uses Motion and Tailwind utilities.
- You can revise the rendered element semantics before using it as a real page heading.
Skip it if
- The phrase must fit narrow screens without custom wrapping or responsive type adjustments.
- You need clean heading semantics out of the box, since every character becomes a separate heading.
- Your motion policy requires built-in reduced-motion handling.
- You want to avoid adding Motion for a single decorative text entrance.
Install
| Declared dependencies | motion, react, clsx |
|---|---|
| Missing on install | none |
| Bare install | builds and mounts without the shadcn-style helpers |
| Provider | no provider required in the harness |
In a non-shadcn project, install Motion and clsx, copy the client component, and provide Tailwind with the referenced typography, spacing, shadow, tracking, and responsive utilities. Define the display-font utility or replace it with your own font class.
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/karthikmudunuri/eldorauiAlternatives
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.
- uilayouts-randomized-text-effectdark-futuristic
- Renders
- YES
- A11y
- 0
- Gzip
- 17.5KB
- Bare
- pass
- Prov
- NO
- uilayouts-randomized-text-unveildark-futuristic
- Renders
- YES
- A11y
- 0
- Gzip
- 17.7KB
- Bare
- pass
- Prov
- NO
- fancy-scramble-indark-futuristic
- Renders
- YES
- A11y
- 0
- Gzip
- 17.8KB
- Bare
- pass
- Prov
- NO
- magicui-aurora-textaurora-mesh
- Renders
- YES
- A11y
- 0
- Gzip
- 20.7KB
- Bare
- pass
- Prov
- NO
- magicui-highlighterskeuomorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 24.8KB
- Bare
- pass
- Prov
- NO
- fancy-text-along-pathspatial
- Renders
- YES
- A11y
- 0
- Gzip
- 25.7KB
- Bare
- pass
- Prov
- NO