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 noise3D() function.

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

speed

0.01

maxOffset

50

circleRadius

5

tsx
import { noise3D } from"@remotion/noise";
import React from"react";
import { interpolate, useCurrentFrame, useVideoConfig } from"remotion";
constOVERSCAN_MARGIN=100;
constROWS=10;
constCOLS=15;
constNoiseComp:React.FC<{
speed:number;
circleRadius:number;
maxOffset:number;
}> = ({ speed, circleRadius, maxOffset }) => {
constframe=useCurrentFrame();
const { height, width } =useVideoConfig();
return (
 <svgwidth={width} height={height}>
 {newArray(COLS).fill(0).map((_, i) =>
newArray(ROWS).fill(0).map((__, j) => {
constx= i * ((width +OVERSCAN_MARGIN) /COLS);
consty= j * ((height +OVERSCAN_MARGIN) /ROWS);
constpx= i /COLS;
constpy= j /ROWS;
constdx=noise3D("x", px, py, frame * speed) * maxOffset;
constdy=noise3D("y", px, py, frame * speed) * maxOffset;
constopacity=interpolate(
noise3D("opacity", i, j, frame * speed),
 [-1, 1],
 [0, 1]
 );
constkey=`${i}-${j}`;
return (
 <circle
key={key}
cx={x + dx}
cy={y + dy}
r={circleRadius}
fill="gray"
opacity={opacity}
 />
 );
 })
 )}
 </svg>
 );
};

Noise Dot Grid Demo​

See also​

Noise Dot Grid Demo

See also