diff --git a/docs/concepts/variables.mdx b/docs/concepts/variables.mdx index 5af7c0f9b..99e8f4d26 100644 --- a/docs/concepts/variables.mdx +++ b/docs/concepts/variables.mdx @@ -83,14 +83,15 @@ Pass assets as URL references your composition resolves at render time; don't in Media color grading can also read exact variable references inside `data-color-grading`. Use `$name` or `${name}` as the entire value for a field; the runtime resolves it from the current composition's variables before applying -the shader grading: +the shader grading, finishing details, blur/pixelate effects, and optional LUT: ```html compositions/hero.html
@@ -104,7 +105,9 @@ the shader grading: data-color-grading='{ "preset":"$gradingPreset", "intensity":"$gradingIntensity", - "adjust":{"exposure":"${gradingExposure}"}, + "adjust":{"exposure":"${gradingExposure}","vibrance":"$gradingVibrance"}, + "details":{"vignette":0.15,"vignetteFeather":0.72,"grain":0.08,"grainSize":0.25}, + "effects":{"blur":0.1}, "colorSpace":"rec709" }' > diff --git a/docs/docs.json b/docs/docs.json index 4b67d959a..986d6b003 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -78,6 +78,7 @@ "guides/skills", "guides/authentication", "guides/video-components", + "guides/color-grading", "guides/html-in-canvas", "guides/website-to-video", "guides/figma", diff --git a/docs/guides/color-grading.mdx b/docs/guides/color-grading.mdx new file mode 100644 index 000000000..5fc41b2d8 --- /dev/null +++ b/docs/guides/color-grading.mdx @@ -0,0 +1,224 @@ +--- +title: Color Grading +description: "Apply real-time color grading, presets, LUTs, vignette, grain, blur, and pixelate to video and image media in Studio and final renders." +--- + +HyperFrames Studio can color grade project-local `