feat: Add video/image filters (grayscale, saturation, contrast)

[annzrva]

Problem

When compositing scenes that require a B&W background with a color overlay on top (picture-in-picture style), there's currently no way to desaturate a video/image within TSX. Users have to fall back to ffmpeg post-processing.

Use Case

Club Silencio project: a color close-up of a dancing woman overlaid on a desaturated B&W version of the same dance scene. Currently requires:

colorchannelmixer=.3:.4:.3:0:.3:.4:.3:0:.3:.4:.3:0
eq=contrast=0.8:brightness=-0.05

Proposed Solution

Add a filter or style prop to Image(), Video(), or a new <Filter> wrapper component:

// Option A: prop on media
const bwScene = Video({
  model: varg.videoModel("kling-v3"),
  prompt: { ... },
  filter: "grayscale"
})

// Option B: wrapper component
<Clip duration={5}>
  <Filter grayscale contrast={0.8} brightness={-0.05}>
    {danceVideo}
  </Filter>
  <Overlay left="30%" top="5%" width="40%">
    {colorOverlay}
  </Overlay>
</Clip>

Useful filters

• grayscale / desaturate — B&W conversion
• contrast — adjust contrast
• brightness — adjust brightness
• sepia — vintage tone
• blur — gaussian blur

Implementation

These map directly to ffmpeg filter chains that editly already supports. The renderer would inject the appropriate -vf flags.

Workaround

Currently using nano-banana-pro/edit to regenerate the image/video as B&W, which costs credits and may alter the content.