vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-scroll-text-rise

badgeunclassifiedmotion on file

A client-side React text treatment that gives each word its own scroll-linked fade and upward motion inside a sticky, internally scrolling container. It ships as a shadcn registry TypeScript component styled with Tailwind utilities and depends on Motion 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 ruixen-scroll-text-rise at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-scroll-text-rise at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-scroll-text-rise 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 ruixen-scroll-text-rise
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal72.9 KB (138.4 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 927ms
error during build:
[vite:load-fallback] Could not load <sandbox>re-4df6d3907e54/src/lib/utils (imported by src/cut/components/ruixen/scroll-text-rise.tsx): ENOENT: no such file or directory, open '<sandbox>re-4df6d3907e54/src/lib/utils'

Verdict

A focused editorial effect with clean responsive wrapping, but the nearly invisible starting state and hidden nested scrollbar need design and accessibility work. It also needs a shadcn-style setup before it will build and mount, so it is best for teams already using that stack.

Use it if

  • You need a short headline or statement to reveal word by word as the visitor scrolls within a dedicated story panel.
  • Your React interface already uses Tailwind, Motion, and a shadcn-compatible cn utility.
  • You can tune the muted text colors and provide a clear cue that the panel itself scrolls.

Skip it if

  • You need the animation to follow normal page scrolling rather than consume wheel or touch input inside a nested scroll area.
  • You require acceptable default contrast without revising the component's very faint unrevealed text styling.
  • You want a lightweight static label or badge, since this is a large animated text section rather than a badge.
  • Your project cannot take on Motion or Tailwind-specific styling.

Install

Installation record for ruixen-scroll-text-rise
Declared dependenciesmotion, clsx, 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 Motion, Tailwind, clsx, and tailwind-merge. Create a cn utility at the expected lib alias or replace that import with your own helper, configure the alias, and ensure your Tailwind scanner includes the component file. Review the muted text colors and add an obvious scroll affordance.

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/ruixenui/ruixen.com
License
MIT
Record published
2026-08-18

Alternatives

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