Motion
:::tip Core Principle Plaud Web intentionally uses near-zero motion. Most interactions (page transitions, dialogs, Toast) render instantly with no transition animations. The only exception is Layout Transition — used for structural layout changes (e.g., sidebar collapse / expand). :::
Layout Transition
This is the only motion token in the system, used for structural layout changes.
| Parameter | Value | Description |
|---|---|---|
| Type | Spring | Framer built-in spring curve |
| Based On | Time | Time-based (not physics simulation) |
| Time | 0.4s (400ms) | Spring settle duration |
| Bounce | 0.2 | Slight rebound — natural deceleration, no visible bounce |
| Delay | 0 | No delay |
Current Use Cases
| Status | Context | Description |
|---|---|---|
| 🟢 CURRENT | Navigation sidebar | Sidebar / menu collapse ↔ expand |
| 🔵 FUTURE | Reusable contexts | Reusable panel groups, layout reflow, split-view adjustments |
CSS Implementation
/* CSS approximation of Framer Spring (time-based) */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
Bounce 0.2 produces a slight overshoot for a natural deceleration effect with no visible bounce — consistent with Plaud's "composed, restrained" brand character.
Brand Constraints
All future motion additions must follow these hard rules:
| Rule | Description |
|---|---|
| Motion = feedback, not performance | Motion communicates state changes, not visual showmanship |
| If silence works, don't move | If the intent is clear without animation, don't add one |
| Maximum duration 500ms | No motion should exceed 500ms — avoid sluggishness |
Prohibited Patterns
| Pattern | Reason for prohibition |
|---|---|
| Bounce | Playful, childish — conflicts with "composed, professional" character |
| Flip | Showy, distracting |
| Shake | Aggressive feedback, disrespectful to the user |
| Scale Bounce | A variant of Bounce — equally over-animated |
| Parallax Scrolling | Triggers vestibular disorders |
| Intense Loading (spinning / pulsing) | Conveys anxiety, contradicts "composure" |
| Cartoon Motion | Incompatible with a professional product positioning |
Accessibility
prefers-reduced-motion
When a user enables "Reduce Motion" in their operating system, Layout Transition must immediately degrade to instant switching (no animation). This is a hard requirement.
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0s !important;
animation-duration: 0s !important;
}
}
No Information via Motion
Layout state is communicated through size and icon changes, not through the transition animation itself. Users with all motion disabled must be able to fully understand the interface state.
Design Checklist
Confirm before each design review:
- Layout Transition uses Framer Spring (Time 0.4s / Bounce 0.2) — no custom parameters
- No motion has been added outside of what is defined in this document
- All new motion avoids the prohibited patterns list
- All motion duration is within 500ms
-
prefers-reduced-motionis handled — degraded to instant switching
Plaud Web is one of the leanest motion baselines available: instant rendering by default. Any motion addition is an exception and requires a compelling justification.