Chapter 968: Noise visualization

Core Idea

Using the @remotion/noise package, you can add noise for your videos.

Key Concepts

• Noise Dot Grid Demo
• See also

Code Examples

const OVERSCAN_MARGIN = 100;
const ROWS = 10;
const COLS = 15;

const NoiseComp: React.FC<{
  speed: number;
  circleRadius: number;
  maxOffset: number;
}> = ({ speed, circleRadius, maxOffset }) => {
  const frame = useCurrentFrame();
  const { height, width } = useVideoConfig();

  return (
    <svg width={width} height={height}>
      {new Array(COLS).fill(0).map((_, i) =>
        new Array(ROWS).fill(0).map((__, j) => {
          const x = i * ((width + OVERSCAN_MARGIN) / COLS);
          const y = j * ((height + OVERSCAN_MARGIN) / ROWS);
          const px = i / COLS;
          const py = j / ROWS;
          const dx = noise3D("x", px, py, frame * speed) * maxOffset;
          const dy = noise3D("y", px, py, frame * speed) * maxOffset;
          const opacity = interpolate(
            noise3D("opacity", i, j, frame * speed),
            [-1, 1],
            [0, 1]
          );

          const key = `${i}-${j}`;

          return (
            <circle
              key={key}
              cx={x + dx}
              cy={y + dy}
              r={circleRadius}
              fill="gray"
              opacity={opacity}
            />
          );
        })
      )}
    </svg>
  );
};

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

Key Takeaways

1. Understand noise dot grid demo when working with Noise visualization.
2. Understand see also when working with Noise visualization.

Connects To

• 4 0 Alpha: related page in the Miscellaneous (Core) section.
• ai: related page in the Miscellaneous (Core) section.
• Animated Emoji: related page in the Miscellaneous (Core) section.