proNew119 lines · framer-motion

Scroll Text Mask

Colour follows the scrollbar. A full-width, pinned scroll section with an oversized headline sitting dim in the background and a fully-coloured copy that wipes across it left to right as the section's own scroll progress advances.

Use it for: A statement section that wants a single, satisfying scroll-tied payoff instead of a fade or slide.
Themes: Light + dark
License: Commercial use

Live

Watch it fill in

The wipe tracks this section's own progress, so it rests exactly where you leave it.

tsx

"use client";

import * as React from "react";
import { motion, useMotionValue, 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 scroll section: an oversized headline sits dim in the
 * background; a second, fully-coloured copy wipes across it left to right
 * as the section's own scroll progress advances.
 */

export interface ScrollTextMaskProps {
  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

→The coloured copy is masked with a CSS mask-image linear gradient whose stop position is driven frame-by-frame by a section-scoped scroll progress value.
→The dim backdrop copy never moves; only the mask boundary does, so the wipe reads as colour filling in rather than text sliding.
→At rest the wipe sits at whatever point its progress last reached, which is always a complete, correct-looking frame — never a half-rendered glyph.
→autoplay sweeps the wipe back and forth on a timer when there's no scroll to drive it.
→prefers-reduced-motion renders the headline fully coloured immediately, no mask animation.

Accessibility

✓Both headline copies are aria-hidden and a single sr-only span exposes the text once to assistive tech.
✓Mask changes only opacity-equivalent visibility of colour, never the underlying DOM text, so nothing becomes unreadable mid-animation.
✓Honours prefers-reduced-motion by skipping the wipe.
✓Honours prefers-reduced-motion.