This component no longer exists. It was in atlas-ui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

Scroll Based Text Reveal

atlas-ui/scroll-based-text-reveal

RemovedComponent

A text reveal effect which animates the opacity of the text as you scroll.

Live preview

live · rendered by the registry

Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://atlasui.dev/r/scroll-based-text-reveal.json

Source

registry/react/atlasui/scroll-based-text-reveal.tsxatlasui.dev/r/scroll-based-text-reveal.json

1"use client";
2 
3import { useRef } from "react";
4 
5import { motion, useScroll } from "motion/react";
6 
7interface ScrollBasedTextRevealProps {
8  text: string;
9}
10 
11export const ScrollBasedTextReveal = ({ text }: ScrollBasedTextRevealProps) => {
12  const container = useRef(null);
13  const { scrollYProgress } = useScroll({
14    target: container,
15    offset: ["start 0.8", "start 0.3"],
16  });
17 
18  return (
19    <div className="flex flex-col items-center justify-center">
20      <motion.p
21        style={{ opacity: scrollYProgress }}
22        ref={container}
23        className="max-w-5xl text-center text-5xl font-bold"
24      >
25        {text}
26      </motion.p>
27    </div>
28  );
29};

What it pulls in

npm packages

motion

Files it writes

registry/react/atlasui/scroll-based-text-reveal.tsx