hyperframes-card-news-work-video-cover

Card News Work: Video Cover

Role

video-coveris a card that opens with a scene of an actual place, site, product, or interface in motion. photo-coverThe goal is the same as, but the background is not an image but a short silent video.

Required structure

Due to HyperFrames renderer constraints, <video>is not placed inside a timed card. The video goes directly under the stage, and the text/gradient goes in a separate overlay card.

<video id="c-1-video" class="cover-video-media clip"
       src="assets/hook.mp4" poster="assets/hook-poster.jpg"
       data-start="0" data-duration="5" data-track-index="0"
       muted autoplay loop playsinline preload="auto"></video>

Prohibited

<div class="card clip video-cover"> Inside, timed <video data-start>is not placed.
The video and overlay card are not placed in the same data-track-index.
Do not use video with sound as is. The video is muted; if audio is needed, a separate <audio> Follow the rules.

CSS rules

.cover-video-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1350px;
  object-fit: cover;
  z-index: 0;
}
.card.video-cover {
  padding: 0;
  background: transparent;
  z-index: 1;
}
.video-cover .video-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.12) 0%, transparent 30%),
    linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.84) 34%, rgba(0,0,0,0.50) 62%, rgba(0,0,0,0.12) 78%, transparent 100%);
}

The bottom 35% where the copy is located is processed to be almost black. If the copy location is not at the bottom, change the gradient direction.

Text

.hook-kicker: on-site/brand/source label. It is fine to place it on a black box.
.hook-title .line: 64-76px, weight 800-900, white, line-height 1.15-1.25.
2 lines is the default. 3 or more lines is heavy in the feed.

GSAP

tl.from("#c-1-video", { scale: 1.08, duration: 1.4, ease: "power2.out" }, s);
tl.from("#c-1 .hook-kicker", { y: 18, opacity: 0, duration: 0.55, ease: "power2.out" }, s + 0.7);
tl.from("#c-1 .hook-title .line", { y: 42, opacity: 0, duration: 0.75, ease: "expo.out", stagger: 0.12 }, s + 1.0);
tl.from("#c-1 .page-indicator", { opacity: 0, duration: 0.5, ease: "power2.out" }, s + 2.0);

Check

In overview, only the overlay card is data-skill="video-cover"recorded as
The video is directly under the stage video.cover-video-media.clip
video track 0, overlay track 1
poster present
muted autoplay loop playsinline preload="auto" present