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 Word Reveal
atlas-ui/scroll-based-word-revealRemovedComponent
A text reveal effect which progressively reveals text word by word 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-word-reveal.jsonSource
1"use client";23import { useRef } from "react";45import { motion, useScroll, useTransform } from "motion/react";67interface ScrollBasedWordRevealProps {8 text: string;9}1011export const ScrollBasedWordReveal = ({ text }: ScrollBasedWordRevealProps) => {12 const container = useRef(null);13 const { scrollYProgress } = useScroll({14 target: container,15 offset: ["start 0.8", "start 0.3"],16 });1718 const words = text.split(" ");1920 return (21 <div className="flex flex-col items-center justify-center">22 <p23 ref={container}24 className="flex max-w-5xl flex-wrap items-center justify-center text-5xl font-bold"25 >26 {words.map((word, i) => {27 const start = i / words.length;28 const end = (start + i) / words.length;2930 const opacity = useTransform(scrollYProgress, [start, end], [0, 1]);3132 return (33 <span key={i} className="relative mt-1 mr-2">34 <span className="absolute opacity-10">{word}</span>35 <motion.span style={{ opacity }}>{word}</motion.span>36 </span>37 );38 })}39 </p>40 </div>41 );42};
What it pulls in
npm packages
