Scene 01
The long dissolve
Poster paints instantly, the loop slips in behind it.
Now screening
Some stories
only move
A short muted loop plays behind a poster that painted first. The film is atmosphere; every word you need lives in the text layer.
The opener is a trailer, not a slide. But the trailer must never cost the load — the poster leads, the video follows.
The Reel
Motion is the message
A left-anchored scrim keeps the copy legible while the footage breathes behind it. Same loop, only in view, only when it earns its bytes.
01Craft
A trailer that respects the load
The poster is the LCP; the video is progressive enhancement, played only in view and never with sound.
Poster first
A small AVIF poster paints as the LCP. The <video> carries preload=none, so nothing heavy blocks the first frame.
In-view play
An IntersectionObserver calls load() and play() only when the hero enters view, and pauses it when it leaves.
Muted loop
muted + loop + playsInline is what lets browsers autoplay at all. The loop is short and seams without a jump-cut.
Graceful fallback
prefers-reduced-motion and Save-Data never autoplay — the poster still simply stays. Mobile can show poster only.
<video poster="poster.avif" muted loop playsInline preload="none" aria-hidden>
<source src="aurora.webm" type="video/webm" />
<source src="aurora.mp4" type="video/mp4" />
</video>
// play only in view
new IntersectionObserver(([e]) =>
e.isIntersecting ? v.play() : v.pause()
).observe(v);02Palette
Graded like film
A near-black base, a raised surface, one warm gold pulled from the footage, and steel for the quiet parts.
#05060A
Base
The grade
#141821
Surface
Panels
#F3EFE8
Paper
Solid-section text
#E4C063
Gold
The one accent
#9AA6B8
Steel
Secondary
03Scenes
Poster-backed, never autoplay below the fold
Scene 02
Held on the wide
Slow motion carries the mood; nothing jump-cuts.
Scene 03
Fade to the fold
Below the hero, quiet solid sections take over.
04Components
Legible over any frame
Gold for the one action, frosted translucency for everything else, so controls never hide the footage.
05Guidelines
Do / Don't
Do
- +Poster frame as the LCP; video is enhancement
- +preload=none; load and play only in view
- +muted loop playsInline; a seamless short loop
- +Scrim every text-over-video for 4.5:1
- +Dark grade with a single warm-gold accent
- +Fallback to the poster on reduced-motion / Save-Data
Don't
- ×Make the video the LCP or omit the poster
- ×preload=auto or auto-load a heavy file
- ×Bake critical information into the video
- ×Autoplay with sound
- ×Put text on footage with no scrim
- ×Use fast cuts or a loop that doesn't seam