🎞️
Flipbook
img.gifThe DarkroomImagesStitches up to 30 images into an animated GIF, one after another. Feed it a list spark (like every image on a message, or every Gallery image with a tag), or one image per line.
On the canvas
This is what Flipbook looks like when you place it on your flow. Each field below is something you configure in the inspector panel.
🎞️Images
Flipbook
img.gifimagesrequired
{{imageList}} — or one link / gallery:label per line
delay
500
size
480
fit
select…
background
#ffffff
as
flipbook
output
error
Config fields
| Field | Type | Req | What it does |
|---|---|---|---|
images{{imageList}} — or one link / gallery:label per line | textarea | yes | Images 🖼️ |
delay500 | number | — | Time per frame (ms) ⏱️ |
size480 | number | — | Longest side (px) 📐 |
fit | select | — | Fit 🧩 |
background#ffffff | color | — | Background 🎨 |
asflipbook | text | — | Save it as ✨ |
Output ports
outputThe GIF is in your spark
errorFewer than two images could be loaded
📐
In TypeScript, this would be…
Not something you need to write — just a look at what Kitcord does for you.
TypeScript
const encoder = new GifEncoder(480, 480, { repeat: 0 });
for (const frame of frames) {
encoder.addFrame(frame.getContext("2d").getImageData(0, 0, 480, 480).data, 480, 480, { delay: 500 });
}
const gif = encoder.finish();Related pieces
More Images pieces