Ticker Tape Background
Oversized, near-invisible ticker rows scrolling behind the fold as ambient texture.
DOM + CSS0 deps1 file · 2 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useMemo, useRef } from "react";
const ROWS = [
{ size: "text-5xl", opacityClass: "opacity-[0.06]", top: "10%", durationMul: 1, reverse: false },
{ size: "text-6xl", opacityClass: "opacity-[0.09]", top: "42%", durationMul: 1.5, reverse: true },
{ size: "text-4xl", opacityClass: "opacity-[0.05]", top: "74%", durationMul: 1.2, reverse: false },
];
/**
* SIZED BY ITS PARENT — the parent needs a height.
*
* This fills the box it is given: the canvas is absolutely positioned, so
* the wrapper has nothing in normal flow to derive a height from. Drop it
* into a plain section or a hero with no height set and it lays out at zero
* and renders nothing — no error, no warning, no console message, just an
* empty rectangle, which is the hardest kind of failure to go looking for.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Ticker Tape Background reuses the same seamless-loop track-doubling technique this library's foreground Marquee Ticker uses, but inverts the intent entirely: instead of one row of legible, readable text, it stacks three oversized rows at near-invisible opacity, each scrolling at a different speed and one in reverse, so the result reads as ambient wallpaper texture rather than a message. Cost is pure CSS transform animation on three flex rows — no canvas, no JavaScript loop, and the browser compositor handles it indefinitely. Because the rows sit at 5-9% opacity behind a dedicated dark base, foreground copy is set in a fixed light color that was never designed to compete with the ticker text, and it doesn't need to: the low opacity does the contrast work by itself. The caveat: it depends entirely on real display type rendering large and bold — a font stack without a strong display face will read as a thin gray smear rather than the bold typographic texture this is meant to be.
