Kanban Board

About this style

Kanban began on Toyota's factory floors, where cards signalled when a step needed more parts; the Japanese word means signboard. Software teams adopted it in the 2000s as a board of columns for each stage of work, with limits on how much can sit in progress at once. Animated boards are a staple of product films for task and project tools, and their craft is in the drag and drop: cards that lift, lean and land while the board makes room.

Make a 10-second product animation of a kanban board: a cursor drags cards between columns, counts update, and a week of work fills the Done column.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: default "Corkline", board "Spring launch"
- Cards (title · label), by starting column: default To do: Write launch email · Copy; Record demo video · Marketing; Update help center · Docs; Press kit · Marketing. In progress: Load test checkout · Eng; Fix login timeout · Bug. Review: Pricing page layout · Design. Done: Launch screenshots · Design.
- Closing line: default "Ship it together."
- Length: default 10 seconds
</inputs>

<direction>
- Palette: stage indigo #34308F; board #F7F7FA; columns #EEEEF4; cards #FFFFFF, 1px #E2E2EA; ink #1B1A2E; muted #6B6A80; done #1F9D61. Pills fill/text: Copy #FFE9B0/#7A5300, Marketing #EADFFF/#5A2DB0, Docs #D6F2E3/#17734A, Eng #FFE1C7/#9A4A00, Bug #FFD9D5/#A3261B, Design #DCE6FF/#2547B8.
- Type: Instrument Sans 500–700, tabular figures; card titles 22px on one line, meta 20px, wordmark 56px.
- Layout: a 1640×860 board at (140, 110); a top bar with the title, a "Week 12 · Mon" chip and initials avatars; four 376px columns with count pills; 344×150 cards (pill, title, due line, avatar) joining the bottom of a column. Done shows "N of 8".
- Drag: the arrow cursor becomes a grab hand; the card lifts in 120ms (scale 1.04, deeper shadow), trails the cursor by 60ms and tilts up to ±5° with its speed. The target opens a dashed slot (280ms, cubic-bezier(0.2, 0, 0, 1)) as the source closes; the drop settles on a spring (stiffness 380, damping 30).
- Time-lapse: cards hop on a 28px arc in 420ms and land on the same spring, right-most first, 90ms apart. Counts and the day chip roll in 220ms. In Done, cards compact to 60px rows with a drawn green check and a muted title.
- Premium is physical and exact: cards lift, lean and settle, the board makes room, every count matches its column. Cheap is cards teleporting or cross-fading while numbers jump.
Banned: cross-fading cards, overlaps at rest, wrong counts, overshoot above 4%, confetti, gradients, emoji, real product names, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.9: The board rises 40px (0.7s, cubic-bezier(0.22, 1, 0.36, 1)); columns appear 60ms apart, cards 35ms apart. Counts 4, 2, 1, 1.
- 0.9–2.5: The cursor drags "Fix login timeout" into Review. Counts 4, 1, 2, 1.
- 2.5–6.3: The cursor rests below the board; from 2.7s the week time-lapses, a day every 0.9s (counts after each):
  Tue: Pricing page layout → Done; Load test checkout → Review; Write launch email, Record demo video → In progress. (2, 2, 2, 2)
  Wed: Fix login timeout, Load test checkout → Done; Write launch email → Review; Update help center → In progress. (1, 2, 1, 4)
  Thu: Write launch email → Done; Record demo video, Update help center → Review; Press kit → In progress. (0, 1, 2, 5)
  Fri: Record demo video, Update help center → Done; Press kit → Review. (0, 0, 1, 7)
- 6.3–7.6: The cursor drags "Press kit" into Done: 8 of 8.
- 7.6–8.2: Done's bar turns green, a check badge pops, empty columns read "Nothing here".
- 8.2–9.0: The board scales to 0.86 and rises; "Corkline" and the closing line rise below it, centered at y 930.
- 9.0–10.0: Hold.
For other lengths, add or drop days, keeping counts right, and hold at least 1s.
</structure>

<build>
One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaiting document.fonts.load() for each face before defining window.seek. HTML/CSS with inline SVG; no canvas or three.js. Interpolate each card between its slots before and after the move in progress. window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Recount every column against its pill at each day boundary; the carried card stays under the cursor. Confirm seek(10) and seek(11) match.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…