Kanban Move
A board where work moves — cards lift off one column, arc across the gutter, and drop into the next while the list they left closes up.
SceneScenes
$ npx remotion-ui@latest add kanban-moveCards deal into their columns, then the ones you have given a move lift off, arc across the gutter under a shadow that grows with the lift, and drop into the bottom of the destination list. The column being aimed at lights while a card is in flight and settles again once it lands, so the eye is told where the card is going before it gets there.
Give a card a move with moveTo and moveAtSeconds; leave both off and it
holds. A board where everything moves reads as noise rather than as work getting
done — two or three moves across a scene is usually the right number.
Slots are arithmetic rather than layout. A moving card lands at the bottom of its destination as that column stands at the moment it arrives, and every card above a departure closes the gap over exactly the frames the departing card is travelling. Nothing here measures the DOM, so the board behaves identically in a headless render and in the Studio, and no card ever snaps to a new row.
Column counts follow the cards, not the clock: a card in flight is counted by whichever column it is closest to, so the numbers tick over at the midpoint of the arc.
For a single file dropped into one target, drag-drop-flow is the smaller
scene.
Give a card `moveTo` and `moveAtSeconds` to send it across; leave both off for cards that hold. Slots are arithmetic — a card lands at the bottom of its destination as that column stands at the moment it arrives, and the cards it left behind close the gap over exactly the frames it is travelling. For a single file dropping into one target, use drag-drop-flow.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/kanban-move- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: columns, cards, moveSeconds, dealStaggerSeconds, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { KanbanMove } from "@/remotion/scenes/kanban-move";
<KanbanMove
columns={["Backlog", "In progress", "Shipped"]}
cards={[
{ title: "Caption presets", meta: "RUI-218 · Ana", column: 0 },
{
title: "Render queue retries",
meta: "RUI-204 · Piotr",
column: 0,
moveTo: 1,
moveAtSeconds: 0.95,
},
{ title: "Theme tokens", meta: "RUI-177 · Kit", column: 1 },
]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | string[] | ["Backlog", "In progress", "Shipped"] | Column headings, left to right. Cards address columns by index. |
| cards | KanbanCard[] | 6 sample cards | Title, meta line, starting column, rail tint, and the one move the card makes. |
| moveSeconds | number | 0.62 | How long a card takes to arc from column to column. |
| dealStaggerSeconds | number | 0.08 | Seconds between each card's arrival during the opening deal. |
| holdSeconds | number | - | Seconds the settled board holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Destination column glow, and the fallback card rail. |
| backgroundColor | string | - | Page behind the board. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |