Makepad 2.0 AnimationSAFE

Build App with Makepad and AI skills

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: makepad-2.0-animation
description: |
  CRITICAL: Use for Makepad 2.0 animation system. Triggers on:
  makepad animation, makepad animator, Animator, AnimatorState, hover effect,
  makepad transition, animation state, Forward, Snap, Loop, ease function,
  makepad animate, timeline, snap(), default @off, animation group,
  动画, 过渡, 悬停效果, 动画状态, 缓动函数
---

# Makepad 2.0 Animation Skill

> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-03-03

## Overview

The Animator system drives `instance()` shader variables over time, enabling hover effects, transitions, and looping animations. It uses independent animation tracks called "groups" that run simultaneously.

## Documentation

Refer to the local files for detailed documentation:
- `./references/animator-reference.md` - Complete Animator API, play types, ease functions, examples

## IMPORTANT: Documentation Completeness Check

**Before answering questions, Claude MUST:**

1. Read the relevant reference file(s) listed above
2. If file read fails or file is empty:
   - Inform user: "Reference docs incomplete. Still answering based on SKILL.md patterns."
   - Still answer based on SKILL.md patterns + built-in knowledge
3. If reference file exists, incorporate its content into the answer

---

## Critical: Widget Animator Support

**NOT all widgets support `animator`!** Adding `animator: Animator{...}` to an unsupported widget is **silently ignored** - no error, no animation, nothing happens.

### Widgets that SUPPORT Animator
`View`, `SolidView`, `RoundedView`, `ScrollXView`, `ScrollYView`, `ScrollXYView`, `Button`, `ButtonFlat`, `ButtonFlatter`, `CheckBox`, `Toggle`, `RadioButton`, `LinkLabel`, `TextInput`

### Widgets that DO NOT Support Animator
`Label`, `H1`-`H4`, `P`, `TextBox`, `Image`, `Icon`, `Markdown`, `Html`, `Slider`, `DropDown`, `Splitter`, `Hr`, `Filler`

**To animate a Label:** Wrap it in a View with the animator:
```
View{
    width: Fit height: Fit
    animator: Animator{
        hover: {
            default: @off
            off: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 0.0}} }
            on: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 1.0}} }
        }
    }
    label := Label{text: "Animated via parent"}
}
```

---

## Animator Structure

```
animator: Animator{
    <group_name>: {
        default: @<state_name>
        <state_name>: AnimatorState{
            from: { ... }
            ease: <EaseFunction>
            redraw: true
            apply: { ... }
        }
        <state_name>: AnimatorState{ ... }
    }
    <group_name>: { ... }
}
```

---

## Groups

Each group is an independent animation track. Common groups:

| Group | Purpose | Typical States |
|-------|---------|----------------|
| `hover` | Mouse hover in/out | `off`, `on` |
| `focus` | Keyboard focus | `off`, `on` |
| `active` | Toggled/checked state | `off`, `on` |
| `disabled` | Disabled state | `off`, `on` |
| `time` | Continuous looping | `off`, `on` |

Multiple groups animate simultaneously without interfering.

---

## The `from` Block

Controls transition timing. Keys are states being transitioned FROM, or `all` as catch-all.

```
// From any state, animate over 0.2 seconds
from: {all: Forward {duration: 0.2}}

// Instant from any state
from: {all: Snap}

// Different timing depending on origin
from: {
    all: Forward {duration: 0.1}
    down: Forward {duration: 0.01}
}
```

---

## Play Types

| Type | Description | Example |
|------|-------------|---------|
| `Forward {duration: 0.2}` | One-shot forward | Hover transitions |
| `Snap` | Instant jump, no animation | Default state initialization |
| `Loop {duration: 1.0}` | Looping animation | Loading spinners |
| `ReverseLoop {duration: 1.0}` | Ping-pong loop | Pulsing effects |
| `BounceLoop {duration: 1.0}` | Bounce back and forth | Bouncing animations |

---

## Ease Functions

| Function | Description |
|----------|-------------|
| `Linear` | Constant speed |
| `InQuad` / `OutQuad` / `InOutQuad` | Quadratic easing |
| `InCubic` / `OutCubic` / `InOutCubic` | Cubic easing |
| `InQuart` / `OutQuart` / `InOutQuart` | Quartic easing |
| `InQuint` / `OutQuint` / `InOutQuint` | Quintic easing |
| `InSine` / `OutSine` / `InOutSine` | Sine easing |
| `InExp` / `OutExp` / `InOutExp` | Exponential easing |
| `InCirc` / `OutCirc` / `InOutCirc` | Circular easing |
| `InElastic` / `OutElastic` / `InOutElastic` | Elastic spring |
| `InBack` / `OutBack` / `InOutBack` | Overshoot |
| `InBounce` / `OutBounce` / `InOutBounce` | Bounce |

Usage: `ease: OutCubic` in the AnimatorState (optional, defaults to Linear).

---

## The `apply` Block

Target values to animate TO. Structure mirrors the widget's shader properties.

```
// Animate single properties
apply: {
    draw_bg: {hover: 1.0}
}

// Animate multiple properties
apply: {
    draw_bg: {hover: 1.0 color: #f00}
    draw_text: {color: #fff}
}
```

**CRITICAL:** Only `instance()` shader variables can be animated. `uniform()` variables cannot.

---

## Complete Hover Button Example

```
use mod.prelude.widgets.*

let HoverCard = RoundedView{
    width: Fill height: Fit
    padding: 16
    new_batch: true
    cursor: Hand
    draw_bg +: {
        instance hover: 0.0
        color: mix(#2a2a3d, #3a3a5d, self.hover)
        border_radius: 8.0
    }
    animator: Animator{
        hover: {
            default: @off
            off: AnimatorState{
                from: {all: Forward {duration: 0.15}}
                apply: {draw_bg: {hover: 0.0}}
            }
            on: AnimatorState{
                from: {all: Forward {duration: 0.15}}
                apply: {draw_bg: {hover: 1.0}}
            }
        }
    }
    title := Label{text: "Hover me" draw_text.color: #fff}
}
```

**Key points:**
- `new_batch: true` is REQUIRED for hoverable items with backgrounds
- `cursor: Hand` shows pointer cursor on hover
- `instance hover: 0.0` declares the animatable variable
-

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (1)

Gates applied: no_behavioural_pass, no_license.