@genart-dev/plugin-layout-composition

Advanced composition guide plugin for genart.dev — classical painting systems, photography overlays, and agent-friendly coordinate tools.

Guides

Guide	Description
Golden Spiral	Quarter-arc spiral in golden rectangles, 4 orientations
Golden Triangle	Main diagonal + perpendiculars, 2 focal intersections
Harmonic Armature	14-line system with "eye" intersections (full/major/reciprocals)
Rabatment	Square overlays showing compositional core
Safe Margins	Action-safe, title-safe, broadcast, print-bleed, custom
Flow Path	S-curve, Z-pattern, C-curve, circular, diagonal with arrows
Musical Ratios	Albertism — diatessaron, diapente, diapason, double-diatessaron
Dynamic Symmetry	Root rectangle grids with baroque/sinister diagonals + reciprocals
Phi Grid	Lines at 1/φ positions (tighter center than thirds)
Diagonal Grid	Corner-to-midpoint diagonals with center diamond

All 10 guide types render as test-renders/composition-guides.png:

All 10 composition guides

Composition guide variations

Tool	Description
`add_composition_guide`	Add any of the 10 guide types with property overrides
`suggest_focal_points`	Return focal point coordinates (thirds, golden-ratio, armature, phi-grid)
`suggest_flow_path`	Return flow path waypoints for a visual goal
`clear_composition_guides`	Remove all composition guide layers

All guides use the guides: typeId prefix, so toggle_guides and clear_guides from @genart-dev/plugin-layout-guides work with them too.

npm install @genart-dev/plugin-layout-composition

yarn build    # tsup → CJS + ESM + DTS
yarn test     # vitest

MIT