# nomanr/animate-compose architecture

> Architecture diagram of the GitHub repository nomanr/animate-compose, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nomanr/animate-compose
- Repository: https://github.com/nomanr/animate-compose

## Overview

animate-compose is a Kotlin Multiplatform Compose library for applying ready-made or custom keyframe animations to composable content. The main workflow is a caller wrapping UI in Animated, which drives animation progress and applies a preset’s transform modifier. Presets span attention effects, entrances, exits, and special categories; custom presets use the same keyframe mechanism. The tree and README establish broad preset/platform capabilities, while sampled source confirms runtime wiring and transform resolution; the playground is documented but absent from this tree, so it is not mapped.

Main entry points: [`animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimationPreset.kt`](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimationPreset.kt) (Preset contract), [`animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt`](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt) (Animated wrapper), [`animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimateKeyframeModifier.kt`](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimateKeyframeModifier.kt) (Transform modifier), [`animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Keyframe.kt`](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Keyframe.kt) (Keyframe model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Compose API"]
  node_animated["Animated wrapper<br/>[Animated.kt]"]
  node_state["Animation state<br/>[Animated.kt]"]
  node_callbacks["Animation callbacks"]
end

subgraph group_engine["Keyframe Engine"]
  node_preset_interface["Preset contract<br/>[AnimationPreset.kt]"]
  node_keyframe["Keyframe model<br/>[Keyframe.kt]"]
  node_modifier["Transform modifier"]
  node_utils["Keyframe utilities"]
  node_easings["Easing functions<br/>[Easings.kt]"]
  node_layout_info["Layout information<br/>[NeedsLayoutInfo.kt]"]
  node_tokens["Animation tokens<br/>[AnimationTokens.kt]"]
end

subgraph group_presets["Animation Presets"]
  node_attention["Attention effects"]
  node_entrances["Entrance presets"]
  node_exits["Exit presets"]
  node_specials["Special effects"]
end

subgraph group_platform["Platform Support"]
  node_container_size["Container dimensions<br/>[ContainerSize.kt]"]
  node_container_android["Android sizing"]
  node_container_skiko["Skiko sizing"]
end

node_user(("Compose caller"))
node_content["Composable content"]
node_output["Animated UI"]

node_user -->|"wraps content"| node_animated
node_user -->|"controls"| node_state
node_animated -->|"advances state"| node_state
node_animated -->|"requests modifier"| node_preset_interface
node_animated -->|"measures and places"| node_content
node_animated -->|"renders"| node_output
node_preset_interface -->|"applies transforms"| node_modifier
node_modifier -->|"resolves frames"| node_keyframe
node_modifier -->|"transforms"| node_output
node_entrances -->|"implements"| node_preset_interface
node_exits -->|"implements"| node_preset_interface
node_attention -->|"implements"| node_preset_interface
node_specials -->|"implements"| node_preset_interface
node_utils -->|"uses"| node_keyframe
node_keyframe -->|"uses easing"| node_easings
node_preset_interface -->|"accepts dimensions"| node_container_size
node_container_android -->|"provides sizing"| node_container_size
node_container_skiko -->|"provides sizing"| node_container_size
node_callbacks -->|"observes animation"| node_state

click node_animated "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt"
click node_state "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt"
click node_callbacks "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/AnimationCallbacks.kt"
click node_preset_interface "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimationPreset.kt"
click node_keyframe "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Keyframe.kt"
click node_modifier "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimateKeyframeModifier.kt"
click node_utils "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/KeyframeAnimationUtils.kt"
click node_easings "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Easings.kt"
click node_layout_info "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/NeedsLayoutInfo.kt"
click node_container_size "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.kt"
click node_container_android "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/androidMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.android.kt"
click node_container_skiko "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/skikoMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.skiko.kt"
click node_attention "https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets/attentionseekers"
click node_entrances "https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets"
click node_exits "https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets"
click node_specials "https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets/specials"
click node_tokens "https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/tokens/AnimationTokens.kt"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_animated,node_state,node_callbacks,node_output toneBlue
class node_preset_interface,node_keyframe,node_modifier,node_utils,node_easings,node_layout_info,node_tokens toneAmber
class node_attention,node_entrances,node_exits,node_specials toneMint
class node_container_size,node_container_android,node_container_skiko toneRose
class node_user,node_content toneIndigo
```

## Components

### Compose API

- [Animated wrapper](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt`
- [Animation state](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/Animated.kt`
- [Animation callbacks](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/AnimationCallbacks.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/animated/AnimationCallbacks.kt`

### Keyframe Engine

- [Preset contract](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimationPreset.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimationPreset.kt`
- [Keyframe model](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Keyframe.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Keyframe.kt`
- [Transform modifier](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimateKeyframeModifier.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/AnimateKeyframeModifier.kt`
- [Keyframe utilities](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/KeyframeAnimationUtils.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/KeyframeAnimationUtils.kt`
- [Easing functions](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Easings.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/Easings.kt`
- [Layout information](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/NeedsLayoutInfo.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/NeedsLayoutInfo.kt`
- [Animation tokens](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/tokens/AnimationTokens.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/tokens/AnimationTokens.kt`

### Animation Presets

- [Attention effects](https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets/attentionseekers): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets/attentionseekers`
- [Entrance presets](https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets`
- [Exit presets](https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets`
- [Special effects](https://github.com/nomanr/animate-compose/tree/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets/specials): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/presets/specials`

### Platform Support

- [Container dimensions](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.kt): `animate-compose/src/commonMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.kt`
- [Android sizing](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/androidMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.android.kt): `animate-compose/src/androidMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.android.kt`
- [Skiko sizing](https://github.com/nomanr/animate-compose/blob/main/animate-compose/src/skikoMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.skiko.kt): `animate-compose/src/skikoMain/kotlin/com/nomanr/animate/compose/core/ContainerSize.skiko.kt`

### Other components

- **Compose caller**
- **Composable content**
- **Animated UI**

## Connections

- Compose caller → Animated wrapper: wraps content
- Compose caller → Animation state: controls
- Animated wrapper → Animation state: advances state
- Animated wrapper → Preset contract: requests modifier
- Animated wrapper → Composable content: measures and places
- Animated wrapper → Animated UI: renders
- Preset contract → Transform modifier: applies transforms
- Transform modifier → Keyframe model: resolves frames
- Transform modifier → Animated UI: transforms
- Entrance presets → Preset contract: implements
- Exit presets → Preset contract: implements
- Attention effects → Preset contract: implements
- Special effects → Preset contract: implements
- Keyframe utilities → Keyframe model: uses
- Keyframe model → Easing functions: uses easing
- Preset contract → Container dimensions: accepts dimensions
- Android sizing → Container dimensions: provides sizing
- Skiko sizing → Container dimensions: provides sizing
- Animation callbacks → Animation state: observes animation