Scroll Background

Backgrounds

About

A background that blends from one color to the next as the page or a scroll box scrolls, built with CSS scroll-driven animations and no JavaScript.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Background to your project and fits it to your theme.

Code

How Scroll Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ScrollBackground } from "@/components/ui/scroll-background";

const watches = [
  { name: "Morning watch", time: "04:00 to 08:00" },
  { name: "Forenoon watch", time: "08:00 to 12:00" },
  { name: "Afternoon watch", time: "12:00 to 16:00" },
  { name: "Dog watches", time: "16:00 to 20:00" },
  { name: "First watch", time: "20:00 to 00:00" },
  { name: "Middle watch", time: "00:00 to 04:00" },
];

export default function ScrollBackgroundDemo() {
  return (
    <div className="flex h-[28rem] w-full items-center justify-center bg-background p-6">
      <div
        className="h-80 w-full max-w-md overflow-y-auto rounded-lg border"
        tabIndex={0}
        role="region"
        aria-label="Watches"
      >
        <ScrollBackground
          timeline="nearest"
          colors={[
            "var(--background)",
            "color-mix(in srgb, #0ea5e9 24%, var(--background))",
            "color-mix(in srgb, #f59e0b 24%, var(--background))",
            "color-mix(in srgb, #6366f1 24%, var(--background))",
          ]}
          className="text-foreground"
        >
          {watches.map((watch) => (
            <div
              key={watch.name}
              className="grid h-32 content-center gap-1 px-6"
            >
              <p className="text-2xl font-semibold">{watch.name}</p>
              <p className="font-mono text-sm text-muted-foreground">
                {watch.time}
              </p>
            </div>
          ))}
        </ScrollBackground>
      </div>
    </div>
  );
}