From makepad-skills
Implements animations in Makepad 2.0 UI widgets using Animator for hover effects, focus, transitions, and states with ease functions and groups.
npx claudepluginhub zhanghandong/makepad-skills --plugin makepad-skillsThis skill uses the workspace's default tool permissions.
> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-03-03
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Version: makepad-widgets (dev branch) | Last Updated: 2026-03-03
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.
Refer to the local files for detailed documentation:
./references/animator-reference.md - Complete Animator API, play types, ease functions, examplesBefore answering questions, Claude MUST:
NOT all widgets support animator! Adding animator: Animator{...} to an unsupported widget is silently ignored - no error, no animation, nothing happens.
View, SolidView, RoundedView, ScrollXView, ScrollYView, ScrollXYView, Button, ButtonFlat, ButtonFlatter, CheckBox, Toggle, RadioButton, LinkLabel, TextInput
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: Animator{
<group_name>: {
default: @<state_name>
<state_name>: AnimatorState{
from: { ... }
ease: <EaseFunction>
redraw: true
apply: { ... }
}
<state_name>: AnimatorState{ ... }
}
<group_name>: { ... }
}
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.
from BlockControls 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}
}
| 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 |
| 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).
apply BlockTarget 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.
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 backgroundscursor: Hand shows pointer cursor on hoverinstance hover: 0.0 declares the animatable variablemix(color1, color2, self.hover) interpolates between colorsFor multi-step animations use timeline():
animator: Animator{
time: {
default: @off
on: AnimatorState{
from: {all: Loop {duration: 2.0}}
apply: {
draw_bg: {
rotation: timeline(){
snap(0.0)
snap(6.28)
}
}
}
}
}
}
let Spinner = View{
width: 40 height: 40
draw_bg +: {
instance rotation: 0.0
pixel: fn() {
let sdf = Sdf2d.viewport(self.pos * self.rect_size)
let cx = self.rect_size.x * 0.5
let cy = self.rect_size.y * 0.5
let r = min(cx, cy) * 0.8
sdf.arc(cx, cy, r, self.rotation, self.rotation + 4.5, 3.0)
sdf.stroke(#4488ff, 2.5)
return sdf.result
}
}
animator: Animator{
time: {
default: @on
on: AnimatorState{
from: {all: Loop {duration: 1.0}}
apply: {
draw_bg: {
rotation: timeline(){
snap(0.0)
snap(6.28318)
}
}
}
}
}
}
}
Makepad has two separate animation systems:
| Feature | Animator (this skill) | Tween (see makepad-2.0-vector) |
|---|---|---|
| Target | Widget shader instance vars | SVG shape properties (fill, cx, opacity...) |
| Syntax | animator: Animator{...} block | Property value: opacity:Tween{...} |
| Triggers | State transitions (hover, focus) | Automatic on render |
| Loop | Loop {duration: 1.0} in from | loop_:true (bool, NOT string!) |
| Use for | UI interactions (hover, click) | SVG/Vector graphic animations |
Use Animator for: Button hover effects, toggle states, loading spinners (shader-based) Use Vector Tween for: SVG path animations, pulsing indicators, moving dots, color transitions
See the makepad-2.0-vector skill for Tween details.
new_batch: true to Views with backgrounds that have hover animationsinstance variables for anything you want to animatedefault: @off for states that start inactive