kinetograph.

A mesh gradient drifts under film grain.

$npx kinetograph add grain-gradient
Source

It loops with no join at whole-number speeds.

Props

Every prop has a default, so the component renders as it is. Change any of them in Studio or in code.

  • palette

    list

    Colours of the mesh, spread over its points in a fixed pattern. Two to eight.

  • speed

    number = 1

    How fast the field drifts. Whole numbers loop seamlessly over 10 seconds.

  • scale

    number = 1

    How far the points wander, as a multiple of the default. 1 is about a tenth of a cell.

  • softness

    number = 0

    Blur over the mesh in pixels: higher is smoother, lower shows more of the patches.

  • grain

    number = 0.14

    Grain amount. 0.1 is a visible film grain.

  • grainSize

    number = 1.3

    Size of a grain cell in pixels.

Compositions

  • GrainGradient