Noise visualization

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

Noise Dot Grid Demo

This example shows how to create a floating dot grid "surface" using createNoise3D() function.

• 1st and 2nd dimensions used for space domain.
• 3rd dimension used for time domain.

scale={75}speed={0.01}circleRadius={5}

---

tsx
import { createNoise3D } from "@remotion/noise";
import React from "react";
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
 
const xNoise3d = createNoise3D("x");
const yNoise3d = createNoise3D("y");
const opacityNoise3d = createNoise3D("opacity");
const colorNoise3d = createNoise3D("color");
 
const OVERSCAN_MARGIN = 100;
 
const NoiseComp: React.FC<{
  scale: number;
  speed: number;
  circleRadius: number;
}> = ({ scale, speed, circleRadius }) => {
  const frame = useCurrentFrame();
  const { height, width } = useVideoConfig();
  const rows = Math.round((height + OVERSCAN_MARGIN) / scale);
  const cols = Math.round((width + OVERSCAN_MARGIN) / scale);
 
  return (
    <svg width={width} height={height}>
      {new Array(cols).fill(0).map((_, i) =>
        new Array(rows).fill(0).map((__, j) => {
          const x = i * scale;
          const y = j * scale;
          const px = i / cols;
          const py = j / rows;
          const dx = xNoise3d(px, py, frame * speed) * scale;
          const dy = yNoise3d(px, py, frame * speed) * scale;
          const opacity = interpolate(
            opacityNoise3d(i, j, frame * speed),
            [-1, 1],
            [0, 1]
          );
          const color =
            colorNoise3d(px, py, frame * speed) < 0
              ? "rgb(0,87,184)"
              : "rgb(254,221,0)";
          return (
            <circle
              key={`${i}-${j}`}
              cx={x + dx}
              cy={y + dy}
              r={circleRadius}
              fill={color}
              opacity={opacity}
            />
          );
        })
      )}
    </svg>
  );
};

tsx
import { createNoise3D } from "@remotion/noise";
import React from "react";
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
 
const xNoise3d = createNoise3D("x");
const yNoise3d = createNoise3D("y");
const opacityNoise3d = createNoise3D("opacity");
const colorNoise3d = createNoise3D("color");
 
const OVERSCAN_MARGIN = 100;
 
const NoiseComp: React.FC<{
  scale: number;
  speed: number;
  circleRadius: number;
}> = ({ scale, speed, circleRadius }) => {
  const frame = useCurrentFrame();
  const { height, width } = useVideoConfig();
  const rows = Math.round((height + OVERSCAN_MARGIN) / scale);
  const cols = Math.round((width + OVERSCAN_MARGIN) / scale);
 
  return (
    <svg width={width} height={height}>
      {new Array(cols).fill(0).map((_, i) =>
        new Array(rows).fill(0).map((__, j) => {
          const x = i * scale;
          const y = j * scale;
          const px = i / cols;
          const py = j / rows;
          const dx = xNoise3d(px, py, frame * speed) * scale;
          const dy = yNoise3d(px, py, frame * speed) * scale;
          const opacity = interpolate(
            opacityNoise3d(i, j, frame * speed),
            [-1, 1],
            [0, 1]
          );
          const color =
            colorNoise3d(px, py, frame * speed) < 0
              ? "rgb(0,87,184)"
              : "rgb(254,221,0)";
          return (
            <circle
              key={`${i}-${j}`}
              cx={x + dx}
              cy={y + dy}
              r={circleRadius}
              fill={color}
              opacity={opacity}
            />
          );
        })
      )}
    </svg>
  );
};

See also

• @remotion/noise