Graph paper component

A faint squared grid on off-white paper that fades towards the edges, cut tall for phones.

$npx kinetograph add graph-paper-tall

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.

ground
colour
Paper colour.
ink
colour
Colour of the grid.
kind
lines | dots | crosses
Ruled lines, a dot at each crossing, or a plus mark at each crossing.
cell
number
Grid cell, in pixels.
line
number
Line width (or dot radius), in pixels.
major
integer
A stronger line every this many cells; 0 for none.
strength
number
How dark the grid is over the paper.
focusX
number
Where the grid is strongest, across (0 left, 1 right).
focusY
number
Where the grid is strongest, down (0 top, 1 bottom).
fade
number
How far from the focus the grid has faded out, as a fraction of the frame height. 2 for no fade.
drift
none | up | left | diagonal
Which way the grid slides.
speed
integer
Cells the grid slides per loop. Whole numbers, so it loops.
light
number
How much the corners darken round a soft light.
grain
number
Grain amount over the whole frame.