vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-container-text-scroll

scroll-effectspatialmotion on file

A shadcn registry client component that turns supplied children into a framed card, then tilts, scales, and lifts it as the page scrolls. It ships as a TypeScript React file, uses Tailwind utility classes for all layout and styling, and depends on Motion for scroll tracking and transforms.

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

Verdict

Technically dependable and responsive, but not convincing as a drop-in: the default demo has no title or children and captures the card nearly edge-on. Choose it when you will compose the content and can justify a long, cinematic scroll section; otherwise the setup outweighs the effect.

Use it if

  • You need a cinematic scroll reveal for a hero visual, product mockup, or editorial feature.
  • Your React app already uses Tailwind and Motion, and you can provide the title and card content.
  • You have enough vertical space for a deliberately long, scroll-driven presentation.

Skip it if

  • You need a useful drop-in demo, since the supplied harness invocation provides no content and appears nearly empty.
  • You want a compact section that does not reserve a tall scroll region.
  • You need reduced-motion behavior out of the box; the source does not check that preference.
  • You are minimizing client-side animation dependencies for a single decorative effect.

Install

Installation record for ruixen-container-text-scroll
Declared dependenciesmotion
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn React project, copy the client component, install Motion, and provide Tailwind with arbitrary-value utilities enabled. Ensure the file is rendered on the client, then pass both a title node and card children. Add your own reduced-motion fallback if required.

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

Alternatives

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