kinetograph.

A plum, crimson and amber gradient swirls and settles.

$npx kinetograph add liquid-gradient
Source

It loops with no join.

Props

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

  • deep

    colour = "#22002e"

    The darkest colour, where the field is low (plum).

  • mid

    colour = "#c4002f"

    The colour pooled along one side and between the others (crimson).

  • bright

    colour = "#f0883a"

    The brightest colour, where the field is high (amber).

  • scale

    number = 1

    Size of the shapes: higher is larger, calmer pools.

  • swirl

    number = 1

    How far the shapes fold over in the middle of the loop.

  • speed

    number = 1

    Loops per 10 seconds. Whole numbers loop seamlessly.

  • softness

    number = 0.8

    How soft the edges between colours are.

Compositions

  • LiquidGradient