DUOTONE
MOTION
A grayscale + contrast filter flattens the video's own color, then hard-light blend-mode lets it react with what's behind it. Diagonal masks on the before and after layers cut solid color blocks behind and in front of the video, at different angles, sandwiching it between two graphic stripes.
Code
<style>
.duotone-motion {
--steam-block-media-aspect-ratio: 16 / 9;
--steam-block-hero-align-items: flex-start;
--steam-block-content-text-align: left;
--steam-block-hero-content-width: 100%;
--steam-block-media-filter: grayscale(1) contrast(1.15);
--steam-block-media-border-radius: 1.25rem;
--steam-block-media-blend-mode: hard-light;
--steam-block-media-before-background: #384f7b;
--steam-block-media-before-mask: linear-gradient(30deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 63%,rgba(255,255,255,0) 63%, rgba(255,255,255,0) 75%,rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 81%,rgba(255,255,255,0) 81%, rgba(255,255,255,0) 85%,rgba(0, 0, 0,1) 85%, rgba(0, 0, 0,1) 90%,rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%);
--steam-block-media-after-opacity: .5;
--steam-block-media-after-blend-mode: multiply;
--steam-block-media-after-background: #384f7b;
--steam-block-media-after-mask: linear-gradient(120deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 63%,rgba(255,255,255,0) 63%, rgba(255,255,255,0) 75%,rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 81%,rgba(255,255,255,0) 81%, rgba(255,255,255,0) 85%,rgba(0, 0, 0,1) 85%, rgba(0, 0, 0,1) 90%,rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%);
}
/* Below the component's stacking breakpoint (768px default), content
moves under the media instead of overlaying it, so the white text
above needs its own dark backdrop. */
@media (max-width: 47.99rem) {
.example-duotone {
--steam-block-media-border-radius: 1.25rem 1.25rem 0 0;
--steam-block-content-background: #111;
--steam-block-content-padding: 1.5rem;
}
}
</style>
<steam-block class="duotone-motion" type="hero">
<video slot="media" autoplay muted loop>...</video>
<div slot="content"><h1>Duotone motion</h1></div>
</steam-block>