How to add an animated line graph with Claude

A yellow line draws itself left to right across a dark grid, zigzagging upward from January to December, and a yellow "+184%" tag pops up where it ends.

Get this effect

  1. Switch to Code in your Claude Desktop App

  2. Install the skill (once)

    Show the prompt
    Install the Recharm video effects skill: download https://recharm-growth-staging.s3.us-east-2.amazonaws.com/website/downloads/recharm-video-effects.zip and unzip it into ~/.claude/skills
  3. Ask for the effect

    Add an animated line graph to input.mp4
    Title: Repeat buyers, 2026
    Labels: {0: "Jan", 3: "Apr", 6: "Jul", 9: "Oct"}

Several videos, several effects, one ask

Put your clips in the folder, mention them with @, and ask for everything at once. Claude runs one tested script after another on each clip, then joins them.

Add an animated line graph to @clip1.mp4, put a sale badge on @clip2.mp4, give @clip3.mp4 a VHS look, then join all three with crossfades.

Settings you can change

Ask Claude to change any of these, or edit them at the top of the script.

SettingDefaultWhat it does
TITLERepeat buyers, 2026Heading on the chart card.
VALUES[12, 18, 15, 27, 24, 36, 44, 40, 57, 66, 78, 92]Points left to right, 0-100 up the grid.
LABELS{0: "Jan", 3: "Apr", 6: "Jul", 9: "Oct"}Month names under the points they belong to.
FINAL+184%Value that pops up where the line ends.
START0.8Second the line starts drawing.
DRAW2.0Seconds the line takes to reach its last point.
COLOR(255, 196, 0)Line color.

Without the skill

Don’t want to install the skill? Paste this prompt into Claude Code and Claude writes the script itself.

Show the prompt
Add an animated line graph to input.mp4. At 0.4 seconds fade in, over 0.3 seconds, a dark (15, 15, 25) rounded card at 92% opacity spanning 6% to 94% across and 56% to 90% down, titled "Repeat buyers, 2026" in white bold text 5.5% of the frame width tall, its middle 3.5% of the frame height below the card's top and 4% of the frame width in from its left edge. Inside it, a plot area from 12% to 80% across and 66% to 84% down with five faint white horizontal grid lines evenly spaced from its top to its bottom. Twelve points, evenly spaced from the plot's left edge to its right edge, have the values 12, 18, 15, 27, 24, 36, 44, 40, 57, 66, 78 and 92 on a 0-100 scale from the plot's bottom to its top. Under the 1st, 4th, 7th and 10th points, centered 2.2% of the frame height below the plot, write "Jan", "Apr", "Jul" and "Oct" in semi-transparent white bold text 3.4% of the frame width tall. From 0.8 seconds draw a yellow (255, 196, 0) line through the points, 1.2% of the frame width thick, growing from the first point along its length to the last over 2.0 seconds with a smoothstep ease-in-out, with a white dot 3.2% of the frame width across and a yellow outline at its moving tip and a faint yellow fill (about 20% opacity) between the drawn line and the plot's bottom. When the line reaches the last point (2.8 seconds), pop in over 0.25 seconds with a slight overshoot a yellow (255, 196, 0) pill 22% of the frame width wide and 4.5% of the frame height tall, centered horizontally on the last point and 4.5% of the frame height above it, reading "+184%" in dark bold text 5% of the frame width tall. Everything then stays to the end. Use Python with Pillow to draw it and ffmpeg to put it on the video (don't rely on ffmpeg's drawtext filter), keep the audio, and save it as output.mp4.

Run it without Claude

This is the exact script we tested. Save it as animated-line-graph.py and run:

python3 animated-line-graph.py input.mp4 output.mp4
Show the script
#!/usr/bin/env python3
"""Animated line graph: a yellow line draws itself rising across a grid, then its final value pops up at the tip.

Usage: python3 animated-line-graph.py input.mp4 output.mp4
Needs ffmpeg and Pillow (pip install pillow).
"""
import json
import math
import subprocess
import sys
from pathlib import Path

from PIL import Image, ImageDraw, ImageFont

TITLE = "Repeat buyers, 2026"            # heading on the chart card
VALUES = [12, 18, 15, 27, 24, 36, 44, 40, 57, 66, 78, 92]  # points left to right, 0-100 up the grid
LABELS = {0: "Jan", 3: "Apr", 6: "Jul", 9: "Oct"}  # month names under the points they belong to
FINAL = "+184%"                          # value that pops up where the line ends
CARD_IN = 0.4            # second the card fades in
FADE = 0.3               # seconds the fade takes
START = 0.8              # second the line starts drawing
DRAW = 2.0               # seconds the line takes to reach its last point
POP = 0.25               # seconds the final value takes to pop up
CARD = (0.06, 0.56, 0.94, 0.90)  # card box: left, top, right, bottom (0-1 of the frame)
GRID = (0.12, 0.66, 0.80, 0.84)  # plot area: left, top, right, bottom (0-1 of the frame)
COLOR = (255, 196, 0)    # line color
FONTS = ["/System/Library/Fonts/Supplemental/Arial Bold.ttf",     # macOS
         "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",  # Linux
         "C:/Windows/Fonts/arialbd.ttf"]                          # Windows
FONT_FILE = next((f for f in FONTS if Path(f).exists()), None) or sys.exit("No bold font found: add one to FONTS")


def overlay(t):
    img = Image.new("RGBA", (w, h))
    fade = clamp((t - CARD_IN) / FADE)
    if fade == 0:
        return img
    draw = ImageDraw.Draw(img)
    x0, y0, x1, y1 = CARD[0] * w, CARD[1] * h, CARD[2] * w, CARD[3] * h
    draw.rounded_rectangle([x0, y0, x1, y1], radius=w * 0.04, fill=(15, 15, 25, round(235 * fade)))
    draw.text((x0 + w * 0.04, y0 + h * 0.035), TITLE, font=title_font, anchor="lm",
              fill=(255, 255, 255, round(255 * fade)))
    gx0, gy0, gx1, gy1 = GRID[0] * w, GRID[1] * h, GRID[2] * w, GRID[3] * h
    for i in range(5):
        y = gy0 + (gy1 - gy0) * i / 4
        draw.line([gx0, y, gx1, y], fill=(255, 255, 255, round(40 * fade)), width=1)
    for i, label in LABELS.items():
        draw.text((points[i][0], gy1 + h * 0.022), label, font=axis_font, anchor="mm",
                  fill=(255, 255, 255, round(150 * fade)))

    drawn = ease_in_out((t - START) / DRAW)
    if drawn > 0:
        line = path_up_to(drawn)
        shade = Image.new("RGBA", (w, h))
        ImageDraw.Draw(shade).polygon(line + [(line[-1][0], gy1), (gx0, gy1)], fill=COLOR + (50,))
        img.alpha_composite(shade)
        draw.line(line, fill=COLOR, width=round(w * 0.012), joint="curve")
        tx, ty = line[-1]
        r = w * 0.016
        draw.ellipse([tx - r, ty - r, tx + r, ty + r], fill="white", outline=COLOR, width=round(w * 0.006))
    pop = clamp((t - START - DRAW) / POP)
    if pop > 0:
        draw_final(draw, *points[-1], back_out(pop))
    return img


def path_up_to(share):
    """The graph's points up to `share` (0-1) of its length, ending part way along a segment."""
    goal = share * lengths[-1]
    i = next(i for i, d in enumerate(lengths) if d >= goal)
    if i == 0:
        return [points[0], points[0]]
    (ax, ay), (bx, by) = points[i - 1], points[i]
    f = (goal - lengths[i - 1]) / (lengths[i] - lengths[i - 1])
    return points[:i] + [(ax + (bx - ax) * f, ay + (by - ay) * f)]


def draw_final(draw, x, y, scale):
    """A yellow pill with the final value, standing above the line's last point."""
    pw, ph = w * 0.22 * scale, h * 0.045 * scale
    cx, cy = x, y - h * 0.045
    draw.rounded_rectangle([cx - pw / 2, cy - ph / 2, cx + pw / 2, cy + ph / 2], radius=ph / 2, fill=COLOR)
    if scale > 0.6:
        draw.text((cx, cy), FINAL, font=value_font, anchor="mm", fill=(20, 20, 30))


def clamp(p):
    return min(max(p, 0), 1)


def ease_in_out(p):
    """0 -> 1, easing in and out of the motion."""
    p = clamp(p)
    return 3 * p * p - 2 * p * p * p


def back_out(p):
    """0 -> 1 with a slight overshoot, for a pop."""
    return 1 + 2.7 * (p - 1) ** 3 + 1.7 * (p - 1) ** 2


def probe(path):
    info = json.loads(subprocess.check_output(["ffprobe", "-v", "error", "-select_streams", "v:0", "-show_entries",
                                               "stream=width,height,r_frame_rate:format=duration", "-of", "json", path]))
    s = info["streams"][0]
    num, den = s["r_frame_rate"].split("/")
    return s["width"], s["height"], s["r_frame_rate"], float(num) / float(den), float(info["format"]["duration"])


def render(src, out):
    """Draw overlay(t) on every frame of src and save to out, keeping the audio."""
    ff = subprocess.Popen(["ffmpeg", "-y", "-v", "error", "-i", src,
                           "-f", "rawvideo", "-pix_fmt", "rgba", "-s", f"{w}x{h}", "-r", rate, "-i", "-",
                           "-filter_complex", "[0:v][1:v]overlay=shortest=1,format=yuv420p[v]",
                           "-map", "[v]", "-map", "0:a?", "-c:v", "libx264", "-crf", "18", "-c:a", "copy", out],
                          stdin=subprocess.PIPE)
    for i in range(math.ceil(duration * fps)):
        ff.stdin.write(overlay(i / fps).tobytes())
    ff.stdin.close()
    if ff.wait():
        sys.exit("ffmpeg failed")


src, out = sys.argv[1:3]
w, h, rate, fps, duration = probe(src)
points = [(w * (GRID[0] + (GRID[2] - GRID[0]) * i / (len(VALUES) - 1)), h * (GRID[3] - (GRID[3] - GRID[1]) * v / 100))
          for i, v in enumerate(VALUES)]
lengths = [0.0]
for (ax, ay), (bx, by) in zip(points, points[1:]):
    lengths.append(lengths[-1] + math.hypot(bx - ax, by - ay))
title_font = ImageFont.truetype(FONT_FILE, round(w * 0.055))
axis_font = ImageFont.truetype(FONT_FILE, round(w * 0.034))
value_font = ImageFont.truetype(FONT_FILE, round(w * 0.05))
render(src, out)

Find 3x winning ads

Recharm cuts your ad footage into tagged, searchable clips: hooks, testimonials, product shots. Find the shots that win, add the effect with Claude, and ship 3x more ad edits.

Start 14-day free trial