media-treatment: no canonical way to treat a frame that has no <img>/<video>

Author: srinvasmishraCreated Sep 16, 2026Updated Sep 16, 2026

What I'm trying to do

Apply the canonical finishing treatments — details.vignette, details.grain — to a code-drawn frame that contains no <img> or <video>.

Why it doesn't work today

media-treatment --capabilities --json on 0.8.41 reports:

json
"targetTags": ["img", "video"]

and --selector is documented as "Unique CSS selector for one <img> or <video>". The realtime shader binds a texture from the media element, so there is nothing to attach a treatment to when the frame is CSS/DOM — typography, an SVG chart, a drawn diagram, a solid colour field.

The media-use skill is explicit that recreating these in CSS is the wrong answer (references/media-treatments.md): "Use the canonical details/effects fields for vignette, grain, blur, pixelate, and related primitives. Do not duplicate them with CSS filters, SVG turbulence, opacity, or decorative DOM overlays." For a media-bearing frame, agreed and adopted. For a frame with no media, there is no canonical path, so the only way to give a code-drawn scene the same film grain and edge falloff as the shot next to it is the thing the skill tells us not to do.

Concrete case

A composition whose scenes alternate between a full-bleed <video> and a code-drawn chart, both wanting the same 0.18 grain and 0.3 vignette so the two read as one film. The video scene can have it; the chart scene cannot, and matching it in CSS drifts from the shader's look (different noise function, different falloff curve) and is invisible to Studio.

What would help

Any one of these, roughly in order of preference:

  1. media-treatment --selector accepting an ordinary element and treating its rendered subtree (html2canvas-style or a compositor pass) for the finishing family at least.
  2. A frame- or scene-level treatment target — a treatment declared once on .clip or on the composition, applied over everything inside it.
  3. A documented, blessed CSS recipe for details.vignette / details.grain that is guaranteed to match the shader's output, so recreating them in CSS stops being an anti-pattern for the one case where the shader cannot reach.

Environment

hyperframes 0.8.41, local render route, Chrome from hyperframes browser.