Same element, same script tag, every time. Only the CSS variables change. Open any example for the live version, the exact markup and its custom properties, or check the documentation for the full attribute and CSS variable reference.
Blending, filtering, clipping & masking
Duotone motion
A grayscale video blended with hard-light, sandwiched between two diagonal color masks.
Color clash
Exclusion and difference blends inverting a photo inside two rounded clip-path cuts.
Pattern knockout
A striped SVG mask perforates the background, with a screen-blended glow behind the text.
Layered poster
Dot pattern masks, an arrow clip-path and rotated text on a gradient background.Split layouts with borders, shadows & negative white space
Patterned frame
A striped SVG tile traced around the media with border-image.
Floating card
A bordered split card with a hard, offset drop shadow.
Magazine overlap
A negative content margin pulls the headline over a fluid image, like an editorial spread, on phones too.
Floating in space
An image at its own intrinsic size, lifted out of the block with a negative margin, on phones too.
Zigzag
Alternating split blocks with no gap, so all media corners touch.Real embeds
YouTube embed
A YouTube iframe in the media slot, with a gradient over it and clickable controls.
Portrait video
A vertical Vimeo video kept in its own narrow column at its real aspect ratio.Text columns
Text columns
Several content slots laid out as a grid, no media at all.
Stat columns
A strip of key numbers built from the same content grid.
Hero columns
Content columns overlaid at the bottom of a fluid hero photo.Scroll reveal with steam-emerge
steam-emerge.js is an optional helper that toggles a class while a block is in view. What that class does is your own CSS. Load it before steam-block.js, see Helpers.
Fade and rise
Three blocks that fade in and rise into place one by one as you scroll down.
Content slide in
The media stays put while the text slides in from the side, every time the block comes back into view.
Media wipe
A hero photo wiped open with a clip-path and settling from a zoom, then the headline fades in.
Staggered columns
Content columns that pop in one after the other, triggered by a class of your own choosing.