Components
A reusable animated banner pattern built from a short muted video loop with a poster fallback, a gradient overlay that fades from a solid color on the text side to transparent over the image, an extra hover/focus depth overlay, and a compact content layer with a title, balanced subtitle, call to action, and a live DD:HH:MM:SS countdown. Fully prop-driven (video, poster, title, subtitle, CTA, deadline, overlay color) and dependency-free.
npx shadcn@latest add https://21st.dev/r/dqnamo/animated-bannerLoading preview...
"use client";
import { useState } from "react";
import { AnimatedBanner } from "@/components/ui/animated-banner";
export default function Default() {
// Fix the countdown target once, starting at 16d 04h 47m 22s.
const [deadline] = useState(
() => new Date(Date.now() + (((16 * 24 + 4) * 60 + 47) * 60 + 22) * 1000),
);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-neutral-100 p-8">
<div className="w-full max-w-2xl">
<AnimatedBanner
ctaLabel="Explore odds"
deadline={deadline}
href="#"
posterSrc="https://www.dqnamo.com/images/home/world-cup-2026.jpg"
subtitle="Live odds for the winner, golden boot, groups, and every match."
title="World Cup 2026"
videoSrc="https://www.dqnamo.com/videos/home/world-cup-2026.mp4"
/>
</div>
</div>
);
}