Video Backdrop Hero
A cinematic full-bleed motion backdrop, built entirely from CSS and Framer Motion.
DOM + CSS2 deps1 file · 2 KB TSX
Props
"use client";
// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale. The "video" backdrop is
// pure CSS/Framer Motion — no video file, no network request.
import { Play } from "lucide-react";
import { motion } from "framer-motion";
function CinematicBackdrop() {
return (
<>
<motion.div
aria-hidden="true"
className="absolute -left-32 top-0 -z-10 h-[32rem] w-[32rem] rounded-full bg-blue-600/30 blur-3xl"
animate={{ x: [0, 60, 0], y: [0, 40, 0] }}
transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
/>
<motion.div
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
The idea here is immersion: an always-dark, full-bleed backdrop that reads as motion footage even though nothing in it is a video file — two blurred color fields drift on long, slow loops and a faint scanline overlay sells the cinematic register. This suits a consumer launch, a brand moment, anything that wants to feel like a trailer rather than a form; it's the wrong register entirely for a utilitarian B2B tool where a moody dark hero reads as style over substance. The load-bearing implementation choice is doing the motion with two large blurred circles animated on x/y rather than an actual gradient-position animation — animating `background-position` on a large gradient is comparatively expensive to repaint, while translating two blurred divs is cheap and GPU-composited. The backdrop is locked to black/white regardless of site theme, since a video backdrop that flips to a white background in light mode stops looking like footage. Caveat: the scanline overlay is a decorative texture only — keep its opacity low or it competes with headline legibility.
