Blog wallpapers are here

Every Strata blog post can now sit on a backdrop of its own. Pick a calm color, a gradient, a subtle pattern, one of your own images, or a live HTML scene. The animated signal grid behind this post is one of those scenes. It is a WebGL shader that lives inside this document, and it recolors itself when you switch between light and dark.

Wallpapers live in the same blog: frontmatter as the rest of a post's design. Set one from the Post appearance panel, write it by hand, or ask your agent to do it for you.

Five kinds of wallpaper

Kind	What it gives you
Color	One quiet color for each scheme
Gradient	Linear or radial, with two to five color stops
Pattern	Dots, grid, lines, paper, topographic, or stars, tinted to taste
Image	Any image already in the post, referenced by name
HTML	A live scene from an `html` block in the post, with a static fallback

Every color takes a light and a dark value, so a post looks deliberate in both schemes.

What is running behind this post

The backdrop you are looking at is a single fragment shader drawn on one full-screen triangle. It paints a dot lattice on a 22 pixel pitch, then layers three kinds of motion on top:

A slow, domain-warped noise field that brightens and dims regions of the grid, like load moving across a cluster.
Packets of light that ride individual rows and columns with a fading tail. Some cross behind the article and come out the other side.
Pings that ripple outward from a node near the margins every few seconds.

The shader does not hardcode its colors. It reads the post's resolved accent and background, so the dark scheme glows cyan on near-black and the light scheme settles into blue dots on pale steel. This is the entire wallpaper setup for this post:

blog:
  accent: { light: "#0a5bd3", dark: "#6cd4ff" }
  background: { light: "#ffffff", dark: "#0c1017" }
  readingSurface: opaque
  wallpaper:
    html: signal-grid
    fallback:
      color: { light: "#ecf0f5", dark: "#06080b" }

signal-grid is the name of an html code block at the end of this document. Strata lifts it out of the article and runs it behind the page. The block declares uses="frontmatter" and reads the design like this:

function applyDesign() {
  const source = strata.data.get('frontmatter');
  if (source?.kind !== 'frontmatter') return;
  recolor(source.values['blog.background'], source.values['blog.accent']);
}
applyDesign();
window.addEventListener('strata:data', applyDesign);

Values arrive already resolved for the reader's current scheme, and strata:data fires again whenever they change. Adjust the accent in the appearance panel and the preview retints on the spot.

Built to stay out of the way

A wallpaper is decoration, and it is designed to behave like it.

The article stays readable. HTML wallpapers sit under an opaque reading surface, and Strata checks that body text and links clear 4.5:1 contrast in both schemes before a post can be published.
The scene is sandboxed. It runs in the same isolated frame as other HTML blocks. It cannot take clicks or focus, and it sees only resolved design values, never the rest of your document.
Readers stay in control. Readers who prefer reduced motion or reduced data get the static fallback. So do low-memory devices, browsers with HTML previews turned off, and any scene that fails to start. The animation stops while the tab is hidden, and print and PDF leave the wallpaper out.
Your words stay plain text. The article body is unchanged for search engines, feed readers, and AI tools. Nothing a reader needs lives in the wallpaper.

Design it with your agent

Blog design is structured YAML with explicit field names and validation, which makes it easy for an agent to work on. Connect any MCP client to Strata and describe what you want:

Give this post a technical look: a dotted wallpaper tinted to match the accent, an opaque reading surface, and a summary under 160 characters. Fix any contrast findings and leave it as a draft.

The agent edits the same frontmatter the appearance panel does. Every edit comes back with validation findings, so a low-contrast accent or a misnamed image is caught before you publish. For HTML wallpapers, the agent can write the scene too. An agent wrote the one behind this post.

Publishing locks in the look

Publishing captures the article and its complete resolved design. Later draft edits or profile theme changes will not restyle a published post. When you want a new look to go live, publish again.

Try it

Open any draft, choose Post appearance, and pick a wallpaper. Or add a wallpaper field under blog: in the post's frontmatter. The blog design reference lists every field, pattern name, and font.