hue()<AvailableFrom v="4.0.466" />

Part of the @remotion/effects package.

A hue rotation effect that can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Preview

Example

import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {hue} from '@remotion/effects/hue';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video src="https://remotion.media/video.mp4" effects={[hue({degrees: 120})]} />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties. You can also call hue() without arguments.

degrees?

Hue rotation in degrees. 0 keeps the input unchanged, 180 rotates colors by half a turn, and 360 returns to the original hue. Defaults to 0.

disabled?

When true, the effect is skipped. Defaults to false.

See also

• @remotion/effects
• grayscale()
• invert()
• Source code for this effect