Vishal Chopde
Contact Book a call (opens Calendly in a new tab)
  1. Home
  2. Work
  3. Lead System Film

Lead System Film: the whole system in 38 seconds

A 38-second animated walkthrough with a narrator and a mascot: one lead, followed from the first message to the owner's dashboard.

Motion explainer with narrationMotion design
Open the live demo (opens the demo in a new tab)

Problem and fix

What was broken.

before

The problem

Visitors had to read three pages to understand how the lead system fits together.

after

The fix

One short film shows the whole path: lead in, files read, reply sent, lead routed, owner's dashboard.

My role

Key decisions.

Wrote the script, designed the scene and the mascot, and animated it.

  1. 01Keep all three parts on screen and light up the one being explained.
  2. 02Start the sound only when the visitor asks for it.
  3. 03Give phones their own tall layout.

How it is wired

Five steps, in order.

Built with HTML, CSS and JavaScript, with every frame worked out from the clock so it can be paused, scrubbed and recorded.

  1. Scene drawn in the browserHTML and CSS
  2. Every frame worked out from timeJavaScript
  3. Narration synced to the stepsAudio track
  4. Recorded frame by framePlaywright and ffmpeg
  5. Landscape and vertical cutsMP4

Result

What this proves.

  • Plays on the home page, the real estate page and two case studies.
  • The same scene is exported as a 1080p video and a vertical video.

Related

Keep reading.

Apps and extensions

Next.js web apps and Manifest V3 Chrome extensions, built from screens you approved.

Apps and extensions

More case studies

All work

Want one like
Lead System Film?

Tell me what it has to do on a 15-minute call. I'll sketch the screens and the wiring, and you keep the sketch either way.

Book a 15-minute call (opens Calendly in a new tab)See pricing