Immersive 3 - Full-screen video background heroPro
A full-viewport hero with a muted, looping YouTube video covering the background, a dark scrim, a headline with two calls to action and a play/pause toggle; it falls back to a poster image when motion is reduced or the video is paused. Use it for launches, events or brand pages that need atmosphere above the fold.
About Immersive 3
A full-viewport hero with a muted, looping YouTube video covering the background, a dark scrim, a headline with two calls to action and a play/pause toggle; it falls back to a poster image when motion is reduced or the video is paused. Use it for launches, events or brand pages that need atmosphere above the fold.
Immersive 3 is a pro immersive block for React, built on shadcn/ui and Tailwind CSS. It ships as 93 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- immersive
- video
- background
- hero
- full screen
- youtube
- poster
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/immersive-03Dependencies installed automatically: lucide-react.
Uses: button, reveal, use-reduced-motion, utils.
Usage
import Immersive03 from "@/components/blocks/immersive-03"
export default function Page() {
return <Immersive03 />
}