motion-direction
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.
Target: React / Next.js. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- 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
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- KILN-skills/kiln
- Source file
- skills/motion-direction/SKILL.md
- Fixed revision
- 555d7ea59d05910b4ef6fb39780da5f906be832b
Requirements
- Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.
A small first task
先阅读原作者说明，再决定是否在自己的 AI 工具中使用。
Instructions for your AI tool
- Claude Desktop: resource-specific guide not available yet
- Claude Code: resource-specific guide not available yet
- Cursor: resource-specific guide not available yet
- Codex: resource-specific guide not available yet
Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: KILN-skills/kiln · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T04:00:15.432Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.