Generate Makepad Animation Code and Explanations

Makepad Animation Skill is an expert reference for building and debugging animations, transitions, hover states, and animator timelines in the Makepad Rust UI framework (tracks the makepad-widgets dev branch). It generates animation code following documented patterns and explains states, transitions, and timelines rather than giving generic Rust UI guidance.

Before answering, it is instructed to read a local animation-system.md reference file and incorporate its content, falling back to SKILL.md patterns plus built-in knowledge if the file is missing or empty (surfacing a documentation-sync command to the user in that case). It documents the animator structure - a root animator container holding named states (hover, pressed, focus, disabled), each with a default: initial value and named value definitions (on/off/custom) that specify a from: transition timeline and an apply: block of properties to animate.

<Button> {
    text: "Hover Me"
    animator: {
        hover = {
            default: off
            off = { from: { all: Forward { duration: 0.15 } } apply: { draw_bg: { color: #333333 } } }
            on = { from: { all: Forward { duration: 0.15 } } apply: { draw_bg: { color: #555555 } } }
        }
    }
}

Four worked patterns cover basic hover animation, multi-state animation combining hover and pressed states with independent scale/color transitions, focus-state border animation, and a disabled-state pattern using Snap for instant (non-eased) transitions. It catalogs the Play enum timeline types (Forward, Snap, Reverse, Loop, BounceLoop) and the full Ease enum - linear, quadratic through quintic, sinusoidal, exponential, circular, elastic, back, bounce, plus custom ExpDecay, Bezier, and Pow easing - with the syntax for applying an easing function to a transition. It lists which draw_* shader uniforms are animatable (colors, sizes, transforms, opacity) and gives five rules for writing animation code: always set a default state, use Forward for smooth transitions and Snap for instant ones, keep durations short (0.1-0.3s) for a responsive feel, and animate shader uniforms in draw_bg/draw_text.

The Rust-side AnimatorImpl trait (animator_play, animator_cut, animator_in_state) is documented with a full event-handling example wiring FingerHoverIn/FingerHoverOut/FingerDown/FingerUp events to state transitions via id!(state.value) macro references. Five conceptual rules are given for answering questions about the system: states are independent and multiple can be active simultaneously, from defines how to animate while apply defines what to animate, and Makepad tweens between old and new values automatically.

Use this skill when building or debugging animations, transitions, hover states, or animator timelines in Makepad, or when the task involves the animator construct, state changes, easing, keyframes, or visual interaction feedback specific to Makepad rather than generic Rust UI work.

It is scoped to the Makepad animation system specifically. It is not a substitute for environment-specific validation, testing, or expert review - if the local reference documentation is missing, it flags this explicitly rather than silently guessing beyond its built-in knowledge.

Inputs: a description of the animation, transition, or interaction-feedback behavior needed in a Makepad widget.

Outputs: Makepad DSL animator blocks (states, timelines, easing) and/or Rust event-handling code wiring input events to animator_play/animator_cut calls.

Part of the Makepad skill family alongside DSL, layout, event/action, font, shader, deployment, basics, and reference skills; references local animation-system.md documentation kept in sync via a /sync-crate-skills makepad command.

Makepad UI developers building animated widgets, hover/focus/pressed state transitions, or interaction feedback who need Makepad-specific animator syntax and the Rust animation API.