Skip to main content
Use this reference when browser editor controls are not enough: you need to write a grade into HTML, apply it from automation, animate a supported property, or limit an effect to a composited region. For visual correction and everyday browser editor use, start with Color grading.

​
Persist a grade

The browser editor and the CLI store the resolved grade in data-color-grading:
Apply the same validated payload from the CLI:
Add --dry-run --json to inspect the change without writing it. Use --clear to remove the treatment.

​
Grade a whole lane

A camera cut into hundreds of clips takes one grade, set once. Put the grade on an <hf-color-group> and point each clip at it with data-color-group:
  • data-color-grading on the group takes the same JSON as on a clip. Editing it regrades every member, in preview and in render.
  • data-color-group goes on the <video>, <img> or <canvas>. Membership is held by the member, so a deleted clip simply leaves the group.
  • A clip’s own data-color-grading wins. It replaces the group’s grade for that clip, so tamer-03 above gets only its exposure lift, not skin-soft.
  • data-color-group="" is no group, and a group id with no <hf-color-group> element leaves the clip ungraded. Removing the element, or its data-color-grading, ungrades its members.
  • Groups do not nest. Group ids share the element-id namespace.
  • The element is inert: the runtime injects hf-color-group{display:contents!important}. Close it with </hf-color-group>, since HTML ignores /> on a custom element.

​
Animate a supported property

Nine grading properties expose CSS custom properties that a paused timeline can tween directly:
Once set, a property overrides the payload’s value for that control, whether it comes from the element’s inline style, a stylesheet or a parent. Set it only on media you animate, starting at the value the tween begins from; leave it unset for a static grade. Then animate it on the registered timeline:
--hf-color-grading-intensity scales the primary correction, wheels, curves, selections, and LUT. It is not a master control for detail and effect families such as grain, halftone, bloom, tape, or CRT. Animate the specific exposed property and verify that it moves before relying on it.

​
Limit a grade to part of the frame

Grading selects pixels by value, not position. To treat one region, isolate it as its own media layer:
Use the original clip as the background plate. A subject-removed plate leaves a hole and can create a dark edge beneath a feathered cutout. A fixed clip-path works only when the subject barely moves; real movement needs a tracked matte produced outside HyperFrames.