# Effects reference

> All 52 effect classes grouped by family, with every prop name. Import from "framefields" or "framefields/effects".

```ts
import { Blur, Curves, FilmGrain } from "framefields";
// same classes: import { … } from "framefields/effects";
// factory form: Effect.blur({ strength: 9 })
```

Attach with `layer.withEffect(fx)`, `layer.withEffects([...])`, `comp.apply(fx)`, `comp.section({ effects })` or `Media.apply(fx)` — see [Effects](/docs/guides/effects/). Every prop is an `EffectProp<T>`: a plain value, a signal, or a function hook. Out-of-range values warn; `FRAMEFIELDS_STRICT_PROPS=1` makes them throw. Types, ranges and defaults for every prop are in the generated [effect catalog](https://github.com/gatewai-dev/framefields/blob/main/plugins/framefields/skills/framefields-effects/references/effects-catalog.md).

:::note[Scales]
Many strengths are **0–100**: `Vignette.strength` (default 50), `FilmGrain.strength` (15), `Blur.strength` (5). `ColorBalance` shifts are −100…100. Normalized positions and region radii (`centerX`, `centerY`, `radius`) are 0–1.
:::

## Grading

| Effect | Props |
| --- | --- |
| `Curves` | `curveType`, `master`, `red`, `green`, `blue`, `hueVsHue`, `hueVsSat`, `lumVsSat`, `satVsSat` |
| `Levels` | `master`, `red`, `green`, `blue` |
| `ColorBalance` | `shadows`, `midtones`, `highlights`, `preserveLuminosity` |
| `SelectiveColor` | `method`, `reds`, `yellows`, `greens`, `cyans`, `blues`, `magentas`, `whites`, `neutrals`, `blacks` |
| `GradientMap` | `stops`, `smooth`, `dither`, `opacity` |
| `ShadowsHighlights` | `shadowAmount`, `shadowTonalWidth`, `shadowRadius`, `highlightAmount`, `highlightTonalWidth`, `highlightRadius`, `colorCorrection`, `midtoneContrast` |
| `ApplyLUT` | `lutUrl`, `intensity` |
| `ExtractLUT` | `strategy`, `samplePoints` |
| `Modulate` | `hue`, `brightness`, `contrast`, `exposure`, `saturation`, `sepia` |
| `ChannelSplitter` | `colorSpace` |
| `ChannelMerger` | `colorSpace`, `defaultChannel4` |

## Texture & lens

| Effect | Props |
| --- | --- |
| `FilmGrain` | `strength`, `size`, `monochrome`, `animated`, `speed`, `shadows`, `midtones`, `highlights` |
| `Vignette` | `strength`, `radius`, `softness`, `roundness`, `centerX`, `centerY` |
| `Blur` | `blurType`, `strength`, `angle`, `sigmaColor`, `centerX`, `centerY`, `partialBlur`, `radius`, `radiusY`, `shape`, `track` |
| `MotionBlur` | `shutterAngle`, `samples`, `maxVelocity`, `shutterCurve`, `depthAware` |
| `UnsharpMask` | `amount`, `radius`, `threshold` |
| `HighPass` | `radius`, `contrastBoost`, `monochrome` |
| `HalftoneScreen` | `mode`, `dotShape`, `frequency`, `angle`, `contrast`, `dotColor`, `paperColor`, `smooth`, `invert`, `cyanAngle`, `magentaAngle`, `yellowAngle`, `blackAngle`, `opacity` |
| `TileOffset` | `offsetX`, `offsetY`, `wrap`, `edgeMode` |
| `TemporalDeflicker` | `blendWeight`, `disocclusionThreshold`, `maxMotionPixels`, `scale`, `windowSize` |

## Distortion & framing

| Effect | Props |
| --- | --- |
| `DisplacementMap` | `strengthX`, `strengthY`, `xChannel`, `yChannel`, `wrapMode` |
| `Liquify` | `operations` |
| `MeshWarp` | `cols`, `rows`, `points` |
| `CornerPin` | `points` |
| `Rotate` | `angle`, `fit`, `scale` |
| `Flip` | `horizontal`, `vertical`, `diagonal`, `mode`, `symmetry` |
| `KenBurns` | `keyframes`, `motionBlurSize`, `movementStyle`, `aspectRatio` |
| `ResizerScaler` | `aspectRatioPreset`, `resolutionPreset`, `targetWidth`, `targetHeight`, `fitMode`, `zoom`, `offsetX`, `offsetY`, `backgroundMode`, `backgroundColor`, `backgroundColor2`, `blurRadius`, `backgroundBrightness`, `anchorX`, `anchorY` |
| `Crop` | `cropType`, `leftPercentage`, `topPercentage`, `widthPercentage`, `heightPercentage`, `roundness`, `pathPoints`, `mode` |

## 3D & light

| Effect | Props |
| --- | --- |
| `Relight3D` | `lightType`, `intensity`, `lightPosX`, `lightPosY`, `lightPosZ`, `lightRadius`, `spotConeAngle`, `specularRoughness`, `specularStrength`, `metallic`, `ambientIntensity`, `volumetricDensity`, `depthScale`, `depthInvert`, `lightColor`, `ambientColor`, `normalMap` |
| `SSAO` | `radius`, `bias`, `intensity`, `kernelSamples`, `blurRadius` |
| `PBRGlass` | `ior`, `roughness`, `transmission`, `dispersion`, `fresnelPower`, `tintColor` |
| `DepthOfField` | `focusDistance`, `focalLength`, `aperture`, `maxBlur`, `quality` |
| `RefractionCaustics3D` | `ior`, `dispersion`, `refractionScale`, `causticBrightness`, `causticScale`, `fluidRipples`, `rippleSpeed`, `roughness`, `specularIntensity`, `lightPosX`, `lightPosY`, `tintColor`, `tintStrength`, `depthInvert`, `depthScale` |
| `CameraParallax3D` | `motionPreset`, `panX`, `panY`, `dollyZ`, `fov`, `parallaxAmount`, `dofAperture`, `focusPlane`, `edgeDilation`, `depthInvert` |

## Mattes & keying

| Effect | Props |
| --- | --- |
| `ColorKey` | `keyColor`, `similarity`, `smoothness`, `spillSuppression`, `colorSpace`, `spillSuppressionType` |
| `RefineEdge` | `decontaminateAmount`, `radius`, `smooth`, `feather`, `shiftEdge`, `matteChannel`, `outputMode` |
| `MaskMath` | `operation`, `radius`, `threshold`, `clampMin`, `clampMax`, `channelA`, `channelB`, `binarize`, `invertResult`, `outputFormat` |
| `PatchHeal` | `patches`, `centerX`, `centerY`, `offsetX`, `offsetY`, `radius`, `sourceRadius`, `feather`, `opacity`, `mode` |

## Generators & style

| Effect | Props |
| --- | --- |
| `NoiseGenerator` | `noiseType`, `outputType`, `width`, `height`, `scale`, `octaves`, `persistence`, `lacunarity`, `speed`, `colorStart`, `colorEnd`, `durationMs`, `fps` |
| `ProceduralVFX` | `effectType`, `outputType`, `width`, `height`, `density`, `scale`, `speed`, `intensity`, `seed`, `colorStart`, `colorEnd`, `durationMs`, `fps` |
| `Paint` | `width`, `height`, `maintainAspect`, `aspectRatio`, `backgroundColor`, `strokes` |
| `LayerStyle` | `dropShadow`, `innerShadow`, `outerGlow`, `innerGlow`, `stroke`, `bevelEmboss`, `colorOverlay` |

## Audio

| Effect | Props |
| --- | --- |
| `AudioFade` | `fadeInDuration`, `fadeOutDuration`, `fadeInCurve`, `fadeOutCurve` |
| `AudioCompressor` | `threshold`, `ratio`, `attack`, `release`, `knee`, `makeupGain` |
| `AudioParametricEq` | `type`, `frequency`, `gain`, `q` |
| `AudioReverb` | `roomSize`, `damping`, `wet`, `dry`, `width` |
| `AudioDelay` | `delayTime`, `feedback`, `wet`, `dry`, `pingPong` |
| `AudioNoiseGate` | `threshold`, `attack`, `hold`, `release`, `range` |
| `StereoPanning` | `pan` |
| `AudioSignalExtractor` | `extractionMode`, `attackMs`, `releaseMs`, `sensitivity`, `noiseFloorDb`, `dynamicRangeDb`, `autoRange`, `smoothing`, `curve`, `beatThreshold`, `beatDecayMs`, `previewMode`, `nodeId` |

## Vision

| Effect | Props |
| --- | --- |
| `Vision` | `enableDetection`, `enableSegmentation`, `enablePose`, `enableMatte`, `classes`, `confidence`, `variant`, `mode`, `matteSource`, `maxMissedFrames`, `modelsDir`, `baseUrl`, `maskThreshold`, `featherRadius`, `keyBackground`, `backgroundKeyThreshold`, `visionBundle` |

## Recipes

```ts
// Warm filmic grade for a whole film
comp.apply(new ColorBalance({ shadows: { cyanRed: 4, yellowBlue: -6 }, highlights: { cyanRed: 2, yellowBlue: -4 } }));
comp.apply(new Vignette({ strength: 30, radius: 0.9, softness: 0.65 }));
comp.apply(new FilmGrain({ strength: 12, size: 1.5, animated: true }));

// Greenscreen key
Layer.video("assets/footage/green.mp4").withEffect(new ColorKey({ keyColor: "#00ff00", similarity: 0.4, smoothness: 0.1, spillSuppression: 0.3 }));

// Print look
layer.withEffect(new HalftoneScreen({ mode: "CMYK", dotShape: "Circle", frequency: 30 }));

// Duotone
layer.withEffect(new GradientMap({ stops: [{ position: 0, color: "#0e0d0c" }, { position: 1, color: "#ff5a1f" }] }));

// Audio clean-up
Layer.audio("assets/audio/vo.wav", { durationFrames }).apply(new AudioNoiseGate({ threshold: -45 })).apply(new AudioCompressor({ threshold: -18, ratio: 3 }));
```