Ticker Tape Background

Oversized, near-invisible ticker rows scrolling behind the fold as ambient texture.

Proeditorialbrutalist

Category: Backgrounds
Added: 2026-09-01
Deps: none
Updated: 2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

BUILDSHIPITERATEREPEATBUILDSHIPITERATEREPEATBUILDSHIPITERATEREPEAT

Now shipping

Ambient ticker rows behind the fold

Props

Words (comma separated)

Cycle (s) — higher is slower38

Overall opacity1

No runtime dependencies

"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
  // ---------------------------------------------------------------
}

Notes

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.