Contenu du pack

Un fichier SKILL.md (le guide pratique) + un modèle de départ. Aperçu :

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.
4. Respect reduced motion (input: motion spec → output: an accessible implementation)
   Honor the visitor's reduced-motion preference: when it is set, the hero shows the still frame with no movement at all — no slower version, no partial version, just still. Keep the moving element out of the way of reading: nothing should slide across the headline while someone is trying to read it, and no motion should auto-play with sound. The motion must also degrade gracefully when images or scripts fail: the still frame is the fallback, not an error state.
5. Tune by watching, not by feeling (input: built hero → output: a verified hero)
   Watch five real people (or recordings) encounter the hero and note two things: where their eyes go first, and whether anyone re-reads the headline because the motion distracted them. If eyes go to the motion before the headline, shrink the motion or slow it down; the headline must win. If anyone says the page felt "busy," you have two gestures hiding in one — find the second and cut it. Ship only when the motion feels like a quiet underline, not a wave.

Aperçu du modèle

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

Le pack de compétence lui-même (SKILL.md + modèle) est rédigé en anglais.

Acheter le pack complet — $4.99 Pro — les 511 compétences