MotionScript

LineGrid

A rectangular grid of lines filling the node's layout rect. divisions sets how many cells span each axis; subdivisions adds finer lines within each cell.

0.0s / 4.0s

Usage

import { createScene, LineGrid } from '@motion-script/core';

export default createScene(function* (stage) {
  // Simple 4×4 grid
  stage.add(
    <LineGrid
      width={760}
      height={380}
      divisions={4}
      stroke={{ fill: '#6990DD', weight: 2 }}
    />
  );

  // Grid with subdivisions
  stage.add(
    <LineGrid
      width={760}
      height={380}
      divisions={4}
      subdivisions={4}
      stroke={{ fill: '#6990DD', weight: 2 }}
      subStroke={{ fill: 'rgba(105, 144, 221, 0.4)', weight: 1 }}
    />
  );
});

Props

PropTypeDefaultDescription
divisionsnumber4Number of cells along each axis, with equal gaps between major grid lines
subdivisionsnumber1How many finer cells each division is split into
subStrokeStrokeProp | StrokeProp[]–Stroke style for the minor (subdivision) lines. Falls back to the main stroke if unset
origin{ x: number, y: number }{ x: 0, y: 0 }Pixel offset that pans the whole grid

The standard stroke prop (from ShapeNode) styles the major division lines.

Animating

All props animate with .to(). Animate divisions to reveal or collapse the grid, or origin to scroll it:

import { createScene, LineGrid, createRef, easeOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const grid = createRef<LineGrid>();

  stage.add(
    <LineGrid
      ref={grid}
      width={760}
      height={380}
      divisions={1}
      stroke={{ fill: '#6990DD', weight: 2 }}
    />
  );

  // Reveal the grid
  yield* grid().to({ divisions: 8 }, 1.2, easeOut);

  // Collapse it back
  yield* grid().to({ divisions: 1 }, 1.2, easeOut);
});

Notes

  • subdivisions: 1 means no subdivision lines (each division is one cell).
  • subStroke only has an effect when subdivisions > 1.
  • LineGrid draws lines only. It has no fill of its own, so add a fill prop to paint a background behind the lines.
  • origin pans the grid lines as a whole; use it to animate an infinite-scroll effect.