proNew91 lines · framer-motion

Text Gradient Scroll

Colour that keeps sweeping through the copy. A full-width section with a headline filled by a continuously sweeping gradient, backed by an oversized ghost copy of the same words that nudges left or right with the page's own scroll.

Use it for: A mid-page statement or pricing-section lead-in that wants colour and depth without a background image.
Themes: Light + dark
License: Commercial use

Live

Colour in motion

Gradients that never sit still

The fill keeps sweeping on its own loop; the ghost type behind it answers to the page scroll.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion, useScroll, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width kinetic text section: a huge headline filled with a moving
 * gradient sheen, with an oversized ghost copy behind it that drifts with
 * the page's own scroll (clamped to this section, so it rests nicely too).
 */

export interface TextGradientScrollProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Headline fill uses a background-clip: text gradient built from a chosen colour pair plus the foreground tone, animated via background-position on an infinite CSS loop.
→A large, near-invisible ghost copy of the headline sits behind it and tracks the section's own scroll progress (useScroll with target), drifting a few percent left or right.
→Ghost drift is clamped to this section's scroll range, so the section still looks correct before or after it's been scrolled.
→speed controls the seconds per gradient sweep; duo swaps the two accent colours the gradient is built from.
→prefers-reduced-motion renders a flat accent-coloured headline and freezes the ghost copy in its resting position.

Accessibility

✓The ghost headline is aria-hidden and purely decorative; the real heading carries the text content once.
✓Gradient-filled text keeps enough weight and size to stay legible even mid-sweep.
✓Honours prefers-reduced-motion by disabling both the gradient sweep and the scroll drift.
✓Honours prefers-reduced-motion.