Nodes & connections

Nodes share one shell. The title tab names the node’s verb (GENERATE, IMAGE, COMPOSE, DIRECT, ANIMATE, REMIX) and carries a status square that reads idle, running, done or error. Square ports on the left take input; ports on the right hand output onward. A tag on the bottom-right platform says what comes out — IMAGE, VIDEO, SCREEN, SVG, CODE or STYLE — and output nodes number themselves in order (IMAGE · 014) so a run’s results read as a sequence.

Three states recur on every generating node. Generating shows a dithered field with a status label and a progress curve that follows how long that kind of generation usually takes. Queued appears in the prompt node’s title as Queued · N ahead when a burst exceeds your plan’s parallel slots — nothing is rejected, it starts the moment a slot frees. An error stays on the node as an inline alert with the reason and, where it helps, an action such as Open billing.

Holds one image — an input you upload, paste or drag in, or an output a prompt generated. Input image nodes are how a screenshot, brand asset or reference gets onto the canvas. Generated images come back in the aspect ratio the prompt asked for and carry a caption strip with the file name, ratio and generation time, plus the run’s cost.

On hover

A generated image offers Expand (a lightbox — scroll to zoom, drag to pan, +/-/0 for zoom, Esc to close), Replace, Copy, Download and Download as…. The lightbox also holds Share: make the image public and copy a link, or revoke it again.

Edit — free, built-in utilities

The Edit pill opens the image editor: Crop… (with presets), Trim edges, Remove background, Rotate left / right, Flip horizontal / vertical, and resize to 50%, Max 1024px or Max 2048px (never enlarging). Twelve levels of Undo and a Reset are on the toolbar. Finish with Add as new node — the result lands connected below the original, so nothing is destroyed — or Replace image. None of these call a model or touch your budget.

Download as…

Export as PNG, JPEG, WebP or AVIF, with a quality slider for the lossy formats, a dimension bound (original, max 2048px, max 1024px) and a target file size (no limit, ≤ 200 KB, ≤ 500 KB, ≤ 1 MB). A size target searches encoder quality for you, so “under 200 KB” is one click.

Brand asset tags

Two pills on the node, logo and icon, mark an image as a brand asset. Tagging identifies the asset — it does not inject it into every generation. Connect the image or mention it with @ where you want it used, and a DESIGN.md can refer to it as {{logo}} or {{icon}}. Only one image holds each tag at a time.

The workhorse. A prompt node holds your instruction, the model to run it on, and what kind of output to produce. It reads whatever is wired into it — images, upstream text, generated code, a DESIGN.md — and writes into the output node connected to its right. Adding a generator from the toolbar creates the prompt and its output node together, already wired.

Output types

Image

A generated image into an image node. Aspect ratio, reference images and retexture styles apply.

Code

Text or code into a code node — the node's language decides what gets written (see Code node).

SVG

A standalone SVG document into a code node, previewable and rasterizable to PNG.

Screen

A complete HTML page into a screen node, rendered live and editable in the screen editor.

Video

A clip into a video node, with duration, resolution and sound controls where the model supports them.

Style

A DESIGN.md into a design node — colours, type, voice and components as a visual board.

The pill row

• Model — the picker for this output type. Rows carry Image Input and Multi Input badges where a model takes reference images, and Unavailable when the provider is down.
• + compare — add more models and each generates its own output node stacked below the first (image, screen and SVG outputs). A +N pill lists the extras; each extra output shows Generates with <model>.
• Aspect ratio — AUTO or one of 1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3, 2:1, 21:9; each model lists the subset it supports.
• Styles (image output) — a library of 37 retexture styles, filterable by Featured, Materials, Artistic, 3D Renders, Effects and Textures. Picking one inserts a ready-made restyle prompt for the attached image.
• Duration, resolution and Sound on / off (video output) — offered per model; a model that derives its ratio from the first frame says so and locks the ratio pill.
• Reasoning effort (text models that support it) — higher levels think longer and cost more.
• DESIGN.md / DESIGN.md off — whether this prompt follows the canvas and workspace design guide.
• Out of budget — appears when the GPU wallet is spent; top up or wait for the cycle to reset.

Writing the prompt

Type @ to reference another node — the prompt stores a [node:…] token and shows it as a chip with the node’s type and label. Long prompts collapse to six lines with an Expand toggle; Editor opens a full-screen writing surface. Run on the platform runs this node alone.

Holds generated or pasted source with syntax highlighting. Copy to clipboard and Download file are always on the node; neither is gated. The language is chosen while the node is still empty, and it matters: it is the instruction, not a label — a code output set to CSS writes a stylesheet no matter how the prompt is phrased. Auto lets the model pick from the prompt, and stamps the language it chose back onto the node.

Auto

The model picks from the prompt

Text

Plain text input

TSX

React TypeScript

JSX

React JavaScript

CSS

Stylesheets

SVG

Scalable Vector Graphic

GLSL

Animated fragment shader

JSON

Data/Config

TypeScript

Node/Scripts

JavaScript

Node/Scripts

MDX

Markdown + JSX

Markdown

Documentation

SVG and GLSL preview

Two languages are visual and carry a Preview | Code toggle. SVG renders in a sandboxed frame and offers Convert SVG to PNG, which drops a raster copy onto the canvas as an image node so the graphic can feed image models. GLSL runs as a live WebGL shader with its tunable knobs under the preview, Capture the current frame as a PNG, and an Edit button that opens the full shader studio. A shader that fails to compile shows the compiler log and a Fix shader button that re-runs the prompt with that log attached.

Screen node

A complete HTML document rendered live in a sandboxed frame — a real page, not a mockup. The title bar toggles Preview | Code, opens the screen Editor, shows Version history, switches Mobile / Desktop, opens the page in a new tab, publishes a share link, copies the HTML and downloads the .html. Zoomed out, the node shows a screenshot instead of the live frame to keep the canvas light.

Video node

A generated or uploaded clip (MP4, WebM or MOV), numbered like images (VIDEO · 002), with its cost and the same download affordances. Video nodes feed image-to-video and reference-to-video models when wired into a prompt.

Design node

A DESIGN.md rendered as a board — Logos, Colors, Typography, Voice, Visual Style, Rounded, Spacing and Components — with Copy DESIGN.md and Download design.md. Connect it to prompts to direct them, or promote it to the canvas-wide guide (see Canvas tools).

Note node

When a generation returns prose alongside its artifact — reasoning, options, caveats — the prose lands in a read-only Model note beside the output rather than being lost. Notes render markdown, copy with one click and resize by dragging.

Text input

Plain text that feeds prompts — a brief, a URL, a CSS selector, a number or a style guide. Long values collapse; an apply to all generations flag sends the text to every prompt on the canvas without wiring it to each.

DESIGN.md guide

The canvas-wide design guide, edited in place or from the Open DESIGN.md toolbar button, with Compress with AI to shorten a long guide. Whatever it says applies to every generation on the canvas unless a prompt opts out with its DESIGN.md off pill.

Sticky note

Markdown annotation in 7 tones — Yellow, Orange, Pink, Purple, Blue, Green, Gray — and three font sizes. The formatting bar offers Bold, Italic, Link, bullets and Mention a teammate: on a workspace canvas, @ lists your members, and the mention travels as a plain link so it reads correctly anywhere the note’s text goes. Resize by dragging; arrow keys nudge the size 10px at a time.

Group

A coloured backdrop that organises nodes and never executes. Name it, pick from 10 preset colours (slate, red, orange, amber, green, teal, blue, indigo, purple, pink) or any hex, Tidy group to arrange what is inside, and Gen all to run only that group’s prompts. Groups the agent created show who asked for them and when. Shift+G wraps a selection in a new group.

Run all button

A placeable Run all node for canvases you hand to someone else — one obvious button that runs the whole graph.

Capture node

Records a live web page’s motion. Enter a URL, choose a duration (1–5 s, two frames per second, up to 10 frames), and optionally an Element selector and a forced light or dark theme under Advanced. Capture drives a cloud browser, streams a live preview while it works, and hands back the frames plus the page’s animation context — keyframes, computed styles and HTML — so a downstream prompt can reverse-engineer the animation into code. Frames can be excluded individually before they feed onward. Each capture charges the wallet for its browser session; there is no count limit. A page behind a bot check stops the capture with nothing charged (see below).

Page capture and site scrape node

Page Capture saves screenshots and a DESIGN.md of the site’s visual system, shown as a board with the raw markdown one toggle away. Site Redesign uses the same scraper, also keeps the site’s logo, favicon and copy as its baseline, and prepares direction previews and screen prompts. Enter a domain, pick Scrape page or Crawl site (up to 8 pages, with include and exclude paths), choose an Auto, Light, or Dark Source theme, and run. Light and Dark request the website’s own theme when supported. Running again replaces that node’s previous outputs. Captures are metered per page.

Some sites put a bot check (Cloudflare, DataDome and similar) in front of their pages. vmotif doesn’t get around these. A page the check blocks is skipped and not charged, and if the homepage is blocked the capture stops with nothing charged. Upload screenshots of the site to an image node instead. The same goes for a capture node.

Social post node

One campaign node: write the post idea, choose Image, Video or Text, and tick platforms — X, LinkedIn, Instagram, Facebook, Threads, TikTok. It expands into the platform-native copy, media and preview nodes for each, wired and ready to run, and shows the recipe it will build before you commit.

Drag from the port on the right edge of a node (its output) to the port on the left edge of another (its input). The connection means “feed this node’s result into that one.” A prompt node can take several inputs at once — a reference image plus an upstream brief plus the DESIGN.md.

• Outputs flow left-to-right, from source port to target port.
• A node can fan out to multiple downstream nodes, and a node can take multiple inputs.
• Connections end at prompt nodes: images, text, code and other outputs feed a prompt, and the prompt writes into the output node beside it. An output that hasn’t generated yet can still be pre-wired into the next prompt.
• Cycles aren’t allowed — a node can’t depend on its own output, directly or indirectly.

When you run a workflow, Vmotif sorts the graph into dependency order and executes top-down. A node runs only once everything wired into it has finished, so a prompt waiting on a generated image won’t fire until that image exists. Independent branches run in parallel, up to your plan’s limit, and outputs appear on the canvas as each step completes. Re-running a group or the whole canvas asks before it replaces outputs that already exist, and offers to generate only the empty ones.

Each prompt node picks the model that fits its output type. Vmotifroutes across providers so you can use the strongest model for each job. This is the picker as it stands right now — the list follows the live catalog, so a model that joins or leaves the picker shows up here the same day:

Images

GPT Image 2.5 Sunburst, Gemini Nano Banana 2.1, FLUX 3 Image, Recraft V4.1 Flash, GPT Image 2.5 Flare, Muse Image 1.0, Grok Imagine 2.0, Seedream 5.0 Pro, Nano Banana 2 Lite (Gemini 3.1 Flash Lite), Nano Banana 2 (Gemini 3.1 Flash), Recraft V4.1 Pro, Recraft V4.1 Utility

Text & code

Claude Opus 5.5, Claude Fable 5.1, Claude Sonnet 5.5, Claude Haiku 5.5, GPT-6.1 Sol, GPT-6 Astra, GPT-6 Luna, GPT-6 Sol, Gemini 3.8 Flash, Gemini 3.5 Flash Lite, Gemini 3.1 Pro Preview, Grok 4.7, Kimi K3, Kimi K3 Fast, GLM 5.3, GLM 5.3 Flash, Qwen 3.8 Flash, Qwen 3.8 Max, DeepSeek V4.1 Flash, MiniMax M3, Muse Spark 1.3

SVG

GPT-6 Astra, Claude Opus 5.5, Muse Spark 1.3, Kimi K3, Claude Fable 5.1, Gemini 3.8 Flash, Gemini 3.1 Pro Preview, DeepSeek V4.1 Flash, MiniMax M3

Video

MiniMax H3, Grok Imagine Video 1.5 Lite, Wan v3.0 Video Prime, MiniMax H3 Max, Wan v3.0 Video, Seedance 2.5, Grok Imagine Video 1.5, Seedance 2.0 Fast, Seedance 2.0, Wan v2.7 Reference-to-Video

Image and video pickers follow the Gateway’s featured ranking; the SVG picker follows the Design Arena SVG leaderboard, re-ranked daily. Per-generation prices for every model are on Models & costs.