Chapter 603: pattern()

Core Idea

_Part of the @remotion/effects package.

Key Concepts

• Preview
• Example
• API
• scale?
• cropLeft?
• cropTop?
• cropRight?
• cropBottom?

Code Examples

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img
        src={staticFile('logo.png')}
        effects={[
          pattern({
            scale: 0.12,
            gapX: 24,
            gapY: 24,
            offsetU: 0.1,
            rowOffset: 80,
            rowOffsetEvery: 0,
            origin: [0.5, 0],
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

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

Key Takeaways

1. Understand preview when working with pattern().
2. Understand example when working with pattern().
3. Understand api when working with pattern().
4. Understand scale? when working with pattern().
5. Understand cropleft? when working with pattern().

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.