When a task moves between statuses — whether by drag-and-drop, button click, or voice command — Claude Board plays a transition animation on the task card.Documentation Index
Fetch the complete documentation index at: https://docs.claboard.dev/llms.txt
Use this file to discover all available pages before exploring further.
Animation Types
| Transition | Effect | Description |
|---|---|---|
| → In Progress | Amber sparks | 12 glowing particles fly outward with a golden pulse |
| → Testing | Shimmer wave | Purple/amber gradient sweeps across with floating dots |
| → Done | Confetti burst | 24 colorful particles in mixed shapes with a checkmark pop |
| → Awaiting Approval | Violet stars | Purple particles float up with star icon and violet glow |
| → Failed | Red flash | Red shimmer wave, red glow pulse, and X mark |
| ← Backward | Rewind sweep | Subtle gray sweep in reverse direction |
- A glow pulse matching the target status color
- A card pop scale animation (briefly scales up then settles)
How It Works
The animation system uses a React context (StatusTransitionContext) that tracks recent transitions:
- When
onStatusChangefires,emitStatusTransition(taskId, fromStatus, toStatus)records the transition - Each
TaskCardchecks the context for active transitions - If a transition exists for its task, it renders
StatusTransitionEffectoverlay - Animations auto-clear after 2 seconds
Technical Details
- All effects use pure CSS animations — no external libraries
- Particles are randomly generated
divelements with CSS@keyframes - The confetti uses 8 different colors and mixed shapes (circles + rectangles)
- Performance is lightweight since effects are short-lived and use GPU-accelerated transforms