重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
motion-sickness by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill motion-sickness运用迪士尼动画原理安全消除前庭系统触发因素。
以下模式会触发前庭系统反应:
问题:动作过度戏剧化 修复:减少变换幅度。最大尺寸变化控制在10-20%。避免全屏缩放。
问题:曲线路径导致视觉追踪疲劳 修复:功能性界面使用线性运动。弧线仅用于小型可选元素。
问题:动作过冲产生甩鞭效应 修复:导航中移除弹跳/过冲效果。使用临界阻尼弹簧或缓出函数。
问题:多个运动元素导致混乱 修复:限制为一个主要运动。移除视差图层。
问题:加速度模式引发方向迷失 修复:使用一致、可预测的缓动函数。避免速度突变。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
prefers-reduced-motionprefers-reduced-motion?| 触发因素 | 安全替代方案 |
|---|---|
| 缩放过渡 | 淡入淡出 + 轻微缩放(最大5%) |
| 视差滚动 | 静态或单层效果 |
| 旋转 | 淡入淡出或滑动 |
| 弹跳/弹簧效果 | 缓出(无过冲) |
| 全页滑动 | 交叉淡入淡出 |
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.parallax {
transform: none !important;
}
}
/* 安全默认动画 */
.safe-transition {
transition: opacity 200ms ease-out;
/* 避免:使用大幅度的变换值 */
}
每周安装量
56
代码仓库
GitHub 星标数
30
首次出现
2026年1月24日
安全审计
安装于
codex50
gemini-cli47
opencode47
cursor46
github-copilot44
claude-code42
Eliminate vestibular triggers using Disney's principles safely.
These trigger vestibular responses:
Issue : Over-dramatic motion Fix : Reduce scale of transforms. Max 10-20% size change. Avoid full-screen zooms.
Issue : Curved paths cause tracking strain Fix : Use linear motion for functional UI. Save arcs for small, optional elements only.
Issue : Overshooting creates whiplash effect Fix : Remove bounce/overshoot from navigation. Use critically damped springs or ease-out.
Issue : Multiple moving elements cause confusion Fix : Limit to one primary motion. Remove parallax layers.
Issue : Acceleration patterns cause disorientation Fix : Use consistent, predictable easing. Avoid sudden speed changes.
prefers-reduced-motion - Non-negotiableprefers-reduced-motion?| Triggering | Safe Alternative |
|---|---|
| Zoom transition | Fade + slight scale (max 5%) |
| Parallax scroll | Static or single-layer |
| Rotation | Fade or slide |
| Bounce/spring | Ease-out (no overshoot) |
| Full-page slide | Crossfade |
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.parallax {
transform: none !important;
}
}
/* Safe default motion */
.safe-transition {
transition: opacity 200ms ease-out;
/* Avoid: transform with large values */
}
Weekly Installs
56
Repository
GitHub Stars
30
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex50
gemini-cli47
opencode47
cursor46
github-copilot44
claude-code42
React视图过渡API使用指南:实现原生浏览器动画与状态管理
7,500 周安装
Avalonia UI布局优化指南:使用Zafiro.Avalonia实现现代简洁布局
322 周安装
Gluestack UI v4 设计模式指南:React Native 组件库样式规范与最佳实践
321 周安装
60秒读懂世界 - 每日新闻API | 获取精选中文新闻简报与微语,支持JSON/文本/Markdown/图片格式
319 周安装
GrepAI工作空间使用指南:统一索引管理多项目代码库与微服务架构
325 周安装
联网电视广告指南:CTV/OTT广告投放策略、格式与优化技巧
330 周安装
Metabase 文档审查技能:自动化代码审查与文档质量检查指南
334 周安装