菜单
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
| name | accessible-motion |
| description | Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity. |
Apply Disney's 12 animation principles while ensuring accessibility for users with vestibular disorders, motion sensitivity, and cognitive disabilities.
| Principle | Accessible Implementation |
|---|---|
| Squash & Stretch | Opacity/color change instead |
| Anticipation | State change indication without motion |
| Staging | Focus management, not motion-based |
| Straight Ahead / Pose to Pose | Instant state changes |
| Follow Through / Overlapping | Eliminated or minimal fade |
| Slow In / Slow Out | Instant or very gentle ease |
| Arc | Straight or no movement |
| Secondary Action | Reduced or eliminated |
| Timing | Instant (0ms) or extended duration |
| Exaggeration | Removed entirely |
| Solid Drawing | Static visual clarity |
| Appeal | Clarity over personality |
Animation should enhance understanding, never hinder it. When motion causes harm, provide alternatives that maintain functionality.
/* Default: Full animation */
.element {
transition: transform 300ms ease-out;
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.element {
transition: opacity 200ms ease-out;
/* Or no transition at all */
transition: none;
}
}
const prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
if (prefersReducedMotion) {
// Use instant transitions or subtle fades
} else {
// Use full animations
}
Squash & Stretch → Replace with opacity or color changes. A button can darken on press instead of compressing. Loading indicators can pulse opacity instead of bouncing.
Anticipation → Use static indicators. Show a loading state immediately rather than animated preparation. Hover states change color instantly rather than scaling.
Staging → Use focus management and visual hierarchy. Scroll to content rather than animated reveals. Static highlighting over motion-based attention.
Motion Types → Instant state changes replace transitions. Toggle switches snap position. Modals appear instantly. Menus show without animation.
Follow Through → Eliminated. Elements reach final state immediately. No settling, bouncing, or overshoot effects.
Easing → Either instant (0ms) or very gentle, extended duration (500ms+) with minimal distance. If using motion, slow and subtle.
Arc/Paths → Straight movement only if any movement. Prefer opacity transitions over positional. No circular or complex motion paths.
Secondary Action → Significantly reduced or eliminated. Single, clear feedback per interaction. No cascading or staggered animations.
Timing → Two approaches: instant (0ms) for snappy feedback, or extended (500ms+) for gentle perception. Avoid 150-400ms range—fast enough to notice, slow enough to trigger symptoms.
Exaggeration → Removed entirely. Literal, proportional visual feedback only. No overshoots, bounces, or dramatic effects.
Solid Drawing → Maintain visual clarity in static states. Design must work without any animation. Strong contrast and clear hierarchy.
Appeal → Appeal through clarity, not personality. Clean, predictable interactions. User confidence in interface stability.
2.3.3 Animation from Interactions (AAA) Motion triggered by interaction can be disabled unless essential.
2.2.2 Pause, Stop, Hide (A) Moving content lasting >5 seconds must be pausable.
2.3.1 Three Flashes (A) No content flashes more than 3 times per second.
prefers-reduced-motion respected globally