Text Gradient Scroll

Word-by-word color reveal as you scroll. Each word independently tracks scroll progress and transitions from muted gray to your custom gradient colors.

scrolltextgradientframer-motion

Installation

bash

# Copy text-gradient-scroll.tsx to your project
cp components/ui/text-gradient-scroll.tsx your-project/components/ui/text-gradient-scroll.tsx

How to use

tsx

import { TextGradientScroll } from "@/components/ui/text-gradient-scroll";

tsx

<TextGradientScroll
  text="Each word lights up as you scroll through this section"
  fromColor="#818cf8"
  viaColor="#c084fc"
  toColor="#f472b6"
  sizeClass="text-3xl md:text-5xl"
/>

Dependencies

framer-motion

Exports

TextGradientScroll

File

components/ui/text-gradient-scroll.tsx

Preview

↓ Scroll down to see the effect

Eachwordlightsupasyouscrollthroughthissectioncreatingabeautifulreadingexperiencethatkeepsusersengagedandwantingtoreadmore