Components
Apple keynote-style text animation where each word individually transitions from dimmed and blurred to sharp and vivid as you scroll through. Uses scroll-linked per-word opacity, color, and blur transforms — no keyframes, purely driven by scroll position. Supports multiple paragraphs. Pass any text and customize highlight/dim colors.
Loading preview...
import { Component as ScrollRevealText } from "@/components/ui/scroll-reveal-text";
const manifesto = `We believe the best tools disappear. They don't ask for attention — they give it back.
Every pixel, every interaction, every millisecond matters. We obsess so you don't have to.
Built for the makers who refuse to ship anything less than extraordinary.`;
export default function Demo() {
return (
<div className="bg-background">
{/* Spacer so scroll has room */}
<div className="flex items-center justify-center h-[60vh] px-6">
<p className="text-muted-foreground text-lg text-center max-w-md">
↓ Scroll down to reveal
</p>
</div>
<ScrollRevealText text={manifesto} />
{/* Bottom spacer */}
<div className="h-[60vh]" />
</div>
);
}