Chapter 254: Shaders

Core Idea

You can use shader effects in Remotion to generate backgrounds or transform content.

Key Concepts

• Shaders as backgrounds
• Apply shaders to content
• Rendering
• See also

Code Examples

export const HalftoneBackground: React.FC = () => {
  const {width, height} = useVideoConfig();

  return (
    <Solid
      width={width}
      height={height}
      color="black"
      effects={[
        halftoneLinearGradient({
          firstStopDotSize: 0,
          secondStopDotSize: 42,
          firstStopPosition: [0, 0.5],
          secondStopPosition: [1, 0.5],
          gridSize: 24,
          dotColor: '#0b84f3',
        }),
      ]}
    />
  );
};

• What it demonstrates: Usage pattern for Shaders from the official docs.

Key Takeaways

1. Understand shaders as backgrounds when working with Shaders.
2. Understand apply shaders to content when working with Shaders.
3. Understand rendering when working with Shaders.
4. Understand see also when working with Shaders.

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• use Gsap Timeline: related page in the Framework & Renderer Integrations section.