Animated charts, counters and code from data
Charts, counters and highlighted code are generators: give them numbers and lines, and they draw themselves in. Change the data and render again; the layout and timing stay.
scene update dur=6.2s bg=#0E1116
chart #bars type=bar data=[18, 26, 23, 37, 44, 61] labels=["Q1", "Q2", "Q3", "Q4", "Q5", "Q6"] w=800 h=640 highlight=6 color=#18C29C in=draw
counter #n from=0 to=61 suffix=" %" size=150 weight=900 color=#FFE45B x=57% y=20%
code #snip lang=ts diff w=760 size=30 x=55.5% y=46% in=type |
export function render(scene: Scene) {
- return draw(scene.layers);
+ const frames = plan(scene);
+ return draw(frames, { cache: true });
}
@0.6s count #n to=61 dur=1.8s
@2.8s diff #snipAsk your agent
"Make a 10 second changelog clip: our weekly active users as a bar chart drawing in, the growth as a counter, and the main code change as a diff. Use our brand colours."
The agent writes the script, lints it, checks a contact sheet and renders every format. You give notes in plain words.
Parameters
chart type=bar|line|area|pie|donut: data, labels, highlight, units, gridcounter: from, to, prefix, suffix; count verbcode lang= diff: syntax highlight, typing in, diff swap
Related effects
FAQ
Can the data come from a CSV or an API?
The script holds the numbers, so an agent can read a CSV or an API and write them in. The video is then rebuilt from fresh data with one command.
Do chart labels overflow?
Lint measures labels and text boxes in every format and reports overflow before rendering.
Put an effects engine in your agent's hands.
AgentFX is open source under Apache 2.0. Clone it, build it, give the skill to your agent. Questions, ideas and effect requests are welcome on GitHub.