Video Backdrop Hero
A cinematic full-bleed motion backdrop, built entirely from CSS and Framer Motion.
- Category
- Heroes
- Added
- 2026-09-01
- Deps
- 2
- 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.
Your next release, in motion.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Aurora Gradient Field
backgroundsSoft, hue-shifting color fields that drift behind a hero like ambient aurora light.
Bento Preview Hero
heroesCopy beside an asymmetric bento grid of small feature-glimpse tiles.
Product Shot Hero
heroesA dominant framed app-window screenshot mock with the headline as a caption above it.