Contenu du pack

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

Accumulating Cards and Counter

When to use

• You need to reveal a total — "127 projects shipped" — and want the audience to feel each unit land
• A year-in-review video needs a "what we did" beat where achievements pile up visibly
• A sales deck animation must show deals, users, or orders accumulating toward a quarterly number
• An explainer needs to make a big number believable by building it up one card at a time
• A social video needs a satisfying counting moment where visuals and numbers move together
• You have a list of items (features, milestones, wins) and want to show the list and the count at once

Workflow

1. Define the total and the units (input: your number + item list → output: card plan)
   Fix the final number first (e.g. 48) and decide what each card represents: one card per unit (48 cards) is unreadable; group instead — one card per 4, per category, or per milestone, so you land on 6–12 cards total. Each card gets a short label ("Q1 — 12 launches") and a value. The counter's final value must equal the sum of the card values exactly — check the arithmetic before animating anything, because a counter that lands on a different number than the cards imply looks broken.
2. Choreograph the entrance rhythm (input: card plan → output: timing map)
   Set the total duration (2.5–4 seconds for the full build is the sweet spot) and divide it into beats: one card every 180–250ms, each card flying in from the same off-screen direction (bottom-right, angled ~15°) and settling into the stack with a small overshoot. The counter ticks on every card landing, not continuously — the tick is the reward for the landing. Stagger pattern: first card slow (300ms, establishes the motion), middle cards fast and even, final card slow with a settle (350ms + 150ms hold) so the total feels earned.
3. Design the stack and counter layout (input: timing map → output: layout)
   The stack sits left or centre, fanned slightly (each card offset 6–10px down-right from the one below, top card fully visible, lower cards peeking) so accumulation is visible — a perfectly aligned pile hides the growth. The counter sits beside or above the stack in large type (at least 2× the card label size), with the unit word ("projects") locked next to it so the number never floats without meaning. Background stays plain and dark or light neutral; the cards carry one accent colour, the counter a stronger weight of the same colour.
4. Set easing and keyframes (input: layout → output: keyframe spec)
   Card entrance keyframes: 0% — translate (+320px, +180px), rotate 12°, scale 0.85, opacity 0; 60% — translate (0, -8px), rotate -1.5°, scale 1.02, opacity 1 (the overshoot); 100% — translate (0,0), rotate 0°, scale 1. Use ease-out cubic (cubic-bezier(0.22, 1, 0.36, 1)) for the flight, then a short ease-out back for the settle. Counter keyframes: hold value, then on each card-landing frame jump to the new subtotal with a 120ms ease-out scale pop (1 → 1.12 → 1) on the digits. Add a soft shadow that deepens 20% per card so the stack gains visual weight as it grows.
5. Add sound and landing emphasis (input: keyframe spec → output: finished motion)
   If the video has audio, add a soft tick or tap on each card landing (same sound, same volume — the repetition is the rhythm) and a slightly deeper thud on the final card. Visually, the final landing gets a 200ms scale pulse on the whole stack (1 → 1.03 → 1) plus a brief accent flash on the counter. Then hold the finished frame for at least 800ms before cutting — the audience needs a beat to read the total. Export a loop-safe version too: hold 800ms, then cards fade out together over 300ms, counter resets.
6. Check readability at full speed (input: finished motion → output: verified animation)
   Watch at real speed on a phone-sized screen: can you read at least the top card's label and the counter at every moment? If the counter blurs into a slot machine, slow the tick rate or reduce the card count. Check the final frame alone: does it communicate the total without the animation? It must — most viewers will see it as a thumbnail or a paused frame. If the final frame needs the motion to make sense, the layout is wrong.

Aperçu du modèle

Accumulating Cards and Counter — Starter Template

Fill in every {placeholder}. Check the arithmetic before animating: card values must sum to the final total exactly.

Card plan

• Final total: {total_number} {unit_word, e.g. projects}
• Grouping logic: {one_card_per_what, e.g. one card per milestone}
• Card count: {6–12}
• Cards (label ≤4 words + value):

1. {label} — {value}
2. {label} — {value}
3. {label} — {value}
4. {label} — {value}
5. {label} — {value}
6. {label} — {value}
7. {label} — {value} (add/remove rows to match count)

• Arithmetic check: {sum_of_values} = {total_number} ✓

Timing map

• Total duration: {2.5–4s}

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