Render a connected composition as an ordered image sequence with explicit FPS, image format, quality, frame count/progress, and a reusable output.
Where: canvas → left rail → Add → Export → Image Sequence — Add an Image Sequence node and wire a composer into its Composition In handle
Key ideas
- Frame math: Total frames = duration × FPS. The FPS toggle offers 12 / 24 / 30 / 60 and the card shows the running count (e.g. '5s × 30fps = 150 PNG frames'). Audio layers are dropped — sequences are visual-only.
- Per-frame upload: Rendering fills the first 50% of the progress bar; uploading each numbered frame (frame-0000.png, frame-0001.png, …) fills the second 50%. The node stores a sequenceData { baseUrl, files[] } plus a firstFrameUrl preview.
- Add to Canvas as an element: Once frames exist, 'Add to Canvas' creates an 'image-sequence' element on the page from the uploaded frames — playable on the page, not just a single still.
- Image Sequence card: ImageSequenceOutputNode uses the generic shared-card path. Render a connected composition as an ordered image sequence.
- Properties sidebar: renderAudioNodes.tsx
- Opened surfaces: Sequence preview; Add to canvas
Steps
- Add an Image Sequence node (Add → Export → Image Sequence) and connect a composer to Composition In.
- Choose FPS (12 / 24 / 30 / 60); confirm the Total Frames count for your duration.
- Click Render Sequence — the button fills as it renders, then continues filling as it uploads each PNG frame.
- Review the First Frame preview and the frame count badge that appears.
- Click Add to Canvas to place the uploaded sequence as a playable image-sequence element on the page.
Card and properties
- Set FPS, image format, and quality.
- The node reports frames and render progress.
- The selected-node inspector mirrors the output/render configuration.
Opened surfaces
Inspect the sequence/result in its output preview and use the available Add to canvas action when the result should enter the design project.
Image Sequence controls and presets
- Add path: Flowgen → Add → Export → Image Sequence.
- Card: ImageSequenceOutputNode.
- Properties: renderAudioNodes.tsx.
- Controls: FPS; format; quality; frames; render.
- Opened surfaces: Sequence preview; Add to canvas.
FAQ
Why does it need an organization?
Each frame is uploaded individually to storage to build the sequence URL; rendering aborts with an 'Organization ID is required' alert if there's no org context.
What format are the frames?
PNG (data URLs captured per frame via the offscreen canvas). The node's Format control is fixed to PNG.
When should I use a sequence over a video?
Use a sequence when you need a transparent or scrub-driven, lossless playback element on the page; use Video Render for a single compressed WebM file with audio.