Vector 2D
Draggable 2D vectors — single/addition/subtraction, a parametric line p+tv, dot/cross product relationships, or a change-of-basis explorer with a user-entered basis. Pick a variant via the props JSON.
Embed syntax
Inside node/facet MDX content, embed the component directly. Inside a page, insert it through the Studio's component picker instead — it configures the same props through a form (or raw JSON if EditorComponentisn't set for this one).
<Vector2D
mode="single"
title=""
/>Live example
Drag the arrow head to change direction, the tail to move the start, or the shaft to translate.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "addition" | "subtraction" | "parametric-line" | "dot-product-triangle" | "dot-product-projection" | "cross-product-parallelogram" | "change-of-basis" | "single" | Which vector diagram to show. |
| title | string | — | Card title. Falls back to a mode-specific default (e.g. "Vector Addition") if omitted. |
| initialVectorA | [number, number] | [3, 2] | Starting coordinates for the first vector (u, a, or p, depending on mode). |
| initialVectorB | [number, number] | [1, 3] | Starting coordinates for the second vector (v or b), for modes that use one. |
| showGrid | boolean | true | Show the background coordinate grid. |
| canvasWidth | number | 600 | Canvas width in pixels. |
| canvasHeight | number | 360 | Canvas height in pixels. |
| interactive | boolean | true | Let the reader drag the vectors. Off for a static illustration. |
| fixedOrigin | boolean | false | Free-vector modes only (single/addition/subtraction) — locks vector tails to the origin so only the head can be dragged. |
| initialBasisB1 | [number, number] | [1, 1] | change-of-basis mode only — first basis vector. |
| initialBasisB2 | [number, number] | [-1, 1] | change-of-basis mode only — second basis vector. |
PreviousNext