motion-direction
为混合常规内容与“惊艳”动效的网站进行动画艺术指导——决定哪些元素做动画、哪些保持静止，选择合适的工具（CSS、Motion for React、GSAP + ScrollTrigger、Lenis、Three.js/R3F、Lottie、View Transitions），设定动效系统（时长、缓动、错峰），并保持快速、可访问且移动端安全。适用于用户想要动画化、交互式、获奖风格或“酷炫”的网站、落地页、作品集、首屏、滚动效果、页面过渡，或提出“加点动画”、“让它更有活力”、“像 Awwwards 网站那样”，甚至在选择库之前。
机器翻译查看英文原文
Art-direct animation for websites that mix normal content with "wow" motion — decide what to animate and what to keep still, pick the right tool (CSS, Motion for React, GSAP + ScrollTrigger, Lenis, Three.js/R3F, Lottie, View Transitions), set a motion system (durations, easing, stagger), and keep it fast, accessible and mobile-safe. Use whenever the user wants an animated, interactive, award-style or "keren" website, landing page, portfolio, hero, scroll effect, page transition, or asks "tambahin animasi", "biar lebih hidup", "kayak website Awwwards", even before choosing a library.
适用对象：React / Next.js。自动收录 · 待核查。
原作者说明节选
从固定版本的 SKILL.md 提取，保留原文语言。以下内容属于作者说明，本站尚未验证安装、兼容或运行结果。
查看英文原文
原文涵盖的主题
- Motion Direction
- 1. Plan the rhythm before coding
- 2. Choose the tool (smallest that works)
- 3. Motion system (define once, reuse)
- 4. Performance budget (non-negotiable)
- 5. Accessibility & mobile
- 6. Verify
Great animated sites are mostly calm with a few moments that land hard. Motion supports the content; it never replaces it or blocks reading. Write a motion plan per section, as a table, and show it to the user for anything bigger than a single component: | Section | Role | Motion level | Effect | Tool | |---|---|---|---|---| | Hero | first impression | 🔥 signature | split-text reveal + 3D object reacting to cursor | GSAP SplitText, R3F | | Logos | proof | 💤 still | none (or slow marquee) | CSS | | Features | explain | 🌊 light | fade-up + stagger on enter | Motion / GSAP | | Showcase | wow #2 | 🔥 signature | pinned horizontal scroll | GSAP ScrollTrigger | | Pricing / form | convert | 💤 still | only micro-interactions | CSS | | Footer | close | 🌊 light | big type parallax | GSAP | Rules of rhythm: 1–3 signature moments per page. Everything else is light or still. Alternate intense → calm → intense. Never animate what the user must read right now or must act on (prices, forms, error messages, nav). Every animation must answer "what does this communicate?" — hierarchy, continuity, feedback, or delight. "Because it looks cool" is allowed only for the signature moments. Content mus
这里只展示节选，请以完整原文和当前要求为准。
- 来源仓库
- KILN-skills/kiln
- 源文件
- skills/motion-direction/SKILL.md
- 固定版本
- 555d7ea59d05910b4ef6fb39780da5f906be832b
准备条件
- 本条仅收录原作者的技能元数据；请阅读完整说明，确认依赖、许可与使用条件。
第一件可以尝试的小事
先阅读原作者说明，再决定是否在自己的 AI 工具中使用。
对应 AI 工具说明
作者有说明不等于本站实机验证。没有证据时，不自动标为兼容、安全或免费。
来源与内容状态
本条为自动发现的元数据，尚未完成人工文档核查；适用性与运行结果待核查。
原作者：KILN-skills/kiln · 原作者仓库元数据。文档核查：未核查。最近来源检查：2026-11-10T04:00:15.432Z。
分类由名称、说明与路径规则生成，分类不代表已核实适配。
许可与权利归属
MIT。第三方内容及版权归原作者，使用条件以原文为准。
许可原文 ↗本站没有因同步、复制或用户自报成功而将资源标为运行验证通过。
限制与注意事项
- 元数据收录不代表本站已经安装、适配、实测或进行安全审查。