ZafiroBETA
\u2190 Back to component list

UI component

HeroVideo

Hero section primitive for cinematic intros. It supports poster-only mode or autoplay video, configurable overlay gradients, typography overrides, bullet tags and CTA alignment.

Live demo

Live example

This is the real component instance used by the site, rendered here in isolation.

Live demo loads after page hydration.

Quick start

Minimal setup with poster image and a CTA.

<HeroVideo
  title="Build in Browser"
  subtitle="A cinematic hero with configurable media and overlay."
  posterSrc={heroPoster}
  primaryCta={{ label: "Open Editor", href: "/isle-lab" }}
  bullets={["No install", "Fast start", "Local saves"]}
  contentHorizontalAlign="right"
  contentVerticalAlign="bottom"
/>

Full source

Stable source snapshot is not published for this component yet.

Implementation notes

  • posterSrc and primaryCta are required.
  • Video is optional (mp4Src/webmSrc) and falls back to poster.
  • Alignment and overlay props are tuned for wide hero sections.
  • Full source snapshot for HeroVideo is not published yet.