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.
"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>
);
}