vectojs-paradigmlisted

# The VectoJS Paradigm Abandon the HTML/CSS mental model before touching a VectoJS project. VectoJS is not "a canvas inside a webpage" — the canvas **is** the page. There is one `<canvas>`, one `Scene`, and a retained scene graph (the Virtual Math Tree) of `Entity` objects whose numeric state fully determines every pixel. If you find yourself reaching for a `<div>`, a stylesheet, or a screenshot, stop and re-enter the paradigm. ## The translation table (habit → VectoJS) | HTML/CSS habit | VectoJS way | | ------------------------------------- | ----------------------------------------------------------------------------------------------- | | Add a `<div>`/`<span>` wrapper | Add an `Entity` (or `Stack`/`Flow`/`Card` container) to the scene tree | | Write CSS rules / classes | Set entity properties: `x`, `y`, `width`, `scaleX`, `opacity`, colors on the component | | Flexbox / grid layout | `Stack` (vertical/horizontal + gap) and `Flow` (wrapping); positions are numbers you own | | Media queries | Breakpoint functions on `scene.width`/`scene.height` (logical px); reposition and `markDirty()` | | CSS transition / keyframes | `setTransition({ x: 'spring' })` then assign, or `animateTo`/`springTo` (promise-based) | | `z-index` |