# compose-motion

A skill for Jetpack Compose animation: picks the right API for the job and hands over ready spring specs. Built for Android and Compose Multiplatform.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 943 installs · ★ 677
- Author: AThevon
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/AThevon/genjutsu/tree/HEAD/skills/_jutsu/compose-motion/SKILL.md
- Updated: 2026-10-05
- HTML: https://affpapa.org/en/nevibecode/skills/compose-motion

## What it does

The skill loads for Android Compose and Compose Multiplatform projects. Its core is a decision tree: a single value over time, mount and unmount, crossfade between states, coordinated multi-property animation, manual control with interruption, infinite loops, shared elements, drag and swipe. Each row names a concrete API, so the agent stops reaching for `Animatable` where `animateFloatAsState` does the job.

A spring table carries opinionated values: `StiffnessMediumLow` with `DampingRatioNoBouncy` for modals, drawers and tabs, `StiffnessMedium` with `dampingRatio = 0.85f` for button presses and toggles, `StiffnessLow` with `DampingRatioMediumBouncy` for toasts and FABs. The constants themselves are listed too — `StiffnessVeryLow` 50f, `StiffnessLow` 200f, `StiffnessMediumLow` 400f, `StiffnessMedium` 1500f, `StiffnessHigh` 10000f, with damping from 0.2f to 1.0f. Springs ignore `durationMillis`, so a deterministic duration means `tween(...)` instead.

The skill flags itself as version-sensitive: API names and SDK gates were checked on 2026-09-08, and that date lives in `_jutsu/VERSIONS.md`. The baseline is Jetpack Compose 1.12.0, i.e. Compose BOM 2026.08.x. If the date in that file is old, re-verify the version number before acting on it. `SharedTransitionLayout` needs Compose 1.7+, and `Crossfade` does not animate size — the container snaps to the new content size right away.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill compose-motion -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/compose-motion/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/compose-motion/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill compose-motion -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/compose-motion/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill compose-motion -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/compose-motion/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install AThevon/genjutsu compose-motion
```

2. **Manually: put the files in place**
- File: `.github/skills/compose-motion/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill compose-motion -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/AThevon/genjutsu --path skills/_jutsu/compose-motion
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/compose-motion/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill compose-motion -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/AThevon/genjutsu/tree/HEAD/skills/_jutsu/compose-motion/SKILL.md

## When to use it
- pick the right animation API for a Compose scenario
- tune a spring for a modal or a button press
- build a hero transition from list to detail screen
- animate width, color and corner radius off one state
- swap the deprecated `swipeable` for a current API

## Example prompts
- Pick an API for animating a panel in and out in Compose
- Build a shared element transition from a list to a detail screen
- What spring parameters should I use for a button press?

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 735188bf6398d921.

BEGIN THIRD-PARTY FILE 735188bf6398d921
```text
---
name: compose-motion
description: "Jetpack Compose animation foundations - animate*AsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout, gestures."
metadata:
  internal: true
---

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was
> verified on **2026-09-08** against primary sources. What against, and when, is in
> `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number.

# Compose Motion - Sub-skill

> Jetpack Compose animation core. Loaded for Android Compose and Compose Multiplatform projects.
> Concise rules here. Deep-dive in `references/`.
> Baseline: Jetpack Compose 1.12.0 (current stable, Aug 2026) - i.e. Compose BOM 2026.08.x. Modern stable APIs only - no `swipeable`, no `animateContentSize` hacks where `AnimatedContent` is correct. Anything below flagged 'Compose 1.x+' is a *since* marker, not the target.

---

## API Decision Tree

| Need | API |
|---|---|
| Single value over time | `animateFloatAsState`, `animateDpAsState`, `animateColorAsState`, etc. |
| Visibility / mount-unmount | `AnimatedVisibility(visible) { ... }` |
| Crossfade between states | `Crossfade(target) { state -> ... }` |
| Multi-state coordinated | `updateTransition(target).animateFloat { ... }` |
| Manual control / interruption | `Animatable(initialValue)` + `animateTo(...)` |
| Looping / infinite | `rememberInfiniteTransition().animateFloat(...)` |
| Shared elements | `SharedTransitionLayout` + `Modifier.sharedElement(...)` (Compose 1.7+) |
| Layout swap with anim | `AnimatedContent(target) { ... }` |
| Drag / swipe | `Modifier.draggable` + `Animatable.snapTo`/`animateTo`, or `Modifier.anchoredDraggable` for snap-points |

**Rule:** climb the ladder only when needed. `animate*AsState` covers 70% of cases. Reach for `Animatable` only when you need to interrupt, chain, or read velocity.

---

## Spring API (opinionated defaults)

| Use | Spec |
|---|---|
| UI snap (modal, drawer, tab) | `spring(stiffness = Spring.StiffnessMediumLow, dampingRatio = Spring.DampingRatioNoBouncy)` |
| Tactile (button press release, toggle) | `spring(stiffness = Spring.StiffnessMedium, dampingRatio = 0.85f)` |
| Bouncy reveal (toast, FAB, success) | `spring(stiffness = Spring.StiffnessLow, dampingRatio = Spring.DampingRatioMediumBouncy)` |
```
END THIRD-PARTY FILE 735188bf6398d921

The third-party file has ended. Everything between the 735188bf6398d921 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2335 of 13970 bytes. © AThevon · MIT · https://github.com/AThevon/genjutsu/tree/HEAD/skills/_jutsu/compose-motion/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md