# Kanban project board

> A warm light kanban board where two cards are dragged between columns by a cursor while the sprint progress rises.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/kanban-project-board/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

The AI builds the board with absolute positioned cards.

Prompt:

```text
Create a single-file HTML kanban board, desktop 1280x720, warm paper theme (background #f7f3ec, columns #efe8da, white cards, accent vermilion #e0561b). System fonts, no libraries.
Top: title "Launch week board", muted subtitle "12 tasks - 4 teammates" and on the right a sprint progress label with a number that counts from 40% to 73% (CSS @property counter) above a rounded progress bar that fills to match.
Three columns: To do (3 cards), In progress (2), Done (2). Each card: white, 14px radius, soft shadow, bold task title, one or two small pill labels (Design, Backend, QA, Growth in tinted colours) and a coloured avatar dot bottom right.
Use absolute positioning with explicit coordinates so cards can move cleanly.
Motion (8 second loop): add a mouse cursor SVG. The cursor moves to the top To do card, the card lifts (scale 1.04, rotate -2.5deg, big shadow), travels into In progress and settles in the first slot. Then the cursor picks up the Set up analytics events card, carries it into Done where a green check badge pops in. Everything fades out at the end and restarts.
Respect prefers-reduced-motion. Return only the complete HTML.
```

### 2. Watch the first drag

The webhook card should lift and land in In progress.

### 3. Watch the second drag

The analytics card should land in Done with a green tick.

Done when: You can see it working in the browser.

### 4. Make it real

Replace the animation with real drag and drop if you need to use it live.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/kanban-project-board/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/kanban-project-board/index-html/ (Complete code of the result in the video.)

## About

A friendly project board with three columns. A visible cursor picks up a task, drops it into In progress, then moves another into Done with a green tick, and the sprint percentage climbs from 40 to 73. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.

---
Also available as JSON: https://ownlyplans.com/bhaskar/kanban-project-board/?format=json
MCP server: https://ownlyplans.com/mcp