Kinetic-type product explainer walks through an ad workflow
117 views·Posted 24 Sept 2026 · 0:57 · Explainers
Our note
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.
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 briefI 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
1 · Copy the prompt
Use the prompt above as your starting point, then change the subject and the style.
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, and send two or three rounds of specific notes.
3 · Render it to MP4
Screen-record a short piece, or capture it frame by frame for exact timing. How →
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
Views as of collection. Video, post and prompt © their creator.
Create with Zryth