compose-graphics

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 7196f765fc11 · 22 Oct 2026Report an issue or request a re-scan

• Publisherathevon GitHub userOwner of the repository this skill is read from
• Source folderathevon/genjutsu/skills/_jutsu/compose-graphicsThe exact folder we audited
• LicenceNOASSERTIONAs the repository states it
• Commit pinned for this verdict7196f765fc11A new audit runs when the source changes
• Repository statusNot archivedLast push 16 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Advanced Compose visuals - Material 3 Expressive motion physics, AGSL shaders (Android 13+), Canvas/DrawScope generative, graphicsLayer effects.

---
name: compose-graphics
description: "Advanced Compose visuals - Material 3 Expressive motion physics, AGSL shaders (Android 13+), Canvas/DrawScope generative, graphicsLayer effects."
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 Graphics

> Advanced Compose visuals: M3 Expressive motion physics, AGSL shaders (Android 13+), Canvas / DrawScope, graphicsLayer effects.
> Loaded for advanced thesis (shader, expressive, M3 Expressive, AGSL, Canvas, holographic).
> Foundation: `../compose-motion/SKILL.md` covers basics. Concise rules here. Deep-dive in `references/`.

---

## Decision Tree: Which API for Which Need

| Need | API |
|---|---|
| Spring physics with bounce / overshoot | `MotionScheme.expressive()` (M3 Expressive) |
| Pixel-level shader | `RuntimeShader` + `Modifier.graphicsLayer { renderEffect = ... }` (Android 13+) |
| Generative drawing (paths, particles, fractals) | `Canvas { drawScope -> ... }` |
| GPU effects (blur, shadows, color filters) | `Modifier.graphicsLayer { renderEffect = ... }` or `Modifier.blur(...)` |
| Adaptive system materials (Material You glassmorphism) | `Modifier.background(MaterialTheme.colorScheme.surfaceContainerHighest)` |
| Liquid glass on Android | AGSL shader recipe (no native API like iOS yet) |

---

## Domain 1: Material 3 Expressive

### What It Is

The 2025 Material 3 evolution introduces spring-based motion physics replacing fixed-duration tweens. New shape morphing API via `androidx.graphics.shapes`. New `MotionScheme` selectable on the theme. Aimed at hero moments, key interactions, brand-defining UI.

### MotionScheme

| Scheme | Personality | Use For |
|---|---|---|
| `MotionScheme.standard()` | Calmer, less overshoot | Default for chrome, lists, navigation |
| `MotionScheme.expressive()` | More overshoot, longer settle | Hero reveals, FABs, primary CTAs |

Apply on the theme:

```kotlin
MaterialTheme(motionScheme = MotionScheme.expressive()) {
    // children read tokens via MaterialTheme.motionScheme.*
}
```

Tokens exposed:

| Token | Domain | Spring (damping / stiffness) - standard | ... expressive |
|---|---|---|---|
| `fastSpatialSpec()` | Position / size | `0.9 / 1400` | `0.6 / 800` |
| `defaultSpatialSpec()` | Position / size | `0.9 / 700` | `0.8 / 380` |
| `slowSpatialSpec()` | Position / size | `0.9 / 300` | `0.8 / 200` |
| `fastEffectsSpec()` | Opacity / color | `1.0 / 3800` | `1.0 / 3800` |
| `defaultEffectsSpec()` | Opacity / color | `1.0 / 1600` | `1.0 / 1600` |
| `slowEffectsSpec()` | Opacity / color | `1.0 / 800` | `1.0 / 800` |

> **Spatial vs Effects:** spatial = anything physical (height, offset, scale). Effects = visual properties without inertia (alpha, color, elevation). *Both* families are springs - the effects ones are just critically damped (`dampingRatio = 1.0`) and much stiffer, so they never overshoot. Only the spatial springs differ between `standard()` and `expressive()`.

> **Availability:** `MotionScheme`, `MaterialTheme(motionScheme = ...)` and `MaterialExpressiveTheme` are **stable in material3 1.4.0** (no opt-in needed). `MaterialShapes` and the shape-morphing helpers are not - they need 1.5.0-alpha and `@OptIn(ExperimentalMaterial3ExpressiveApi::class)`.

### Hero Card Expand (Expressive Springs)

```kotlin
@Composable
fun ExpressiveHero() {
    var expanded by remember { mutableStateOf(false) }
    MaterialTheme(motionScheme = MotionScheme.expressive()) {
        val transition = updateTransition(targetState = expanded, label = "expand")
        val height by transition.animateDp(
            transitionSpec = { MaterialTheme.motionScheme.slowSpatialSpec() },
            label = "height"
        ) { if (it) 400.dp else 100.dp }
        val alpha by transition.animateFloat(
            transitionSpec = { MaterialTheme.motionScheme.defaultEffectsSpec() },
            label = "alpha"
        ) { if (it) 1f else 0f }

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(height)
                .clickable { expanded = !expanded }
        ) {
            Box(modifier = Modifier.alpha(alpha)) {
                Text("Detail content", modifier = Modifier.padding(24.dp))
            }
        }
    }
}
```

### Spring Tuning Recipes

| Mood | Spec |
|---|---|
| Hero reveal | `spring(stiffness = Spring.StiffnessLow, dampingRatio = Spring.DampingRatioMediumBouncy)` |
| Snappy expressive | `spring(stiffness = Spring.StiffnessMediumLow, dampingRatio = 0.7f)` |
| Calm spatial | `MaterialTheme.motionScheme.defaultSpatialSpec()` (use the token) |
| Critical (no overshoot) | `spring(stiffness = Spring.StiffnessHigh, dampingRatio = 1f)` |

### Shape Morphing (`MaterialShapes` + `Morph`)

Two different libraries, and the split matters:

- `androidx.graphics.shapes:graphics-shapes` (stable **1.1.0**) ships `RoundedPolygon`, `CornerRounding` and `Morph(start, end)`. Its `Morph.toPath(progress)` returns an **`android.graphics.Path`**.
- The predefined Material shapes (`MaterialShapes.Circle`, `Pentagon`, `Cookie4Sided`, `Sunny`, `Heart`, ...) live in **material3**, not in graphics-shapes. They are still `@ExperimentalMaterial3ExpressiveApi` and ship only in `androidx.compose.material3:material3:1.5.0-alpha*` - they are **not** in stable material3 1.4.0. material3 also adds `Morph.toPath(progress)` returning a **Compose `Path`**, plus `RoundedPolygon.toShape()`.

Never write `.asAndroidPath().asComposePath()`: with the graphics-shapes import it does not compile (`android.graphics.Path` has no `asAndroidPath()`), and with the material3 import it is a pointless round trip. And because `MaterialShapes` are **normalized to a 0..1 box**, the path must be scaled to the draw size - dropping the raw path into `GenericShape` yields a 

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/athevon/genjutsu
git -C genjutsu checkout 7196f765fc11

Works in

1. 2026-10-22
   ✓SAFE B 89 / 100

   first audit · source 7196f765fc11

Questions about compose-graphics

• github.com/athevon/genjutsu/tree/main/skills/_jutsu/compose-grap — the audited source at commit 7196f765fc11 and every finding aboveObserved · 22 Oct 2026

Spotted something wrong? Report a correction · Methodology