shadimage

Hero Video 1

Solace UI hero video component variation 1.

src/registry/components/hero-video/one/index.tsx

import { HeroVideoDefault } from "@/registry/components/hero-video/hero-video-default";
import React from "react";

export default function HeroVideoOne() {
    return (
        <div className="flex flex-col items-center justify-center py-12">
            <HeroVideoDefault
                className="dark:hidden block"
                videoSrc="https://www.youtube.com/embed/cjZjqP3EqdE?si=wXqy8Rpcnwll8Grr&amp;start=360"
                thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
                thumbnailAlt="Hero Video"
                enableSound={false}
            />
            <HeroVideoDefault
                className="hidden dark:block"
                videoSrc="https://www.youtube.com/embed/cjZjqP3EqdE?si=wXqy8Rpcnwll8Grr&amp;start=360"
                thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
                thumbnailAlt="Hero Video"
                enableSound={false}
            />
        </div>
    );
}
Where it goes
hero

DependenciesBundle weight · medium

animation
motion
icons
lucide-react