hero.video-fullscreen · Full-screen video with band

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.video-fullscreen". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A muted looping video fills the viewport; a pause control sits top-right; a solid accent band across the bottom carries the headline (1–8) and one CTA (10–12).
Slots
heroImage, cta2, headline, cta
Grid areas
video full · pause 11-12 · headline 1-8 · cta 10-12 (12-column grid, 1-based inclusive spans)
Notes
Video: <video autoplay muted loop playsinline preload="metadata" poster=...>, ≤ 6 MB, 8–15 s loop, no sound. A visible Pause button is required (WCAG 2.2.2). Under prefers-reduced-motion show the poster frame and do not autoplay. Lazy-load the source after first paint.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 0

Do

  • Fill the viewport (100svh) with a muted, looping, playsinline video and a poster image.
  • Show a Pause/Play control top-right at all times.
  • Run a solid accent band across the bottom with the headline (onAccent) in 1–8 and one CTA in 10–12.
  • Respect prefers-reduced-motion: show the poster frame, no autoplay.

Don't

  • Don't put text directly on the moving video.
  • Don't autoplay sound or use a video longer than 15 s per loop.
  • Don't block first paint on the video file; load it after the poster.

Phone width

  • Video at 9:16 or 4:5 crop (serve a smaller file), then the band below with headline and full-width CTA.
  • Keep the pause control.
● 0:42
Read case studies

We make complicated companies simple to choose

Start a project