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:
"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:
media-treatment --selector accepting an ordinary element and treating its rendered subtree
(html2canvas-style or a compositor pass) for the finishing family at least.- A frame- or scene-level treatment target — a treatment declared once on
.clip or on the
composition, applied over everything inside it.
- 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.
What I'm trying to do
Apply the canonical finishing treatments —
details.vignette,details.grain— to a code-drawnframe that contains no
<img>or<video>.Why it doesn't work today
media-treatment --capabilities --jsonon 0.8.41 reports:and
--selectoris documented as "Unique CSS selector for one<img>or<video>". The realtimeshader 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-useskill is explicit that recreating these in CSS is the wrong answer(
references/media-treatments.md): "Use the canonicaldetails/effectsfields 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, bothwanting 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:
media-treatment --selectoraccepting an ordinary element and treating its rendered subtree(
html2canvas-style or a compositor pass) for the finishing family at least..clipor on thecomposition, applied over everything inside it.
details.vignette/details.grainthat is guaranteed tomatch 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.