❤️ Support our project - Your donation helps us continue developing awesome tools!


Docs
Hero Video Dialog

Hero Video Dialog

A hero video dialog component.

Hero Video

Installation

npx nyxb@latest add hero-video-dialog

Examples

Top-in-bottom-out

Hero Video

Props

PropTypeDescriptionDefault
animationStylestringAnimation style for the dialog"from-center"
videoSrcstringURL of the video to be played-
thumbnailSrcstringURL of the thumbnail image-
thumbnailAltstringAlt text for the thumbnail image"Video thumbnail"

Animation Styles

The animationStyle prop accepts the following values:

  • "from-bottom": Dialog enters from the bottom and exits to the bottom
  • "from-center": Dialog scales up from the center and scales down to the center
  • "from-top": Dialog enters from the top and exits to the top
  • "from-left": Dialog enters from the left and exits to the left
  • "from-right": Dialog enters from the right and exits to the right
  • "fade": Dialog fades in and out
  • "top-in-bottom-out": Dialog enters from the top and exits to the bottom
  • "left-in-right-out": Dialog enters from the left and exits to the right

Note

  • If using a YouTube video, make sure to use the embed version of the video URL.