kinetograph.

A grid of halftone dots breathes on a ring-shaped wave.

$npx kinetograph add dot-field
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.

  • ground

    colour = "#efede6"

    Background colour.

  • dot

    colour = "#c9c5b8"

    Colour of the dots where the wave is low.

  • dotHigh

    colour = "#2b3a22"

    Colour of the dots at the crest of the wave.

  • spacing

    number = 34

    Distance between dot centres, in pixels.

  • size

    number = 0.62

    The largest dot, as a fraction of the spacing.

  • waveLength

    number = 1

    Length of the waves as a multiple of the default. Higher is calmer.

  • speed

    number = 1

    How fast the wave travels. Whole numbers loop seamlessly over 10 seconds.

  • grain

    number = 0.05

    Grain amount over the whole frame.

Compositions

  • DotField