Contenu du pack

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

Ratio Bars

When to use

• You have 3–7 parts of a whole (percentages that sum to ~100%) and want the audience to feel the sizes, not just read numbers
• A pie chart is too cramped to label, or the differences between slices are too small to see as angles
• The ranking matters: the viewer should instantly see what is biggest, what is tiny, and the gaps between them
• You are presenting survey results, a budget split, time allocation, or market share in a 15–30 second clip or a single animated slide
• The numbers will be compared across two moments (before/after, this year/last year) — bars make change readable

Workflow

1. Clean the numbers (input: raw figures → output: 3–7 labeled values summing to ~100%)
   Convert everything to percentages of the same whole. Sort descending — biggest bar on top — unless the categories have a natural order (e.g. age bands, price tiers) that the audience already knows; then keep that order and say so. Merge slivers below ~3% into "Other" so the chart isn't a row of unreadable threads. Round to whole percents; if rounding breaks the total, adjust the largest value by the remainder and note it. Each bar gets a 1–4 word label.
2. Lay out the bars (input: values → output: static bar layout)
   One row per category: label left (or above the bar), bar in the middle, value right. Bars share one baseline at zero and one maximum scale — never rescale individual bars, or the visual lies. Bar height: 36–56 px at 1080p, gap between rows 18–28 px. Value labels in the same weight as the labels, aligned right so the numbers form a clean column. Background: quiet; gridlines at 0/25/50/75/100% in faint strokes if they help reading, omitted if they clutter.
3. Animate the growth (input: static layout → output: bar keyframes)
   All bars grow left-to-right from zero simultaneously over 1.2–1.8 s, ease-out (fast start, settling end). Simultaneous growth lets the eye compare final lengths; staggered growth makes the viewer wait and invites a false "race" reading. If you do stagger (e.g. to narrate each bar), stagger by 0.2 s and keep the total under 3 s. The value numbers count up in sync with the bar length (0 → final value over the same duration), formatted as whole percents.
4. Emphasize the takeaway (input: grown bars → output: emphasis pass)
   Once growth completes, emphasize the one bar the story is about: it keeps full color while the others dim to 35–45% opacity, or a thin highlight outline draws around it (0.4 s, ease-out). Add a one-line takeaway beneath the chart ("Over half goes to X") — 8–12 words, appearing 0.3 s after the emphasis. If there is no single takeaway, skip the emphasis: dimming without a point just looks like a mistake.
5. Hold and export (input: finished chart → output: 15–30 s clip or loop)
   Hold the finished chart 2–3 s so it can be read and screenshotted. For a before/after comparison, animate the bars morphing from set A to set B over 0.8–1.0 s (ease-in-out) after the hold, then hold again. Export 1920×1080 or 1080×1080, 30 fps. If the chart goes into a slide deck, export the final frame as a still plus the animation as a video — never stretch a video across a slide and hope.

Aperçu du modèle

Ratio Bars — Template

Fill in the blanks, then build the chart from the SKILL.md workflow.

Data

Whole (what 100% means): {e.g. survey respondents / monthly budget / market} Order: [ ] Descending / [ ] Natural order ({state the order}) Rounding note: {e.g. largest value adjusted by 1 pt so total = 100%}

Total: {100}% | Source / footnote: {source, date}

Layout

Format: [ ] Horizontal 1920×1080 / [ ] Square 1080×1080 Bar height: {36–56 px} | Row gap: {18–28 px} Gridlines: [ ] 0/25/50/75/100% faint / [ ] None Palette: {one hue family + one accent for takeaway bar}

Animation

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