What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Minimal Motion Hero

When to use

• Your hero section is a static wall of text and a screenshot, and visitors bounce before reading the headline
• A product page needs to feel alive without turning into a carnival of floating blobs and parallax layers
• You have one thing worth showing in motion — a workflow, a transformation, a before-and-after — and it deserves the spotlight
• A rebrand toward minimalism left the hero feeling dead, and you want motion that respects the restraint
• You are A/B testing a calmer hero against a busy one and need a disciplined minimal version to compare

Workflow

1. Choose the one moving thing (input: your product and message → output: a single motion concept)
   Minimal motion means exactly one element moves. Pick the element that carries the product's core idea: a toggle flipping between two states, a line drawing itself, a card sliding into place, a number counting up to a real figure. Write down what the motion communicates in one sentence — "the setup takes three steps" or "the inbox goes from chaos to calm." If you cannot state what the motion means, it is decoration, and decoration is the first thing a minimal hero cuts.
2. Write the still frame first (input: motion concept → output: the static hero)
   Design the hero as if motion did not exist: headline, one supporting line, one call to action, and the element in its resting state. The still frame must make sense on its own, because many visitors will see exactly that — motion may be disabled, reduced by their settings, or simply missed. The headline carries the promise; the motion only underlines it. If the hero only works with the animation playing, the hierarchy is wrong.
3. Choreograph one gesture (input: still frame → output: motion spec)
   Define the single gesture precisely: what moves, from where to where, over how long, with what easing, and whether it loops, plays once, or responds to scroll or hover. Keep it slow and restrained — roughly 400–800 milliseconds for a one-shot gesture, gentle easing (ease-out, never linear or bouncy), and a loop only if the motion is ambient (a slow pulse, a drifting gradient) rather than informational. Two gestures competing for attention is not minimal; it is a busy hero wearing a minimal costume.

Template preview

Minimal Motion Hero — Design Template

One moving element. Everything else stays still.

The one moving thing

What moves: {the single element}

What the motion communicates (one sentence): {e.g. "Setup takes three steps" / "Chaos becomes calm"}

What does NOT move: {everything else — list the static elements}

Still frame (must make sense with zero motion)

Headline: {promise, ≤12 words}

Supporting line: {one line}

Call to action: {one button, plain verb}

Element at rest: {what the moving element looks like when still}

Motion spec

Accessibility & fallback

• [ ] Reduced-motion preference → still frame, no movement

Buy the full skill pack — $4.99 Pro — all 471 skills