litmotion
A skill to implement clean, lifecycle-managed animations using the LitMotion library.
Install
mkdir -p .claude/skills/litmotion && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13086" && unzip -o skill.zip -d .claude/skills/litmotion && rm skill.zipInstalls to .claude/skills/litmotion
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
LitMotionを使ってアニメーションを実装するためのskillKey capabilities
- →Implement animations using LitMotion
- →Unify entry points to `LMotion.Create(...)`
- →Configure with `With...` and apply with `Bind...`
- →Control completion/cancellation with `MotionHandle`
- →Handle asynchronous waiting with `await handle` or `ToUniTask(ct)`
How it works
The skill implements animations using LitMotion by unifying entry points to `LMotion.Create(...)`, configuring with `With...`, applying with `Bind...`, and controlling completion/cancellation with `MotionHandle`.
Inputs & outputs
When to use litmotion
- →Implementing UI transitions
- →Creating sequence-based animations
- →Cleaning up animation lifecycles
- →Binding motion to object transforms
About this skill
LitMotion Animation
目的
アニメーションを、LitMotionの公式思想に沿ってシンプルに実装する。
公式思想に沿った基本原則
- エントリーポイントは
LMotion.Create(...)に統一する。 - 設定は
With...、適用はBind...で構成し、読みやすさを優先する。 Bindの戻り値MotionHandleを必ず保持し、完了/キャンセルを制御する。- 非同期待機は
await handleかToUniTask(ct)を使い、CancellationTokenを渡す。 - パラメータ管理は
SerializableMotionSettings<TValue, TOptions>でInspectorに出すことができるが、不必要な項目まで表示することになるため基本的には避け、必要な場合のみ使用する。
実装フロー
- 設定を置く
- 調整が必要な値だけ Inspector に公開し、不要項目は公開しない。
- 再生を実装する
LMotion.Create(settings) -> Bind -> AddTo(this) -> ToUniTask(ct)を基本形にする。
- 複数モーションを組む
- 同時は
UniTask.WhenAll、順次はLSequenceを使う。
- 同時は
ベストプラクティス
AddTo(this)でライフサイクルと連動させ、破棄済みオブジェクトの再生を防ぐ。- 再入しうる再生メソッドでは、既存
MotionHandleをTryCancel()してから再作成する。 SchedulerやCancelBehaviorは必要になったときだけ明示する。- ループやディレイを増やす前に、まず最小構成で意図を満たす。
- Inspector公開は最小限にし、調整しない値はコード側に閉じる。
禁止/注意
LSequenceに再生中Handleや無限ループMotionを追加しない。CancellationTokenを待機に渡さない実装を追加しない。
最小例
var handle = LMotion.Create(settings)
.BindToLocalScaleXYZ(transform)
.AddTo(this);
await handle.ToUniTask(ct);
参照
- https://annulusgames.github.io/LitMotion/articles/ja/overview.html
- ローカル参照
references/litmotion-settings-pattern.mdreferences/litmotion-advanced-features.md
When not to use it
- →When `LSequence` contains a playing handle or infinite loop motion
- →When `CancellationToken` is not passed to waiting implementations
Limitations
- →Cannot add playing handles or infinite loop motions to `LSequence`
- →Cannot add waiting implementations without `CancellationToken`
How it compares
This skill enforces a specific, simplified implementation flow for LitMotion animations, promoting readability and proper lifecycle management compared to arbitrary animation coding practices.
Compared to similar skills
litmotion side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| litmotion (this skill) | 0 | 1mo | No flags | Intermediate |
| blender-toolkit | 175 | 9mo | Review | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| game-art | 23 | 6mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
blender-toolkit
Dev-GOM
Automate Blender tasks like creating 3D shapes, managing materials, and retargeting Mixamo animations with real-time control.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
game-art
davila7
Game art principles. Visual style selection, asset pipeline, animation workflow.
motion-graphics
rohitg00
Kinetic typography, logo animations, and stylized motion design skill. **Triggers when:** - User wants text animations or kinetic typography - Request involves logo reveals or title sequences - Content focuses on visual impact over education - User mentions "title", "intro", "logo", "text animation", "kinetic" **Capabilities:** - Kinetic typography with dynamic text effects - Logo reveals and brand animations - Particle effects and visual flourishes - Modern motion design patterns - Attention-grabbing title sequences
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
motion
onmax
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt