Helpers

`data-size="auto"`

Set on the element placed in the media slot to make it keep its intrinsic size instead of stretching to fill the media area:

<steam-block order="flip">
  <img data-size="auto" slot="media" src="icon.svg">
  <div slot="content">
    <h2>The data-size helper</h2>
    <p>The media won't stretch to fill its parent.</p>
  </div>
</steam-block>

Combine it with

--steam-block-media-align-items
--steam-block-media-margin

to position the now-unstretched media within its area.

Spacing multiple steam-blocks

Add this once, on your own site’s stylesheet, and every pair of adjacent steam-block elements gets consistent spacing without a wrapper or margin utility on each one individually:

steam-block + steam-block {
  margin-top: var(--steam-block-spacer, 5vw);
}

--steam-block-spacer isn’t read anywhere inside steam-block.js, it’s just the variable name this pattern is documented under, set it (or override the 5vw fallback above) wherever you’d set any other --steam-block-* variable, on the block itself, a shared ancestor, or :root.

`steam-emerge`

A small standalone script (steam-emerge.js) that toggles a class on the element (emerge by default) as it scrolls into or out of the viewport for CSS-driven reveal animations. It ships separately from steam-block.js (see Installation for load order).

Enable it with emerge="true" on the steam-block element, then control the behavior with:

Attribute	Values	Description
`emerge-offset`	number (px)	Offset added to the trigger point.
`emerge-view`	`enter`, `full` (default)	`enter` triggers as soon as the element enters the viewport; the default waits for full visibility.
`emerge-keep`	`true`	Once triggered, keeps the class instead of removing it when the element leaves the viewport.
`emerge-class`	string	Class name toggled instead of `emerge`. Point it at a class an animation library or your own design system already understands, instead of writing `.emerge` CSS by hand.

<steam-block emerge="true" emerge-view="enter" emerge-offset="200">
  ...
</steam-block>

<style>
  steam-block[emerge] { opacity: 0; transition: opacity .6s ease; }
  steam-block[emerge].emerge { opacity: 1; }
</style>

The class toggle is the only thing steam-emerge does. What happens visually (a fade, a slide, a scale) is entirely up to the CSS you write for that .emerge class. With the emerge-class attribute you can hook up whatever animation library or design system. See the scroll reveal examples for four of them live.

The example above animates the whole host element. To animate just the content box, or just the media, instead, pair the class toggle with --steam-block-content-transition / --steam-block-media-transition and a variable that actually changes something on that box, e.g.:

<steam-block emerge="true">
  ...
</steam-block>

<style>
  steam-block[emerge] { --steam-block-content-opacity: 0; --steam-block-content-transition: opacity .6s ease; }
  steam-block[emerge].emerge { --steam-block-content-opacity: 1; }
</style>

--steam-block-content-transition (or --steam-block-media-transition) has to be set before the property it’s watching changes for the transition to actually play, hence setting it in the same [emerge] rule as the starting --steam-block-content-opacity value, not only in the .emerge rule.

<steam-block emerge="true" emerge-class="is-visible">
  ...
</steam-block>

Two well known libraries this pairs with directly, both trigger their animations by having a single specific class present, exactly what emerge-class hands them:

Animate.css ships ready made keyframe animations as classes, animate__fadeInUp, animate__zoomIn, and dozens more, each one starts playing the moment it’s present alongside the library’s base animate__animated class. Keep animate__animated on the element from the start, then set emerge-class="animate__fadeInUp" (or whichever effect), steam-emerge adds the second class on scroll and the animation plays right on cue, no other JS involved.
AOS normally does its own scroll watching, but the actual animation is just CSS keyed off one class, aos-animate, once it’s present alongside a data-aos="fade-up" style attribute selecting the effect. Set that attribute for the preset, emerge-class="aos-animate" for the trigger, and steam-emerge drives AOS’s own animation styles without needing AOS’s JS on the page at all.

Helpful resources

None of this is steam-block specific, just a short list of outside tools worth knowing about when reaching for the more visual CSS variables.

Placeholder images

Picsum is what every photo across this site’s own demos actually loads, real photos at a fixed size and id rather than a broken placeholder box, so demo markup can be copied straight across.

Backgrounds and gradients

For --steam-block-background, --steam-block-media-before-background, --steam-block-media-after-background:

CSS Gradient builds a gradient value visually.
BG Jar and Get Waves generate ready made SVG wave shapes for the same variables.
Gradient Magic for when you don’t want an image but a nice graphic with CSS in the background.

Clip paths

For --steam-block-media-clip-path:

Repeating patterns

For --steam-block-media-mask, --steam-block-media-after-border-image:

These generate tileable SVGs, the same idea behind the Pattern Knockout and Patterned Frame examples.

Turning an SVG into a variable value

The pattern and shape generators above hand back an SVG file, not a ready to paste CSS value.

SVG OMG strips it down first
SVG to URI encoder then turns it into the url("data:image/svg+xml,...") string these variables actually expect
Double to single quote converter helps when an SVG’s own quotes need to change to nest cleanly inside that string