proNew125 lines · framer-motion

Text Marquee Velocity

A ticker that feels the scroll. Two full-width ticker rows of a repeated phrase, moving in opposite directions, that sprint briefly whenever the page scrolls and settle back to a steady drift the rest of the time.

Use it for: A section break or a brand strip between features that should feel physically connected to how someone scrolls the page.
Themes: Light + dark
License: Commercial use

Live

MADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVEMADE TO MOVE

tsx

"use client";

import * as React from "react";
import { useReducedMotion } 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: two ticker rows of a repeated phrase that
 * never stop moving, and kick into a brief sprint whenever the page scrolls
 * (direction and amount of the kick follow scroll direction and speed).
 * At rest (no scroll) it still drifts at its base speed, so it reads fine
 * in a static preview.
 */

export interface TextMarqueeVelocityProps {

The rest is in Pro.

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

Get Pro

How it behaves

→Position is driven by requestAnimationFrame, not CSS keyframes, so scroll velocity can add directly to the base speed.
→Listens to window scroll (passive) and converts the delta into a short-lived velocity boost that decays every frame.
→Row two runs at a slower base speed in the opposite direction, so the two rows never feel mechanically identical.
→Pauses its per-frame work while the section is off-screen or the tab is hidden.
→prefers-reduced-motion stops both rows and shows the phrase as a static, duplicated line.

Accessibility

✓Decorative diamond separators are aria-hidden.
✓The repeated phrase is treated as decorative typography, not a list; nothing here requires a screen reader to enumerate it.
✓Honours prefers-reduced-motion by freezing the rows.
✓Honours prefers-reduced-motion.