Hero Video Sound

PreviousNext

An immersive hero video dialog ideal for landing pages and product highlights

Docs
solaceuiui

Preview

Loading preview…
app/docs/hero-video/hero-video-sound.tsx
import { HeroVideo } from "@/components/docs-components/hero-video";
import React from "react";

export function HeroVideoSound() {
  return (
    <div className="flex flex-col items-center justify-center py-12">
      <HeroVideo
        className="dark:hidden block"
        videoSrc="https://www.youtube.com/embed/SAnLQABTF5A?si=oiXgKWLe7PLKv0Ev"
        thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
        thumbnailAlt="Hero Video"
        soundSrc="/sounds/whoosh-motion.mp3"
        enableSound={true}
      />
      <HeroVideo
        className="hidden dark:block"
        videoSrc="https://www.youtube.com/embed/SAnLQABTF5A?si=oiXgKWLe7PLKv0Evb"
        thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
        thumbnailAlt="Hero Video"
        soundSrc="/sounds/whoosh-motion.mp3"
        enableSound={true}
      />
    </div>
  );
}

Installation

npx shadcn@latest add @solaceui/hero-video-sound

Usage

import { HeroVideoSound } from "@/components/ui/hero-video-sound"
<HeroVideoSound />