@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/animated-infographic/SKILL.md

@@ -1,211 +0,0 @@
----
-name: animated-infographic
-description: "This skill should be used when the user asks to \"make an animated infographic\", \"create an infographic video\", \"build an infographic animation\", \"animate an explainer infographic\", \"do a sequenced reveal of icons and stats\", \"animate icons with key numbers and connectors\", or \"lay out a designed infographic that animates in sequence\". Covers infographic layout & visual hierarchy, staggered element reveals, animating icons/pictograms, key-number counters, connectors/flow, and section pacing. For heavy charting (bar chart race, charts from a CSV) use the chart-animation skill instead. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: MIT
-source: "iart-ai/data-animation-skills"
----
-
-# Animated Infographic
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-Build a *designed* infographic — icons, a few key numbers, short text, and simple shapes arranged with real visual hierarchy — then animate it in sequence so each element earns its moment. The craft is composition first, choreography second: a static layout that reads on its own, revealed in a staggered cascade that guides the eye exactly where you want it.
-
-## When to use
-
-- Mixed-layout explainers: "X in 3 steps", "how it works", "by the numbers", a stat-card grid.
-- Sequenced reveal of icon + stat + label + connector as a single designed scene.
-- Pictogram/icon animation, count-up key numbers, flow connectors between steps.
-
-This skill owns the **composed infographic**. For a chart that *is* the content (bar chart race, animated line/area, a graph driven by a CSV), use **chart-animation** — and compose its chart as one block inside an infographic here rather than rebuilding it.
-
-## The one rule: design the static frame first
-
-A great animated infographic is a great *static* infographic that happens to move. Lay out and balance the full composition — every icon, number, and label in its final position — before adding a single keyframe. Animation then only controls *when* each already-placed element appears; it never decides layout. This prevents the most common failure: elements that fly to positions that were never designed, so the final held frame looks accidental.
-
-Scope tightly: one central insight, **3–5 supporting data points**, in 30–90s. More than five competing elements and the cascade reads as chaos.
-
-## Visual hierarchy → reveal order
-
-Reveal order *is* the hierarchy. The eye follows appearance, so animate elements in importance order, not layout order. Map each element to a tier, then reveal tier by tier.
-
-| Tier | Element | Reveal | Motion |
-|---|---|---|---|
-| 1 | Section title / central insight | first, alone | fade + slight rise |
-| 2 | Icon (anchors each item) | per item, leads its group | pop / scale-overshoot |
-| 3 | Key number (counter) | right after its icon | count-up, ease-out |
-| 4 | Label / caption | settles under the number | fade, no motion drama |
-| 5 | Connector / flow line | links items as they complete | draw-on (path length) |
-
-Use size, weight, and color for static hierarchy; use **timing and motion** for the animated layer. One loud thing at a time — never count two numbers at once.
-
-## Stagger: the cascade
-
-Reveal sibling items with a fixed delay between them (a *stagger*) so the group reads as a sequence, not a flash. Drive every element from the current frame as a pure function — never wall-clock time or a library's animation loop — so renders are deterministic.
-
-```jsx
-import { useCurrentFrame, spring, useVideoConfig } from "remotion";
-
-const STAGGER = 8; // frames between siblings (~0.27s @30fps)
-
-function Item({ index, children }) {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const local = frame - index * STAGGER;            // this item's own clock
-  const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
-  return (
-    <div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
-      {children}
-    </div>
-  );
-}
-```
-A stagger of 6–10 frames feels crisp; above ~15 it drags. Keep one enter curve across all siblings so the cascade reads as confidence, not noise.
-```
-
-## Animating icons: the pop
-
-Icons anchor each item, so give them the strongest entrance — a scale-overshoot ("pop") that settles. Use a spring with low damping for the bounce; never linear scale (reads mechanical).
-
-```jsx
-const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
-// pop overshoots past 1 then settles → lively
-<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>
-```
-For pictogram fills (e.g. "7 of 10 people"), reveal units on the same stagger and clip the partial unit with a mask rather than scaling it.
-```
-
-## Key numbers: counters that settle
-
-Interpolate the underlying number, ease it, then format on render. Two musts: **round before formatting**, and use `tabular-nums` so the layout doesn't jitter as digits change. (Shared craft with chart-animation — see its counter section for currency/percent variants.)
-
-```jsx
-import { interpolate, Easing } from "remotion";
-
-const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
-  extrapolateLeft: "clamp", extrapolateRight: "clamp",
-  easing: Easing.out(Easing.cubic),   // "settling on a number"
-});
-const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
-// CSS: font-variant-numeric: tabular-nums; line-height: 1;
-```
-Ease-out on a headline number reads as arriving; linear reads as a robotic odometer. Hold each number ~0.5s before the next item begins.
-```
-
-## Connectors & flow
-
-Connectors turn a grid of cards into a *process*. Animate a line/arrow by drawing its path on, synced to land just as the item it points to finishes — motion that says "now look here next."
-
-```jsx
-const pathRef = useRef();
-const len = pathRef.current?.getTotalLength?.() ?? 0;
-const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
-<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
-  strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />
-```
-Draw the connector *between* the two items it joins, in the gap after the source appears and before the target — the line leads the eye into the next reveal.
-```
-
-## Section pacing
-
-Budget time per element, not per second of polish. A viewer can only track one moving thing at a time.
-
-| Beat | Budget |
-|---|---|
-| Title hold (let it land) | 0.8–1.2s |
-| Per item (icon pop → counter → label) | 1.2–2.0s |
-| Connector draw | 0.4–0.6s, overlaps into next item |
-| Final composed hold (screenshot-able) | 2–3s |
-
-End on the **complete static infographic held still** for 2–3s — the takeaway is the assembled frame, so let it settle with no motion competing.
-
-## Output checklist
-
-- Static layout designed and balanced *before* any keyframes; held final frame looks intentional.
-- One central insight, 3–5 data points, 30–90s.
-- Reveal order follows hierarchy (title → icon → number → label → connector), not layout order.
-- Siblings cascade on a consistent 6–10 frame stagger with one enter curve.
-- Icons pop with a spring overshoot; numbers count up eased + `tabular-nums`; only one number animates at a time.
-- Connectors draw on to lead the eye into the next reveal.
-- Every value is a pure function of `useCurrentFrame()`; no library timers.
-- Final composed frame holds ≥2s.
-
-## Deliver & verify (rendered stills → MP4)
-
-> **Packaged helper** (`scripts/`): tile your stills with `scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png`, then assert the encode with `scripts/probe-mp4.sh out.mp4 [WxH] [fps]`. See `scripts/README.md`.
-
-Remotion is frame-deterministic — every icon pop, counter value, and connector draw is a pure function of `useCurrentFrame()`, so you can render any exact frame headlessly with no seek harness. The infographic carries **key numbers**, so still-inspection catches a wrong stat or a stagger that lands off-canvas before you waste an encode.
-
-**Output contract:**
-- A Remotion project with the scene registered (`<Composition>` + zod `schema` + `defaultProps`), all motion frame-driven (no timers / `Date.now()` / `Math.random()`).
-- Deliverable = the rendered `out/*.mp4` (plus the project, so the user can re-render with new stats/icons).
-- Duration data-dependent (N items × per-item budget)? compute it in `calculateMetadata`, not by hand.
-
-**Verify loop — render stills → inspect → encode.** Render single frames first (cheap, no video encode), then encode only once the layout and numbers are right.
-
-# 1. Frame-exact stills — with the SHIPPED props. Pick frames that catch each tier:
-npx remotion still Infographic out/f-title.png --frame=20  --props='{"items":[...]}'  # title + first pop
-npx remotion still Infographic out/f-mid.png   --frame=90  --props='{"items":[...]}'  # mid cascade
-npx remotion still Infographic out/f-end.png   --frame=149 --props='{"items":[...]}'  # final composed hold (= durationInFrames - 1)
-
-# 2. Inspect each PNG — FIDELITY (every key number exact, labels/captions correct, icons the right glyph)
-
-#    AND artifacts (text overflow, icon off-canvas, clipped safe-area, missing font, connector pointing
-
-#    at the wrong item, half-revealed element where a tier should be settled).
-
-# 3. Only after the stills check out, encode:
-npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'
-```
-- Use `npx remotion compositions` to read `durationInFrames`/`fps`; the **final composed hold** is the money frame — verify it looks intentional, not mid-cascade.
-- **Data-driven / batch**: verify ONE representative props set (stats + labels) via stills *before* batch-rendering all variants — catch a counter or layout bug once, not N times.
-- **README demo GIF for free**: `npx remotion render Infographic out/demo.gif --codec=gif`.
-
-**Before you finish:**
-1. `npx remotion still` renders cleanly at title, mid-cascade, and final hold — no errors, no missing fonts/icons.
-2. Every key number is **exact** (rounded, `tabular-nums`) and every element is inside the safe area at each frame.
-3. Frame-driven only — no `Date.now()` / `Math.random()` / library timers (determinism holds in CI).
-4. The **shipped** props render correctly (not just `defaultProps`) — right stats, right icons, right labels.
-5. Full MP4 encoded and plays; (optional) GIF rendered for the README.
-```
-
-## Reference files
-
-- `references/sequenced-infographic.md` — a complete runnable Remotion scene: a 3-step "how it works" infographic with staggered icon pops, eased count-up stats, draw-on connectors, a master timing map, and the make-it-data-driven (template × data) prop pattern. Includes a dependency-free inline-SVG variant for non-Remotion use.
-
-## Source
-
-Rewritten for AICUT from [`iart-ai/data-animation-skills`](https://github.com/iart-ai/data-animation-skills)
-(MIT), skills/animated-infographic/SKILL.md. The method is that skill's own; the way it runs is AICUT's.
-
-The repository holds 3 skills; this is the one its entry stands for.

package/skills/animated-infographic/references/sequenced-infographic.md

@@ -1,286 +0,0 @@
-# Sequenced Infographic — runnable reference
-
-A complete, runnable Remotion scene: a 3-step "How it works" infographic where each step reveals as an **icon pop → eased count-up stat → label**, joined by **draw-on connectors**, ending on a held static frame. Below the Remotion version is a master timing map, a template×data pattern, and a dependency-free inline-SVG variant.
-
-## Mental model
-
-Three clocks, one source:
-
-1. **Frame** — `useCurrentFrame()` is the only clock. Every value is a pure function of it.
-2. **Item-local frame** — `frame - itemStartFrame` gives each item its own 0-based timeline, so the same `Step` component animates correctly wherever it sits in the sequence.
-3. **Element offset** — within an item, the icon leads (offset 0), the counter follows (offset ~6f), the label trails (offset ~12f). Hierarchy becomes timing.
-
-Design the static layout first (positions below are final), then these clocks only decide *when* each placed element fades in.
-
-## Remotion: `SequencedInfographic.tsx`
-
-```tsx
-import {
-  AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Easing, Sequence,
-} from "remotion";
-import { useRef } from "react";
-
-// ---- Data is a PROP, never hardcoded (enables template × data, see below) ----
-export type Step = { icon: "search" | "wrench" | "rocket"; value: number; suffix?: string; label: string };
-export type Props = { title: string; steps: Step[]; theme?: Partial<Theme> };
-
-type Theme = { bg: string; ink: string; sub: string; accent: string; line: string; font: string };
-const DEFAULT_THEME: Theme = {
-  bg: "#0E1116", ink: "#F5F7FA", sub: "#9AA4B2", accent: "#5B8DEF", line: "#3A4250",
-  font: "Inter, system-ui, sans-serif",
-};
-
-// Timing constants (frames @ 30fps) — the choreography lives here
-const TITLE_HOLD = 30;     // 1.0s before steps begin
-const STEP_STRIDE = 48;    // 1.6s per step (pop → count → label, then connector overlaps)
-const ICON_OFFSET = 0;
-const COUNT_OFFSET = 6;
-const LABEL_OFFSET = 14;
-const CONNECTOR_OFFSET = 30; // draws after the source step, leading into the next
-
-// ---------- Count-up number that settles (ease-out cubic) ----------
-function Counter({ from = 0, to, suffix = "", startFrame }: { from?: number; to: number; suffix?: string; startFrame: number }) {
-  const frame = useCurrentFrame();
-  const raw = interpolate(frame - startFrame, [0, 30], [from, to], {
-    extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic),
-  });
-  const n = Math.round(raw);
-  const text = `${new Intl.NumberFormat("en-US").format(n)}${suffix}`;
-  return <span style={{ fontVariantNumeric: "tabular-nums", lineHeight: 1 }}>{text}</span>;
-}
-
-// ---------- Minimal inline icon set (replace with your own SVG paths) ----------
-function Icon({ name, color }: { name: Step["icon"]; color: string }) {
-  const paths: Record<Step["icon"], string> = {
-    search: "M11 19a8 8 0 1 1 5.3-2L21 21",
-    wrench: "M14 7a4 4 0 0 1-5 5L4 17l3 3 5-5a4 4 0 0 1 5-5l-3-3z",
-    rocket: "M5 15l4 4M9 11a8 8 0 0 1 9-6 8 8 0 0 1-6 9l-3 3-3-3 3-3z",
-  };
-  return (
-    <svg width={56} height={56} viewBox="0 0 24 24" fill="none"
-      stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
-      <path d={paths[name]} />
-    </svg>
-  );
-}
-
-// ---------- One step: icon pops, number counts, label fades — all on item-local frame ----------
-function StepCard({ step, startFrame, theme }: { step: Step; startFrame: number; theme: Theme }) {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const local = frame - startFrame;
-
-  // Icon: spring with overshoot ("pop")
-  const pop = spring({ frame: local - ICON_OFFSET, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
-
-  // Label: plain fade + rise (no drama — it's tier 4)
-  const labelIn = spring({ frame: local - LABEL_OFFSET, fps, config: { damping: 16, mass: 0.6 } });
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, width: 240 }}>
-      <div style={{
-        width: 96, height: 96, borderRadius: 24, display: "grid", placeItems: "center",
-        background: "rgba(91,141,239,0.12)", transform: `scale(${pop})`, transformOrigin: "center",
-      }}>
-        <Icon name={step.icon} color={theme.accent} />
-      </div>
-      <div style={{ color: theme.ink, fontSize: 52, fontWeight: 800 }}>
-        <Counter to={step.value} suffix={step.suffix} startFrame={startFrame + COUNT_OFFSET} />
-      </div>
-      <div style={{
-        color: theme.sub, fontSize: 20, textAlign: "center",
-        opacity: labelIn, transform: `translateY(${(1 - labelIn) * 12}px)`,
-      }}>
-        {step.label}
-      </div>
-    </div>
-  );
-}
-
-// ---------- Connector: a horizontal line that draws on between two steps ----------
-function Connector({ startFrame }: { startFrame: number }) {
-  const frame = useCurrentFrame();
-  const ref = useRef<SVGPathElement>(null);
-  const len = ref.current?.getTotalLength?.() ?? 120;
-  const draw = interpolate(frame - startFrame, [0, 18], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return (
-    <svg width={120} height={48} viewBox="0 0 120 48" style={{ overflow: "visible" }}>
-      <path ref={ref} d="M8 24 H112" fill="none" stroke="#3A4250" strokeWidth={3} strokeLinecap="round"
-        strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />
-      <path d="M104 18 L114 24 L104 30" fill="none" stroke="#3A4250" strokeWidth={3}
-        strokeLinecap="round" strokeLinejoin="round"
-        style={{ opacity: interpolate(frame - startFrame, [14, 18], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }} />
-    </svg>
-  );
-}
-
-export const SequencedInfographic: React.FC<Props> = ({ title, steps, theme: t }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const theme = { ...DEFAULT_THEME, ...t };
-
-  const titleIn = spring({ frame, fps, config: { damping: 18, mass: 0.7 } });
-
-  return (
-    <AbsoluteFill style={{ background: theme.bg, fontFamily: theme.font, padding: 80,
-      display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 64 }}>
-      <h1 style={{ color: theme.ink, fontSize: 56, fontWeight: 800, margin: 0, textAlign: "center",
-        opacity: titleIn, transform: `translateY(${(1 - titleIn) * 20}px)` }}>
-        {title}
-      </h1>
-
-      <div style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
-        {steps.map((step, i) => {
-          const start = TITLE_HOLD + i * STEP_STRIDE;
-          return (
-            <div key={`${step.label}-${i}`} style={{ display: "flex", alignItems: "center", gap: 8 }}>
-              <StepCard step={step} startFrame={start} theme={theme} />
-              {i < steps.length - 1 && (
-                // connector draws ~1s after this step starts, leading into the next
-                <div style={{ marginTop: 36 }}>
-                  <Connector startFrame={start + CONNECTOR_OFFSET} />
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </AbsoluteFill>
-  );
-};
-```
-
-### Register it (`Root.tsx`)
-
-```tsx
-import { Composition } from "remotion";
-import { SequencedInfographic } from "./SequencedInfographic";
-
-const DEMO = {
-  title: "How it works",
-  steps: [
-    { icon: "search", value: 3,    suffix: "k+", label: "Sources scanned" },
-    { icon: "wrench", value: 92,   suffix: "%",  label: "Auto-matched" },
-    { icon: "rocket", value: 1287, suffix: "",   label: "Reports shipped" },
-  ],
-} as const;
-
-export const Root = () => (
-  <Composition
-    id="SequencedInfographic"
-    component={SequencedInfographic}
-    durationInFrames={TITLE_HOLD_PLUS_STEPS()} // e.g. 30 + 3*48 + 90 hold ≈ 264
-    fps={30}
-    width={1920}
-    height={1080}
-    defaultProps={DEMO}
-  />
-);
-function TITLE_HOLD_PLUS_STEPS() { return 30 + 3 * 48 + 90; }
-```
-
-```bash
-npm i remotion @remotion/cli react react-dom
-npx remotion studio        # preview, scrub the timeline
-npx remotion render SequencedInfographic out/infographic.mp4
-```
-
-## Master timing map (3 steps, 30fps)
-
-| Frame | s | Event |
-|---|---|---|
-| 0–30 | 0.0–1.0 | Title springs in, holds |
-| 30 | 1.0 | Step 1 icon pops |
-| 36 | 1.2 | Step 1 counter starts (settles by ~66 / 2.2s) |
-| 44 | 1.5 | Step 1 label fades up |
-| 60 | 2.0 | Connector 1 draws → arrow into step 2 |
-| 78 | 2.6 | Step 2 icon pops (stride 48f) |
-| 126 | 4.2 | Step 3 icon pops |
-| ~174 | 5.8 | All elements settled |
-| 174–264 | 5.8–8.8 | **Held static infographic** (screenshot-able) |
-
-Only one counter runs at a time (steps are 1.6s apart, a counter settles in ~1s) — the eye is never asked to read two moving numbers.
-
-## Template × data — one design, many infographics
-
-`steps` is already a prop, so the same composition renders any dataset. Keep theme/layout fixed; change only the data.
-
-```bash
-# render the same infographic template for every dataset in /data
-for f in data/*.json; do
-  name=$(basename "$f" .json)
-  npx remotion render SequencedInfographic "out/$name.mp4" --props="$f"
-done
-```
-
-```json
-// data/q2-results.json — shape matches Props
-{
-  "title": "Q2 by the numbers",
-  "steps": [
-    { "icon": "search", "value": 48,   "suffix": "k",  "label": "New signups" },
-    { "icon": "wrench", "value": 99,    "suffix": "%",  "label": "Uptime" },
-    { "icon": "rocket", "value": 2400000,"suffix": "",  "label": "API calls/day" }
-  ]
-}
-```
-
-Validate before rendering: confirm `steps.length` is 3–5, every `value` is a finite number, and `icon` is one of the known keys — bad data should fail loudly, not render a broken frame.
-
-## Dependency-free variant (inline SVG + Web Animations API)
-
-For a landing page or a quick capture without Remotion. The same choreography — staggered icon pop, counter, connector draw — driven by `requestAnimationFrame` (fine for live playback; for frame-exact MP4 export prefer the Remotion version above).
-
-```html
-<div id="infographic" style="display:flex;gap:8px;font-family:Inter,sans-serif;background:#0E1116;padding:60px">
-  <template id="step">
-    <div class="card" style="opacity:0;width:220px;text-align:center">
-      <div class="icon" style="display:inline-grid;place-items:center;width:96px;height:96px;border-radius:24px;
-        background:rgba(91,141,239,.12);transform:scale(0)"></div>
-      <div class="num" style="color:#F5F7FA;font-size:52px;font-weight:800;font-variant-numeric:tabular-nums">0</div>
-      <div class="lbl" style="color:#9AA4B2;font-size:20px"></div>
-    </div>
-  </template>
-</div>
-<script>
-const STEPS = [
-  { icon:"🔍", value:3,    suffix:"k+", label:"Sources scanned" },
-  { icon:"🔧", value:92,   suffix:"%",  label:"Auto-matched" },
-  { icon:"🚀", value:1287, suffix:"",   label:"Reports shipped" },
-];
-const root = document.getElementById("infographic");
-const tpl  = document.getElementById("step");
-const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
-
-STEPS.forEach((s, i) => {
-  const node = tpl.content.cloneNode(true);
-  const card = node.querySelector(".card");
-  card.querySelector(".icon").textContent = s.icon;
-  card.querySelector(".lbl").textContent  = s.label;
-  const numEl = card.querySelector(".num");
-  root.appendChild(node);
-
-  const delay = i * 480;                         // 480ms stagger between steps
-  card.animate([{opacity:0},{opacity:1}], {duration:300, delay, fill:"forwards"});
-  // icon pop with overshoot
-  card.querySelector(".icon").animate(
-    [{transform:"scale(0)"},{transform:"scale(1.15)"},{transform:"scale(1)"}],
-    {duration:500, delay:delay+60, fill:"forwards", easing:"cubic-bezier(.34,1.56,.64,1)"});
-  // counter (ease-out), starts after the icon
-  const t0 = delay + 200, dur = 900;
-  const tick = now => {
-    const p = Math.min(1, (now - start - t0) / dur);
-    if (p >= 0) numEl.textContent = Math.round(easeOutCubic(p) * s.value).toLocaleString() + s.suffix;
-    if (p < 1) requestAnimationFrame(tick);
-  };
-  let start; requestAnimationFrame(n => { start = n; requestAnimationFrame(tick); });
-});
-</script>
-```
-
-Swap the emoji for inline `<svg>` icons in production, and add SVG `<path>` connectors with an animated `stroke-dashoffset` (same draw-on technique as the Remotion `Connector`) to join the cards.
-
----
-## Built by the team behind iart.ai
-
-This skill is part of an open motion-graphics collection from iart.ai — the AI motion agent that turns data, scripts, and designs into editable motion graphics (Remotion → MP4). If you'd rather not hand-build this, iart.ai can build data-driven animated infographics from a template — change the text/data and re-export. → [iart.ai](https://iart.ai/?utm_source=github&utm_medium=reference&utm_campaign=data-animation-skills&utm_content=ref_footer&utm_term=animated-infographic)