Bini's launch film, in 68 seconds

Overview

Bini is a housing society app for residents, security guards and building admins. I made its launch film in code from the app's real screens, then tightened it over four drafts.

My role

Motion design, UI animation, sound

Team

Solo

Timeline

October 2026

Impact overview

One morning

Three roles, one story in 68 sec.

Tighter

Cut from 1:46 to 1:08 with no dead air.

Clear voice

Voice sits 21 dB over the music, up from 7.

The Brief

Bini helps housing societies in Maharashtra run the everyday: visitors at the gate, maintenance bills, notices and emergencies. It was launching on the App Store and Google Play and needed a film for YouTube and the store pages.

The ask: 16:9, under two minutes, in Bini's green and cream, modelled on a set of SaaS launch films picked as references. It had to show who the app is for and what it does, using the real app screens, not mockups.

Who It's For

One society has three kinds of users, and each one feels the chaos differently. The film follows all three through the same morning.

Illustration of a family: grandfather, mother, father and child

Residents

Who is at the gate?

See a photo, approve in one tap, send QR passes, pay dues.

Illustration of a security guard in a navy uniform and cap

Security guards

Calls nobody picks up

Log visitors in seconds, scan passes, reach a flat without calling.

Illustration of a building admin in a green blazer with an ID card

Building admins

Chasing every rupee

Send bills, track dues with a grace period, send notices to all homes.

The Story, Scene by Scene

One society morning, from chaos to calm. Each scene answers the question the last one raised.

Time	Scene	What it says
0:00	The morning rush	Every morning, in every housing society, it is the same story.
0:05	The chaos	Calls from the gate. Paper registers. Group chats nobody reads.
0:11	Meet Bini	The logo, then the promise: one app for your whole society.
0:16	Three roles	Built for residents, security and the people who run the building.
0:21	At the gate	The guard logs a visitor. The resident sees a photo and taps Approve.
0:29	Guest pass	Send a QR pass and guests walk right in.
0:35	Bridge	Every visitor. Verified.
0:37	For admins	Bills, every rupee tracked, dues with a 30 day grace period.
0:46	Safety and notices	Help in one tap, and every notice reaches every home.
0:53	Senior mode	Big, clear and easy for elders.
0:58	The calm	Less chaos. More community.
1:02	Call to action	Download Bini on iPhone, iPad and Android.

Storyboard, Voice, Drafts

I started with a still storyboard of all 12 scenes so layout and copy could be agreed before anything moved. It went through one round of fixes: wider cards so titles fit on one line, a centred logo, grey phone shadows and no dotted lines.

Four storyboard frames: the morning rush, the three roles, the gate scene and the end card — Four of the 12 storyboard frames

For the voice I tried 13 open source AI voices over two rounds. The first pick, an Indian English male voice, did not feel right once it was in the film, so we moved to a warm female voice.

Draft 11:46, too many pausesEvery scene waited for its animation, so the film dragged.
Draft 21:12, the tight cutNew voice, and every scene now lasts as long as its line.
Draft 3New people, moving phonesIllustrated roles, phones that make room, real store badges, a livelier voice.
Draft 4Clear and boldA voice you can hear over the music and bolder headlines. Final render in 4K.

What the Review Found

The placeholder photos were cropped from app screens, and the little stress marks beside them read as "=" signs. Each role now has its own illustration in the brand colours: a family for residents, a guard in uniform and an admin with an ID card.

Draft 2: cropped placeholder photos with small stress marks beside them — Before: cropped photos

Final: illustrated family, security guard and building admin — After: one picture per role

At the gate, the guard's phone sat on the left with nothing on the right until the second phone arrived. Now it enters in the middle of the free space and slides over when the resident's phone comes in.

Draft 2: one phone on the left and an empty right half of the frame — Before: half the frame empty

Final: the guard phone centred in the free space — After: centred, then it makes room

On the end card, the App Store glyph was drawn by hand and looked broken. It now uses the right shapes, and three app screens show the guard, resident and admin views together.

Draft 2: one phone with floating store icons and a malformed App Store glyph — Before: one phone, broken glyph

Final: three fanned phones and proper App Store and Google Play badges — After: three screens, real badges

Motion and Sound Decisions

Decision 01

The voice sets the clock

Each scene lasts exactly as long as its spoken line plus a short breath. The animations are remapped onto the new timing, so cutting 38 seconds did not mean animating again.

Three roles scene: the Bini hub with residents, security and admin around it

Decision 02

Phones make room

One phone enters in the centre. When the second arrives, the first slides left with an ease in and out, so the frame is never half empty.

Gate scene: guard phone, resident phone and the Aarav Mehta is at the gate notification

Decision 03

A voice you can hear

The first voice was flat, so I widened its pitch range by about 60 percent. Then the music drops while she speaks and its speech frequencies are cut, so every word is clear.

Admin scene: two phones, collected amount, flat dues and the 30 day grace period pill

Decision 04

Brand rules on every frame

Bini's green and cream only, no gold, bold but never black weights, white icons and grey phone shadows. Senior mode gets its own scene, because elders are users too.

Senior mode scene: a standard phone next to a bigger, clearer senior mode phone

What I Learned

Let the voice set the pace. Pauses that feel fine in a storyboard feel long in a film.
Mix for a phone speaker, not headphones. If the words are not clear there, the music is too loud.
Small things read as mistakes in motion: a stray mark, an empty half frame, a broken logo.

Built in code as HTML and CSS scenes, rendered frame by frame, and written with AI coding agents, so every fix is a small change and a re-render. The music is original and made in code, and the voice is an open source AI voice. Final render in 4K.

HTML and CSSPlaywrightKokoro voicePython audioFFmpegAI coding agents