重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
calm-relaxation by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill calm-relaxation创建能够舒缓、安定并营造宁静用户体验的动画。
平静源于缓慢、柔和、可预测的运动。放松则来自那些自然呼吸、流动,从不要求关注或制造紧张感的动画。
非常微妙(2-5%)。轻柔的呼吸或脉动,而非弹跳。柔软、有机的变形,如云朵或水。
漫长、渐进的准备(200-400毫秒)。缓慢的构建不会带来意外。所有动作都提前充分预示。
柔和的焦点,环境式的定位。没有侵略性的注意力抢夺。元素和谐地共享空间,互不竞争。
用于环境动画的柔和、有机流动。飘动的云朵、漂浮的粒子、微妙的渐变——自然的随机性。
延伸的、优雅的跟随动作。漫长的稳定时间(500毫秒以上)。元素像水面上的叶子一样漂移静止。
两端都采用强烈的缓动效果。非常平缓的加速和减速。使用 cubic-bezier(0.4, 0, 0.6, 1) 实现平滑、柔和的运动。
宽阔、流畅的曲线。柔和的抛物线。运动应像水或风一样流动——绝不要有棱角或突兀。
环境性的、背景运动。微妙的视差,轻柔的漂浮元素。不要求关注的支持性运动。
缓慢而从容(400-800毫秒以上)。较长的持续时间带来冥想感。没有快速的动作。呼吸节奏:每个周期4-6秒。
极少或没有。真实、自然的运动。微妙令人平静;夸张制造紧张。
柔和的边缘,圆润的形态。没有尖锐的角度。感觉自然舒适的有机形状。
柔和的色彩,低对比度。柔和的渐变。圆润的形状。自然、有机的美学。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 元素 | 持续时间 | 缓动函数 |
|---|---|---|
| 淡入淡出过渡 | 400-600毫秒 | ease-in-out |
| 漂浮元素 | 3000-5000毫秒 | ease-in-out |
| 呼吸脉动 | 4000-6000毫秒 | ease-in-out |
| 视差漂移 | 800-1200毫秒 | ease-out |
--calm-gentle: cubic-bezier(0.4, 0, 0.6, 1);
--calm-float: cubic-bezier(0.37, 0, 0.63, 1);
--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1);
@keyframes calm-breathe {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.02);
opacity: 1;
}
}
.breathing-element {
animation: calm-breathe 5s ease-in-out infinite;
}
每周安装量
52
代码仓库
GitHub 星标数
20
首次出现
2026年1月24日
安全审计
安装于
codex45
gemini-cli42
opencode42
cursor41
github-copilot39
claude-code36
Create animations that soothe, settle, and create peaceful user experiences.
Calm emerges from slow, gentle, predictable motion. Relaxation comes from animations that breathe, flow naturally, and never demand attention or create tension.
Very subtle (2-5%). Gentle breathing or pulsing rather than bouncing. Soft, organic deformation like clouds or water.
Long, gradual preparation (200-400ms). Slow builds create no surprises. Everything telegraphed well in advance.
Soft focus, ambient positioning. No aggressive attention-grabbing. Elements share space harmoniously without competition.
Gentle, organic flow for ambient animations. Drifting clouds, floating particles, subtle gradients—natural randomness.
Extended, graceful follow-through. Long settling times (500ms+). Elements drift to rest like leaves on water.
Heavy easing on both ends. Very gradual acceleration and deceleration. cubic-bezier(0.4, 0, 0.6, 1) for smooth, gentle motion.
Wide, sweeping curves. Gentle parabolas. Motion should flow like water or wind—never angular or abrupt.
Ambient, background motion. Subtle parallax, gentle floating elements. Supporting motion that doesn't demand attention.
Slow and deliberate (400-800ms+). Long durations feel meditative. No quick movements. Breathing rhythm: 4-6 seconds per cycle.
Minimal to none. Realistic, natural movements. Subtlety is calming; exaggeration creates tension.
Soft edges, rounded forms. No sharp angles. Organic shapes that feel natural and comfortable.
Soft colors, low contrast. Gentle gradients. Rounded shapes. Natural, organic aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Fade transitions | 400-600ms | ease-in-out |
| Floating elements | 3000-5000ms | ease-in-out |
| Breathing pulse | 4000-6000ms | ease-in-out |
| Parallax drift | 800-1200ms | ease-out |
--calm-gentle: cubic-bezier(0.4, 0, 0.6, 1);
--calm-float: cubic-bezier(0.37, 0, 0.63, 1);
--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1);
@keyframes calm-breathe {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.02);
opacity: 1;
}
}
.breathing-element {
animation: calm-breathe 5s ease-in-out infinite;
}
Weekly Installs
52
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex45
gemini-cli42
opencode42
cursor41
github-copilot39
claude-code36
React视图过渡API使用指南:实现原生浏览器动画与状态管理
9,100 周安装
Slack Bot Builder 教程:使用 Bolt 框架和 Block Kit 构建 Slack 机器人
411 周安装
LangChain4J测试策略指南:单元、集成与端到端AI应用测试方法
408 周安装
AWS RDS Spring Boot集成指南:配置Aurora/MySQL/PostgreSQL数据库连接
408 周安装
RealityKit AR 开发指南:iOS ARKit 增强现实应用构建与实体交互
407 周安装
价值主张模板:6步JTBD框架生成客户价值主张,产品策略与营销定位指南
414 周安装
NotebookLM 研究助手技能:基于来源的文档查询与智能管理工具
413 周安装