FlowBoard
Layout 11 — Kanban Board / Agile PM
A production-grade kanban board experience inspired by Trello and Linear. Features a light theme with teal accents, colorful column headers, draggable-looking cards with priority color bars, spring-physics sidebar, and comprehensive agile tooling across 7 sub-pages.
Sub-Pages (7)
Board/11-kanban
Full kanban board with 4 columns, ~18 cards, quick filters, sprint progress
Backlog/11-kanban/backlog
18-item backlog with drag handles, group by epic/priority, sort, bulk actions
Sprints/11-kanban/sprints
Sprint cards with goals, burndown chart, velocity comparison bar chart
Team/11-kanban/team
8 team members with capacity bars, skills, velocity stats, status indicators
Reports/11-kanban/reports
Velocity, cycle time trend, cycle time distribution, cumulative flow diagram
Settings/11-kanban/settings
Board columns, sprint config, story point scales, labels, integrations, notifications
About/11-kanban/about
This page — documents all implemented features, animations, and architecture
Layout Architecture
- Collapsible sidebar with spring animation (stiffness: 300, damping: 30)
- Active route indicator with layoutId animation for smooth transitions
- Board selector with expandable project list
- Sprint progress indicator with animated fill bar
- Full kanban board with 4 columns: To Do, In Progress, In Review, Done
- Horizontal scroll for board overflow
Signature Animations
- Card drag-hint lift: y: -4 with increased shadow on hover (spring, stiffness: 400, damping: 25)
- Column header color pulse: periodic glow effect on column strip (every 4-5s)
- Staggered card entrance: delay based on column + card index for waterfall effect
- Column slide-in: sequential column appearance with opacity + y transform
- Sprint progress bar: animated width from 0 to target on mount
- Sidebar collapse: width animation with spring physics, content fade in/out
Motion Library
- motion/react v12+ (successor to framer-motion)
- AnimatePresence for sidebar sections and bulk action bar
- whileHover for card drag-hint lift effect
- motion.div with initial/animate for staggered entrances
- layoutId for smooth active indicator transitions
- Spring transitions with 'as const' type assertion for strict TypeScript
Charts (Recharts)
- Sprint burndown: AreaChart with gradient fill (flowboard-burndown-grad)
- Velocity comparison: grouped BarChart (committed vs completed)
- Cycle time trend: LineChart with dot markers
- Cycle time distribution: BarChart with per-bar colors
- Cumulative flow diagram: stacked AreaChart with 4 gradient fills
- All gradients use flowboard-* prefix to avoid conflicts
Theme & Colors
- Light theme with teal-500 accent (#0891b2)
- Background: #f4f5f7 (Jira-like light gray)
- CSS variables: --fb-bg, --fb-accent, --fb-text, --fb-border, etc.
- Column headers: gray (To Do), teal (In Progress), amber (In Review), green (Done)
- Priority colors: red (Critical/P0), orange (High/P1), yellow (Medium/P2), green (Low/P3)
- Label chips: 20+ label colors (backend, frontend, api, security, etc.)
Typography
- Font: DM Sans (--font-dm-sans) for warm, friendly feel
- Card titles: 13px medium, card IDs: 10px semibold with tracking
- Section headers: 15px bold with tight tracking
- Labels: 10px font in colored chips
- Muted text hierarchy: --fb-text-secondary and --fb-text-muted
Kanban Board Architecture
+1 more
+2 more
+2 more
Technical Summary
7
Pages
3
Components
5
Charts
6+
Animations