One finance request, start to finish

Overview

A 1:34 product demo for SoftworkerAI, the multiplayer workspace for humans and AI agents. It follows one finance request from the inbox to an approved output.

My role

Motion design, UI animation, sound

Team

Solo

Timeline

September to October 2026

Impact overview

One story

Inbox to approved output in 9 chapters.

Live screens

Captured from the product tour at 2x.

Reviewed

11 issues fixed, shot by shot.

The Brief

The launch film says what SoftworkerAI is. The demo had to show how it works: one request, one agent, one person who says yes.

Five vendor contracts renew this quarter. The Renewal Research Agent plans the work, finds $9,400 in unused seats, stops for Elena's approval, then finishes the job.

The Story, Chapter by Chapter

Each chapter is one idea, and the camera moves to the one part of the screen that proves it.

Time	Chapter	What it shows
0:00	The problem	Finance work arrives from a dozen tools.
0:08	One workspace	The team and AI agents, side by side.
0:16	The request	Five contracts, a ranked view by Thursday.
0:23	A visible plan	The agent shows its plan before it acts.
0:35	Grounded in your data	18 Zoom seats and 12 Slack accounts: $9,400 back.
0:45	Human approval	Sensitive actions wait. Elena approves in the thread.
0:56	Output with evidence	Plan, approval and evidence stay together.
1:04	The platform	Agents, knowledge, extensions and schedules.
1:14	Cost, impact, audit	What every run cost, saved and did.

What the Review Found

The first cut looked cinematic but did not hold up frame by frame. Highlights missed their rows, grain muddied the opening, captions covered the UI and the voice tripped on "A.I.". I rebuilt it and kept the camera language.

First cut: grainy inbox with tool icons sitting on top of the rows — Before: grain, icons on the rows

Final: a clean tilted inbox, each tool landing on its own row icon — After: clean, every icon in its place

Every highlight is now placed from the element's own box on the live page, so it fits the text with even padding and moves with the screen.

First cut: plan highlight bars start after the first letter of each step — Before: bars cut the labels

Final: each step gets a pink check and a bar that covers the whole label — After: checks and full labels

First cut: a small savings card with pills that wrap onto two lines — Before: cramped pills

Final: a wider savings card with both pills on one line — After: room to read

First cut: the Agents screen is see through, with another screen showing behind it — Before: screens show through

Final: solid screens in a 3D row, spaced so none overlaps another — After: solid and spaced

Motion Decisions

Decision 01

Keep the cinematic camera

I recovered the first cut's camera paths and rebuilt them in 3D. Highlights live on the screen plane, so they stay locked to the UI through every tilt and push.

The camera dives from the inbox into the thread, with the request highlighted

Decision 02

A logo that matches the brand

The mark uses the official outline, rendered as vector, so it stays crisp in 4K. The bars slide in and settle with no bounce.

Decision 03

Short captions, clear voice

Captions are one line of eight words or fewer, below the screen. The voice is open source, with A.I. said in one breath.

Elena clicks Approve on the approval card, framed with one clean border

What I Learned

Fix the frame, not the feel. The look can stay while every detail gets sharper.
Measure the UI, then draw on it. Eyeballed highlights always drift.

Built in code with HyperFrames and GSAP, written with AI coding agents. Screens captured with Playwright, voice made with Kokoro. Final render in 4K.

HyperFramesGSAPPlaywrightKokoro TTSAI coding agents