Chapter 571: contourLines()

Core Idea

_Part of the @remotion/effects package.

Key Concepts

• Preview
• Example
• API
• lineColor?
• lineWidth?
• spacing?
• scale?
• complexity?

Code Examples

import {
  AbsoluteFill,
  CanvasImage,
  staticFile,
  useCurrentFrame,
} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill>
      <CanvasImage
        src={staticFile('image.png')}
        width={1280}
        height={720}
        fit="cover"
        effects={[
          contourLines({
            lineColor: 'rgba(255, 255, 255, 0.75)',
            lineWidth: 1.4,
            spacing: 36,
            scale: 220,
            complexity: 0.7,
            smoothness: 0.75,
            seed: 2,
            offsetX: frame * 0.4,
            offsetY: frame * 0.2,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for contourLines() from the official docs.

Key Takeaways

1. Understand preview when working with contourLines().
2. Understand example when working with contourLines().
3. Understand api when working with contourLines().
4. Understand linecolor? when working with contourLines().
5. Understand linewidth? when working with contourLines().

Connects To

• Animated Emoji: related page in the Effects Library section.
• get Available Emoji: related page in the Effects Library section.
• api: related page in the Effects Library section.