Kinetic-type product explainer walks through an ad workflow

Name: Kinetic-type product explainer walks through an ad workflow
Uploaded: 2026-09-23T19:46:17.000Z
Duration: 57 s
Channel: Carlos Mendez
Description: A slick product explainer for DataGran that walks through building an ad campaign, connecting metrics and attribution, and adding a voice agent, using bold kinetic typography built with SVG and GSAP on a beat-timed timeline.

Carlos MendezVERIFIED

@charlesmendez

VIEW ORIGINAL ON X ↗

117 views · 0 likes · 0 saves · 0 reposts · Posted Sep 23, 2026 · 0:57 · Explainers

OUR NOTEA slick product explainer for DataGran that walks through building an ad campaign, connecting metrics and attribution, and adding a voice agent, using bold kinetic typography built with SVG and GSAP on a beat-timed timeline.

THE CREATOR'S POST

Holly Cow. Just asked Opus 5.5 to do an explainer video of @DataGran . Prompt: I Want you to make a modern slick and punchy video for http://datagran.io with an example of a user creating a chatgpt ads campaign, then connecting their metrics, understanding attribution, then connecting a voice agent to it, the agent responding, then doing follow up, adding humans in the loop and then providing analytics.

THE PROMPT

Multi-step product workflow brief

I Want you to make a modern slick and punchy video for 
http://
datagran.io with an example of a user creating a chatgpt ads campaign, then connecting their metrics, understanding attribution, then connecting a voice agent to it, the agent responding, then doing follow up, adding humans in the loop and then providing analytics.

MAKE ONE LIKE THIS

Three steps, using what the creators in this index used.

1 · Copy the prompt
Use the prompt above as your starting point, then change the subject and the style.
HOW OTHERS WROTE THEIRS →
2 · Direct it like an editor
- Ask for one self-contained HTML file on a fixed 1920×1080 stage.
- Link this video as the reference for pacing and style.
- Send two or three rounds of specific notes.
PROMPT TEMPLATE →
3 · Render it to MP4
A short piece like this can be screen-recorded, or captured frame by frame for exact timing.
TURN AN HTML ANIMATION INTO AN MP4 →

HOW IT WAS MADE

The creator didn't name their tools. Most videos like this are HTML, canvas or SVG animation written by Claude and screen-recorded or rendered to MP4 — how that works.

LOOK

kinetic-typeproduct-adui-mockup

LINKS & TAGS

datagran.io