helperflow-ui

Reusable HelperFlow app screens and brand pieces for HyperFrames videos. Every screen copies the real app (lucide icons from the app, UI strings from translations.csv, classic theme tokens). See README.md for how to use them.

Screens

9:41
1SI
Acara dan jadwal rumah tangga.

Kalender

HariBulan
Oktober 2026
SEN20
SEL21
RAB22
KAM23
JUM24
SAB25
MIN26
Rabu, 22 Oktober1 acara · 1 tugas
10.30 – 11.30
Antar Nenek ke dokter
Janji
15.00
Jemput anak-anak di sekolah
Maria
Beranda
Obrolan
Menu
Kalender
Tugas
{{screen:calendar.id}}
9:41
MM
The Chans
Lahat · 4 tao
Nasundo ko na ang mga bata.
Maria · 4:09 PM
Pakidefrost ang manok bago mag-6, salamat!
Ipakita ang orihinal
Mei · 4:10 PM
Mag-type ng mensahe…
Bahay
Usapan
Menu
Kalendaryo
Mga Gawain
{{screen:chat.tl}}
9:41
MM
The Chans
所有人 · 4 人
已經接咗小朋友放學。
顯示原文
Maria · 下午4:09
六點前請解凍雞肉，多謝！
Mei · 下午4:10
輸入消息…
主頁
聊天
菜單
日曆
任務
{{screen:chat.zh}}
9:41
3MC
Wednesday, October 22

Hello, Mike

3/5
Today's Task Progress
Live summary
Maria picked up the kids and Grandma took her medicine. Dinner is still to do by 19:00.
Needs You
1 house rule not accepted yet
Today's MealsSteamed fish, Tomato & egg…
Home
Chat
Menu
Calendar
Tasks
{{screen:home.en}}
Wednesday 22 October
2:45
HelperFlownow
School pickup at 3:00
10月22日 星期三
2:45
HelperFlow現在
三點接放學
Miyerkules, 22 Oktubre
2:45
HelperFlowngayon
Sunduin ang mga bata · 3:00
Rabu, 22 Oktober
14.45
HelperFlowsekarang
Jemput anak-anak · 15.00
{{screen:lock.carousel}}
9:41

Meals

4
Plan the week's meals, dish by dish.
Wed22Wednesday
Thu23Thursday
WednesdayOct 22
Dinner
Steamed fish with ginger
Tomato & egg stir-fry
Steamed rice
Add another dish
LunchPrepared
Wonton noodle soup
{{screen:meals.en}}
9:41

家規

每個人都應遵守的家庭指引。
一般
晚上十點後請保持安靜
小朋友九點半瞓覺。
由 Maria 接受 · v1 · 10月2日
出門前請鎖好門
兩把鎖都要鎖好。
由 Maria 接受 · v1 · 10月2日
食物放入雪櫃前請加蓋
用保鮮盒或保鮮紙。
由 Maria 接受 · v2 · 10月15日
主頁
聊天
菜單
日曆
任務
{{screen:rules.zh}}
9:41

Wellcome

Para kay Maria
Magdagdag ng item…
4 bibilhin
Gatas
Idinagdag ni Mei
Itlog (12)
Idinagdag ni Mei
Pechay
Miy hapunan · Tomato & egg
Tinapay
Idinagdag ni Mike
Bahay
Usapan
Menu
Kalendaryo
Mga Gawain
{{screen:shopping.tl}}

Blocks

Scene layers from earlier videos (launch, viral ads, content). Shown in their final state; each has a GSAP entrance in anim.js.

Plan it once.Everyone sees it.
Dishes from a library
Shopping lists per shop or person
In each person’s language
EN · 中文 · Tagalog · Bahasa
{{block:app-phone-points}}
block: app-phone-points
  From: helperflow-viral ct08-week-menu 05-app (also ct10-home-leave 04-app). Left: headline + up to 4 green-check points + optional language pill. Right: a tilted phone with a real app screenshot and an amber ring on one spot.
  Params: h1 (Plan it once.) · h2 (Everyone sees it.) (teal) · i1–i4 (Dishes from a library · Shopping lists per shop or person · In each person’s language · empty) — empty point hidden
    · lang (EN · 中文 · Tagalog · Bahasa) — empty = hidden · img (hf/app/hero/hero-t18.png; any 440×952 screen)
    · ring box on the screen in px: rx (14) · ry (596) · rw (205) · rh (116) — rw=0 hides the ring · t0 (first point time, 0.55) · step (time between points, 0.5)
    ct10 04-app = h1=Write it once.|h2=Anyone can follow it.|i1=Routine as tasks with a time|i2=Meds in the care log|i3=School runs on one calendar|i4=Meals and shopping lists|lang=|img=hf/app/hero/hero-t21.png|rx=12|ry=508|rw=416|rh=112|t0=0.5|step=0.45
  Anim: HFB["app-phone-points"](tl, root, t, o) — headline 0.1 s, phone flies up and tilts to 2° 0.2 s, ring pops 0.8 s, points slide in (t0 + i·step), lang pill 2.0 s. ~2.3 s, then holds (original frames 3.4 / 3.8 s).
Stop answering“What’s for dinner?”every day.
7×
MonWhat’s for dinner?
TueWhat’s for dinner?
WedWhat’s for dinner??
ThuDinner???
FriWhat’s for dinner?
Sat…dinner?
SunWhat’s for dinner?
Plan the week once →
{{block:ask-repeat-hook}}
block: ask-repeat-hook
  From: helperflow-viral ct08-week-menu 01-hook-a. Left headline, then 7 day-tagged chat bubbles with the same question stack up in a zig-zag (Mon … Sun), a red "7×" count, an amber nudge pill.
  Params: h1 (Stop answering) · h2 (“What’s for dinner?”) (teal) · h3 (every day.) · d1–d7 (Mon … Sun) · q1–q7 (What’s for dinner? · … · Dinner??? · …dinner?) · count (7×) · pill (Plan the week once →)
  Anim: HFB["ask-repeat-hook"](tl, root, t, o) — headline punch-in, bubble 1 visible at frame 0, bubbles 2–7 pop every 0.26 s from 0.3 s, count pops 1.9 s, pill 2.4 s; bubbles slide out left at 3.3 s (o.exit = other time, or false). ~2.75 s + exit (original frame 3.6 s).
Before → after
Before
Clean the kitchen soon
After
Today 7:30 PM · Maria
Wipe counters + stove
Done = counters dry, sink empty
Photo when done
Clear for both of you.
{{block:before-after}}
block: before-after
  From: helperflow-viral ct04-clear-instructions 04-before-after. Headline, grey "Before" card whose vague text gets a red strike, white "After" card with a task row (circle that ticks), green "done looks like" box and a mint photo pill, closing line.
  Params: title (Before &#8594; <em>after</em> — <em> = teal) · lb (Before) · before (Clean the kitchen soon) · la (After)
          tm (Today 7:30 PM · Maria) · tt (Wipe counters + stove) · done (Done = counters dry, sink empty) · photo (Photo when done) · chip (Clear for both of you.)
  Anim: HFB["before-after"](tl, root, t) — title 0.1, before slides in 0.3, strike 1.0, after card rises 1.4, done 2.1, photo 2.6, tick 3.4, closing line 3.7. ~4.1 s (source scene 5.6 s).
Storm-day checklist
Before it hits
1
Bring in laundry & plants
Clear the balcony. Close the windows.
2
Charge phones + power banks
Keep a torch where you can find it.
3
Water + food for a day
Shops and deliveries may close.
{{block:checklist}}
block: checklist
  From: helperflow-viral ct02-typhoon-8 03-list-before (same design: ct03-sunday-off 03-list-saturday — ct03 text: kick "Rest-day ready", title "Do it on <em>Saturday</em>", items Plan Sunday's meals / Do the shopping / Share the kids' Sunday plan).
  Mint eyebrow pill, left-aligned headline, 3 numbered cards that slide in one by one; each number turns into a green tick before the next card.
  Params: kick (Storm-day checklist) · title (Before it <em>hits</em> — <em> = teal)
          n1..n3 (1 · 2 · 3 numbers, so a 2nd list can go on 4, 5, 6) · t1..t3 / s1..s3 (item title / sub-line)
  Anim: HFB["checklist"](tl, root, t) — pill 0.1, title 0.15, cards 0.5 / 2.6 / 4.7 s, ticks 2.45 / 4.55 / 6.4 s. ~6.7 s (source scene 7.2 s).
Don't say it all at once.
Day 1
1
things to explain
School run times
Grandma's meds
Wi‑Fi password
Rubbish night
Mia: no peanuts
House rules
Bath at 7 PM
Her rest day
Write it down once. In her language.
{{block:count-up-hook}}
block: count-up-hook
  From: helperflow-viral ad05-new-helper-week 01b-hook-day1. Huge number counts up 1 → 47 'things to explain' while notes fly in from both sides; turns red + shakes; dark slam card.
  Params: l1 (Don't say it) · l2 (all at once.) · day (Day 1) · sub (things to explain) · n1 (School run times) · n2 (Grandma's meds) · n3 (Wi‑Fi password) · n4 (Rubbish night) · n5 (Mia: no peanuts) · n6 (House rules) · n7 (Bath at 7 PM) · n8 (Her rest day) · s1 (Write it down once.) · s2 (In her language.) · to (47, the final count)
  Anim: HFB["count-up-hook"](tl, root, t) — number counts 1 → to over 1.7 s (power1.in) and grows, turns red + shakes at 1.75; 8 notes fly in from alternating sides (0.18 s apart); slam card flies up at 2.25 and breathes. 3.6 s.
Keep the homein sync.
Start your 7-day free trial
Helper & family join free
App StoreGoogle Play
helperflow.app
{{block:cta-endcard}}
block: cta-endcard
  From: helperflow-launch 08-cta (also every viral ad's end). The paid-ad end card.
  Params: l1 (Keep the home) · l2 (in sync.) · btn (Start your 7-day free trial) · sub (Helper &amp; family join <b>free</b>) · url (helperflow.app)
  Anim: HFB["cta-endcard"](tl, root, t) — logo, two-beat headline slam, button pop + glow, badges, url, family art rises. ~2 s, then holds.
Asked every single day.
MonTueWedThuFriSatSun1/72/73/74/75/76/77/7
Jake Mon · 5:02 PM
What's for dinner?
Maria Tue · 4:48 PM
Ma'am, what's for dinner?
Mike Wed · 6:10 PM
What's for dinner?
Jake Thu · 5:15 PM
What's for dinner??
Maria Fri · 4:51 PM
Ma'am, dinner tonight?
Mike Sat · 5:40 PM
So… dinner?
Jake Sun · 5:05 PM
WHAT'S FOR DINNER
What if the week was already planned?
{{block:day-counter-hook}}
block: day-counter-hook
  From: helperflow-viral ad04-dinner-shopping 01a-hook-counter. 'Asked every single day' + Mon 1/7 → Sun 7/7 counter pill + the same question stacking up in chat; dark slam card.
  Params: l1 (Asked every) · l2 (single day.) · who0 (Jake) · when0 (Mon · 5:02 PM) · msg0 (What's for dinner?) · who1 (Maria) · when1 (Tue · 4:48 PM) · msg1 (Ma'am, what's for dinner?) · who2 (Mike) · when2 (Wed · 6:10 PM) · msg2 (What's for dinner?) · who3 (Jake) · when3 (Thu · 5:15 PM) · msg3 (What's for dinner??) · who4 (Maria) · when4 (Fri · 4:51 PM) · msg4 (Ma'am, dinner tonight?) · who5 (Mike) · when5 (Sat · 5:40 PM) · msg5 (So… dinner?) · who6 (Jake) · when6 (Sun · 5:05 PM) · msg6 (WHAT'S FOR DINNER) · s1 (What if the week was) · s2 (already planned?)
  Anim: HFB["day-counter-hook"](tl, root, t) — 7 bubbles push up the stack (times 0, .4, .75, 1.05, 1.3, 1.52, 1.72) while the pill ticks Mon 1/7 → Sun 7/7; pill turns red + wobbles; slam card flies up at 2.25, chat shakes and dims; slow breathe. 3.6 s.
SUNDAY
REST DAY
Her Sunday is hers.
Plan Saturday like this.
4 steps ↓ save this
{{block:day-stamp-hook}}
block: day-stamp-hook
  From: helperflow-viral ct03-sunday-off 01-hook-hers. Light hook: a calendar-day card (teal header + big sun) slams in, a dark "REST DAY" stamp lands on it, big line, teal second line, dark nudge pill that bobs.
  Params: day (SUNDAY) · stamp (REST DAY) · l1 (Her Sunday is hers.) · l2 (Plan Saturday like this.) · next (4 steps &#8595; save this)
  Anim: HFB["day-stamp-hook"](tl, root, t) — card slam 0, stamp 0.45 + card bump, l2 1.1, pill 2.0 + bob. ~3.2 s (source scene 3.8 s).
This is how I stoppedtexting “done?”
Mia’s medicine
3:00 PM · Maria
Photo · 3:02 PM
DONE 3:02 PM
HelperFlow · now
Maria finished “Mia’s medicine”
{{block:done-proof-hook}}
block: done-proof-hook
  From: helperflow-viral ad01-was-it-done 02-hook-proof. Task card, proof photo drops on it with a flash, task ticks green, DONE stamp slams, push notification slides in.
  Params: c1 (This is how I stopped) · c2 (texting “done?”) · task (Mia’s medicine) · meta (3:00 PM · Maria) · photo (Photo · 3:02 PM) · stamp (DONE 3:02 PM) · app (HelperFlow · now) · notif (Maria finished “Mia’s medicine”)
  Anim: HFB["done-proof-hook"](tl, root, t) — caption settle, task slides in, photo drops + flash (0.4-0.8), tick fills + draws, card turns green (1.1), DONE stamp slams (1.4) and shakes the photo, notification rises (2.1). 4.0 s.
Sunday
8:00 AM
You
“Ate, before you go… can you just…”
Don’t.
It’s her rest day.
{{block:dont-hook}}
block: dont-hook
  From: helperflow-viral ct03-sunday-off 02-hook-dont. DARK hook (own dark-teal backdrop): day label + big time, a white chat bubble with typing dots gets a red strike and dims, a red "Don't." slab slams in and shakes, amber reason line.
  Params: tag (Sunday) · time (8:00 AM) · who (You) · msg (&#8220;Ate, before you go&#8230; can you just&#8230;&#8221;) · dont (Don&#8217;t.) · why (It&#8217;s her rest day.)
  Anim: HFB["dont-hook"](tl, root, t) — time + bubble 0, dots bounce 0.1-1.0, strike 1.2, slab slam 1.35 + shake, why 2.1. ~2.4 s (source scene 4 s).
Grandma takes6 pills a day.
Who gave the2 PM one?
8 AM
2 PM
8 PM
?
Me?Maria?Dad?
Nobody is sure.
{{block:dose-hook}}
block: dose-hook
  From: helperflow-viral ct06-grandma-meds 01-hook-a. Hook: 3 dose times as pill pairs, the middle one turns red with a "?" and shakes, then 3 "who?" chips.
  Params: l1a (Grandma takes) · l1b (<b>6 pills</b> a day.) · l2a (Who gave the) · l2b (<b>2 PM</b> one?) · t1/t2/t3 (8 AM · 2 PM · 8 PM) · c1/c2/c3 (Me? · Maria? · Dad?) · l3 (Nobody is sure.)
    <b> in l1b = teal, <b> in l2b = red. The "?" sits on the middle dose (t2).
  Anim: HFB["dose-hook"](tl, root, t) — headline punch-in (visible at frame 0), doses rise, middle dose goes red + "?" pop + shake (0.8–1.4 s), chips pop 1.45/1.75/2.05 s, last line 2.45 s. ~2.8 s, then holds (original frame 3.6 s).
Step 1
One list. Set times.
Grandma’s medicines
Today
8 AM
Morning · 2 pills
Due at 8:00 AMGiven by Mum · 8:02 AM
2 PM
Lunch · 2 pills
Due at 2:00 PMGiven by Maria · 2:04 PM
8 PM
Dinner · 2 pills
Due at 8:00 PMGiven by Dad · 8:05 PM
No more “I think so…”
{{block:dose-log}}
block: dose-log
  From: helperflow-viral ct06-grandma-meds 02-list (mode "list") and 03-log (mode "log"). A medicines card: 3 dose rows (time tile, name, "Due at…" / "Given by…", round check).
  Params: pill (Step 1) · title (One list. <b>Set times.</b>) · card (Grandma’s medicines) · today (Today)
    · t1/t2/t3 (8 AM · 2 PM · 8 PM) · n1/n2/n3 (Morning · 2 pills …) · d1/d2/d3 (Due at 8:00 AM …) · g1/g2/g3 (Given by Mum · 8:02 AM …) · foot (No more <b>“I think so…”</b>)
    · done (rows already given at start, e.g. "0" or "0,1"; default none) · tap (row that gets ticked in this block, 0–2; default none = list mode)
    03-log = pill=Step 2|title=Log <b>who gave it.</b>|foot=Name + time. <b>Done.</b>|done=0|tap=1
  Anim: HFB["dose-log"](tl, root, t) — pill + title, card rises; list mode: rows slide in 0.45/0.9/1.35 s; log mode: tap ripple on row "tap" at 1.0 s, check fills + tick draws, "Due" → "Given by", row turns green. Foot line 1.9 s. ~2.3 s, then holds (original frames 4.6 s).
Save this for the next T8
Keep the homein sync.
helperflow.app
{{block:end-card-soft}}
block: end-card-soft
  From: helperflow-viral ct02/ct03/ct04 06-end (same layout; only the nudge text + icon change). The organic (non-ad) end card: amber share/save pill on top, logo, two-line "Keep the home / in sync.", url, family illustration rises from the bottom. No button, no store badges (paid-ad end card = cta-endcard).
  Params: nudge (Save this for the next T8 — ct03: Send this to your partner · ct04: Save this for your next task)
          icon (SVG path d of the 24x24 pill icon. Default bookmark "M6 3h12v18l-6-4-6 4z"; send arrow (ct03) "M3 11l18-8-8 18-2-8z")
          l1 (Keep the home) · l2 (in sync.) · url (helperflow.app)
  Anim: HFB["end-card-soft"](tl, root, t) — pill drops in 0.1, logo 0.2, headline slams 0.3 / 0.5, art rises 0.6, url 0.75, pill pulse 1.6. ~2 s, then holds (source scene 2.8 s).
Everything the home needs. One app.
Tasks Calendar Meals Shopping House rules Medications Baby care Expenses
2/3done today
Maria finished mopping and the bed sheets. Trash by 8 PM.
{{block:everything-orbit}}
block: everything-orbit
  From: helperflow-launch 07-proof-everything. Phone with the home screen; 8 feature pills burst out from behind it; "One app." lands; dark "2/3 done today" card slides up and its bar fills.
  Params: h1 (Everything the home needs.) · h2 (One app. — teal)
          · screen (hf/app/hero/hero-t09.png)
          · p1..p8 (Tasks, Calendar, Meals, Shopping, House rules, Medications, Baby care, Expenses — odd = left side, even = right side, top to bottom)
          · num (2/3) · unit (done today) · fill (0.66 — bar fill 0..1) · sum (Maria finished mopping and the bed sheets. Trash by 8 PM.)
  Anim: HFB["everything-orbit"](tl, root, t) — headline words + phone rise (0–0.65 s), slow phone push-in to 3 s, pills burst outward one by one (0.5–1.6 s),
        "One app." pops, summary card slides up, bar fills + number pops (1.6–2.4 s), pills wobble (2.3–3.0 s). ~3 s, then holds.
The fix
One feed + sleep log
Baby James · tonight
Shared
11:40 PM
Feed
120 ml
Mum
12:15 AM
Sleep
Mum
3:12 AM
Feed
90 ml
Dad
3:40 AM
Sleep
Dad
Last feed: 3:12 AM.No guessing.
{{block:feed-log}}
block: feed-log
  From: helperflow-viral ct07-baby-3am 02-log. A shared log card: rows of time · type tag (Feed amber / Sleep lilac) · detail · who; one row gets a teal outline.
  Params: pill (The fix) · title (One <b>feed + sleep</b> log) · card (Baby James · tonight) · tag (Shared)
    · per row 1–4: t (11:40 PM …) · k (tag colour: feed | sleep) · y (tag text: Feed / Sleep) · x (detail: 120 ml / empty) · w (who: Mum / Dad)
    · hl (row index 0–3 that gets the outline, default 2) · f1 (Last feed: <b>3:12 AM.</b>) · f2 (No guessing.)
    A row with an empty t is hidden.
  Anim: HFB["feed-log"](tl, root, t) — pill + title, card rises, rows slide in every 0.4 s from 0.45 s, outline pops on row hl at 2.3 s, foot 2.45 s. ~2.9 s, then holds (original frame 5.0 s).
Rules, routines, first tasks. One place.
House rule
Rest day is Sunday
✓ Accepted · Mon 9:14 AM
7:00 AM
Pack Mia's school bag
3:30 PM
School pickup
6:00 PM
Steamed fish for dinner
{{block:first-week}}
block: first-week
  From: helperflow-viral ad05-new-helper-week 11-first-week. Word-by-word headline + house-rule card with 'Accepted' + 3 timed task cards.
  Params: h1 (Rules, routines, first tasks.) · h2 (One place.) · tag (House rule) · rule (Rest day is Sunday) · ok (✓ Accepted · Mon 9:14 AM) · tm1 (7:00 AM) · t1 (Pack Mia's school bag) · tm2 (3:30 PM) · t2 (School pickup) · tm3 (6:00 PM) · t3 (Steamed fish for dinner)
  Anim: HFB["first-week"](tl, root, t) — h1 words, rule card swings in from left, Accepted pops (0.9), 3 task cards swing in from right (1.25 + 0.25 each), h2 words slam at 2.2, rule card breathes. 4.0 s.
Fix 1
Routines live in one place. Not in the chat.
7:00 AM · Thu
Swim bag by the door
2:00 PM · Today
Grandma's pills
4:00 PM · Fri
Library books back
Everyone sees the same list.
{{block:fix-cards}}
block: fix-cards
  From: helperflow-viral ct01-group-chat 11-fix-routines. Amber eyebrow pill, two-part headline (dark words rise, teal words slam), 3 task cards fly in from alternating sides, sub-line.
  Params: pill (Fix 1) · h1 (Routines live in one place.) · h2 (Not in the chat. — teal)
          time1/title1 (7:00 AM · Thu / Swim bag by the door) · time2/title2 (2:00 PM · Today / Grandma's pills) · time3/title3 (4:00 PM · Fri / Library books back)
          sub (Everyone sees the same list.)  — h1/h2 are plain text: anim.js splits them into words once.
  Anim: HFB["fix-cards"](tl, root, t) — pill pop, h1 words stagger up, cards slide in 0.5/0.75/1.0 s, h2 words slam 1.4 s, sub 2.0 s, card 1 breathes. ~2.4 s (source scene 3.8 s).
5 green flagsof a great hometo work in
1
2
3
4
5
For employers and helpers.
How many does your home have?
{{block:flags-hook}}
block: flags-hook
  From: helperflow-viral ct09-green-flags 01-hook-a. Big left headline (first line green), a row of 5 white cards each with a green flag + number, a sub-line and a mint question pill.
  Params: h1 (5 green flags) (green) · h2 (of a great home) · h3 (to work in) · n1–n5 (1…5) · sub (For employers <b>and</b> helpers.) (<b> teal) · pill (How many does your home have?)
  Anim: HFB["flags-hook"](tl, root, t, o) — headline punch-in (visible at frame 0), flags flip up one by one 0.15–0.75 s, sub 1.1 s, pill 2.0 s; flags row exits up at 3.3 s (o.exit = other time, or false for no exit). ~2.3 s + exit (original frame 3.6 s).
Your helper flies homefor 2 weeks.
HKG
Hong Kong
HOME
Family time
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Is everything in your head?
{{block:flight-hook}}
block: flight-hook
  From: helperflow-viral ct10-home-leave 01-hook-a. Headline, a boarding-pass card (FROM → TO with a plane flying along a dashed line), a grid of day tiles that pop in, a teal question.
  Params: h1 (Your helper flies home) · h2 (for 2 weeks.) · from (HKG) · fromcap (Hong Kong) · to (HOME) (teal) · tocap (Family time) · days (number of day tiles 1–14, default 14; 7 per row) · q (Is everything in your head?)
  Anim: HFB["flight-hook"](tl, root, t) — headline punch-in + pass straightens (visible at frame 0), plane flies 0.2–1.5 s, day tiles pop every 0.06 s from 0.4 s, question 1.5 s, question pulse 2.6 s. ~3.0 s (original frame 3.8 s).
The clear-task formula
What + When + Done
What
Wipe the counters and the stove
When
Today, by 7:30 PM
Done looks like
Counters dry. Sink empty.
+ a photo, if it helps
{{block:formula-cards}}
block: formula-cards
  From: helperflow-viral ct04-clear-instructions 03-formula. Mint eyebrow pill, one-line headline, 3 labelled cards (mint / amber / green label pills) that slide in one by one, amber chip with a camera icon.
  Params: kick (The clear-task formula) · title (What + When + <em>Done</em> — <em> = teal, one line, no wrap)
          lab1/ex1 (What / Wipe the counters and the stove) · lab2/ex2 (When / Today, by 7:30 PM) · lab3/ex3 (Done looks like / Counters dry. Sink empty.)
          chip (+ a photo, if it helps)
  Layout: the cards stack in a column (gap 28) from top 560, so a longer text pushes the next card down (source used fixed tops 560/860/1095 = same result).
  Anim: HFB["formula-cards"](tl, root, t) — pill 0.1, title 0.15, cards 0.5 / 2.1 / 3.5 s, chip 5.0 s. ~5.4 s (source scene 6.6 s).
POV: the family chat at 7:42 AM
Wong Family
Mum, Dad, Jake, Maria, Grandma
39172842
Mum
Who has Mia's swim bag??
Dad
Is it library day today?
Maria
Ma'am, the school form?
Grandma
Don't forget my 2 PM pills
Jake
wifi is down
Dad
Also we're out of milk
Mum
WHO MOVED THE SWIM BAG
Maria
Swim is Thursday, ma'am?
Jake
???
Grandma
Hello?? Pills??
3 fixes for a calmer home chat.
{{block:group-chat-hook}}
block: group-chat-hook
  From: helperflow-viral ct01-group-chat 01a-hook-pov. Light hook: a family group chat floods with messages, the red unread badge climbs, the chat shakes, a dark slam card lands.
  Params: cap (POV: the family chat) · caph (at 7:42 AM, teal 2nd line) · group (Wong Family) · members (Mum, Dad, Jake, Maria, Grandma)
          u0..u4 (3 · 9 · 17 · 28 · 42 unread counts) · w1..w10 / m1..m10 (who / message of the 10 bubbles; name colours are fixed per slot)
          slam (3 fixes for a <b>calmer home chat.</b> — <b> = amber)
  Anim: HFB["group-chat-hook"](tl, root, t) — bubble 1 shown, bubbles 2-10 push in 0.3..2.02 s, badge pops 4x, shake 2.1 s, chat dims + slam card rises 2.6 s, slow breathe. ~3 s, then holds (source scene 4 s).
7:00 AM handover
Maria starts her day.Nobody wakes up.
Maria sees · Baby James
Last feed: 3:12 AM · 90 ml
Asleep since: 3:40 AM
Note: Nappy changed at 3:30
Mum & Dad: still asleep · zzz
She logs the day.You see it at work.
{{block:handover}}
block: handover
  From: helperflow-viral ct07-baby-3am 03-handover. Morning handover card ("Maria sees") with 3 dotted "label: value" lines, a lilac status pill and a 2-line foot.
  Params: pill (7:00 AM handover) · h1 (Maria starts her day.) · h2 (Nobody wakes up.) (teal) · head (Maria sees · Baby James)
    · a1/b1 (Last feed / 3:12 AM · 90 ml) · a2/b2 (Asleep since / 3:40 AM) · a3/b3 (Note / Nappy changed at 3:30) — b = teal; an empty a hides the line
    · zz (Mum &amp; Dad: still asleep · zzz) · f1 (She logs the day.) · f2 (You see it at work.) (teal)
  Anim: HFB["handover"](tl, root, t) — pill + title, card rises 0.2 s, lines slide in 0.55/0.95/1.35 s, status pill pops 1.9 s, foot 2.4 s. ~2.8 s, then holds (original frame 4.8 s).
Know it’s done.Without asking.
1
You
Add a task with a time
Mia’s medicine · 3:00 PM
2
Maria
Taps Done
+ a photo if you ask for one
3
You
See it, wherever you are
Done · 3:02 PM
{{block:how-it-works-steps}}
block: how-it-works-steps
  From: helperflow-viral ad01-was-it-done 03-how-done. Two-line headline + 3 numbered step cards (who / what / chip); step 3 turns green.
  Params: l1 (Know it’s done.) · l2 (Without asking.) · s1who (You) · s1 (Add a task with a time) · s1chip (Mia’s medicine · 3:00 PM) · s2who (Maria) · s2 (Taps Done) · s2chip (+ a photo if you ask for one) · s3who (You) · s3 (See it, wherever you are) · s3chip (Done · 3:02 PM)
  Anim: HFB["how-it-works-steps"](tl, root, t) — headline in two beats, step cards slide in from alternate sides (0.85 s apart), step 3 tints green and pulses at 2.6. 4.4 s.
Invite her. She joins free.
MC
Maria Cruz
Helper
Free
She picks her language
English 中文 Tagalog Bahasa
Her HelperFlow
Welcome, Maria!
Maligayang pagdating, Maria!
Tasks, rules and the calendar, all in Tagalog.
{{block:invite-helper}}
block: invite-helper
  From: helperflow-viral ad05-new-helper-week 10-invite. Word-by-word headline + invite card (avatar, name, role, Free) + language chips + her welcome card that flips to her language.
  Params: h1 (Invite her.) · h2 (She joins free.) · av (MC) · name (Maria Cruz) · role (Helper) · free (Free) · lbl (She picks her language) · k1 (English) · k2 (中文) · k3 (Tagalog) · k4 (Bahasa) · phl (Her HelperFlow) · g1 (Welcome, Maria!) · g2 (Maligayang pagdating, Maria!) · sub (Tasks, rules and the calendar, all in Tagalog.)
  Anim: HFB["invite-helper"](tl, root, t) — h1 words, invite card slides in, h2 words slam, Free pops, chips pop, welcome card rises (1.3), chip 3 lights up (1.9), greeting flips g1 → g2 (2.15-2.7), card breathes. 3.8 s.
English 中文 Tagalog Bahasa
Still 翻譯中…nagsasalin…menerjemah…translating for your helper?
{{block:kinetic-translating}}
block: kinetic-translating
  From: helperflow-translate hook C. Type-only hook: a teal pill word rolls through languages like a slot machine and lands on the last one.
  Params: top (Still) · w1, w2, w3 (the rolling words, 翻譯中… / nagsasalin… / menerjemah…) · w4 (landing word, translating) · bottom (for your helper?)
  Anim: HFB["kinetic-translating"](tl, root, t) — floating language pills drift, "Still" rises, pill pops, rolls 3 steps, bottom line rises, pill pulse. ~3 s.
Home-leavesurvival kitfor families
1Routine
2Meds
3School runs
4Meals
5Where things are
6Who to call
Save it before she flies
{{block:kit-hook}}
block: kit-hook
  From: helperflow-viral ct10-home-leave 01-hook-b. "Survival kit" listicle hook: 3-line headline, a dark-teal bag with a handle holding 6 cream tiles (amber number + label), an amber bookmark "save" pill.
  Params: h1 (Home-leave) · h2 (survival kit) (teal) · h3 (for families) (small, grey) · i1–i6 (Routine · Meds · School runs · Meals · Where things are · Who to call) · n1–n6 (1 … 6) · save (Save it before she flies)
  Anim: HFB["kit-hook"](tl, root, t, o) — headline punch-in (visible at frame 0), bag rises 0.1 s, tiles drop in every 0.22 s from 0.45 s, save pill 2.0 s; bag exits up at 3.5 s (o.exit = other time, or false). ~2.3 s + exit (original frame 3.8 s).
Same app.Her language.
Today
Defrost the chicken
3:00 PM
School pickup
3:30 PM
House rule: shoes off
Accepted
Done
今日
解凍雞肉
下午 3:00
接放學
下午 3:30
家規：脫鞋
完成
Hari ini
Cairkan ayam
15.00
Jemput sekolah
15.30
Aturan: lepas sepatu
Diterima
Selesai
Ngayon
I-defrost ang manok
3:00 PM
Sunduin sa school
3:30 PM
Patakaran: walang sapatos
Tinanggap
Tapos na
Maria picked Tagalog
EN 中文 Bahasa Tagalog
{{block:lang-flip-phone}}
block: lang-flip-phone
  From: helperflow-viral ad03-her-language 02-hook-flip. Phone with a 'Today' task list that flips EN → 中文 → Bahasa → Tagalog with the matching chip lit; then 'Maria picked Tagalog' pill.
  Params: c1 (Same app.) · c2 (Her language.) · en_h (Today) · en_t1 (Defrost the chicken) · en_m1 (3:00 PM) · en_t2 (School pickup) · en_m2 (3:30 PM) · en_t3 (House rule: shoes off) · en_m3 (Accepted) · en_btn (Done) · zh_h (今日) · zh_t1 (解凍雞肉) · zh_m1 (下午 3:00) · zh_t2 (接放學) · zh_m2 (下午 3:30) · zh_t3 (家規：脫鞋) · zh_btn (完成) · id_h (Hari ini) · id_t1 (Cairkan ayam) · id_m1 (15.00) · id_t2 (Jemput sekolah) · id_m2 (15.30) · id_t3 (Aturan: lepas sepatu) · id_m3 (Diterima) · id_btn (Selesai) · tl_h (Ngayon) · tl_t1 (I-defrost ang manok) · tl_m1 (3:00 PM) · tl_t2 (Sunduin sa school) · tl_m2 (3:30 PM) · tl_t3 (Patakaran: walang sapatos) · tl_m3 (Tinanggap) · tl_btn (Tapos na) · pick (Maria picked Tagalog)
  Anim: HFB["lang-flip-phone"](tl, root, t) — caption settle, phone rises, screen squash-flips at 0.7 / 1.15 / 1.6 (en → zh → id → tl) with the chip row in sync, chips drop away and the pick pill pops at 2.2. 4.0 s.
Everyone pickstheir own language.
Y
You · English
Defrost the chicken
3:00 PM
M
Maria · Tagalog
I-defrost ang manok
3:00 PM
G
Grandma · 中文
解凍雞肉
下午 3:00
One task. Three languages.
Tasks · rules · meals · calendar
{{block:language-pick}}
block: language-pick
  From: helperflow-viral ad03-her-language 03-lang-pick. One task shown on 3 person cards, each in that person's language; pill + feature list.
  Params: l1 (Everyone picks) · l2 (their own language.) · av1 (Y) · who1 (You · English) · task1 (Defrost the chicken) · tm1 (3:00 PM) · av2 (M) · who2 (Maria · Tagalog) · task2 (I-defrost ang manok) · tm2 (3:00 PM) · av3 (G) · who3 (Grandma · 中文) · task3 (解凍雞肉) · tm3 (下午 3:00) · same (One task. Three languages.) · list (Tasks · rules · meals · calendar)
  Anim: HFB["language-pick"](tl, root, t) — headline, 3 cards flip down (rotationX) 0.55 s apart from 0.6, pill pops at 2.5, list rises at 2.85. 4.4 s.
One note
School pickup · 3:00
English
下午三點接放學
Chinese
Sundo · 3:00
Tagalog
Jemput pukul 3
Bahasa
EN 中文 TL ID
Write it once. Everyone reads it in their language.
{{block:language-swap}}
block: language-swap
  From: helperflow-launch 02-hook-languages (hook B). One note card; its line hard-cuts through 4 languages while the language chip light moves; headline below.
  Params: pill (One note)
          · en (School pickup · 3:00) en_lbl (English) en_size (78) · zh (下午三點接放學) zh_lbl (Chinese) zh_size (104)
          · tl (Sundo · 3:00) tl_lbl (Tagalog) tl_size (128) · id (Jemput pukul 3) id_lbl (Bahasa) id_size (108)   — sizes in px, fit each line to the card
          · chip_en (EN) chip_zh (中文) chip_tl (TL) chip_id (ID)
          · h1 (Write it once.) · h2 (Everyone reads it in) · h3 (their language. — teal)
  Anim: HFB["language-swap"](tl, root, t) — pill pops, card + ghost card slide up, chips enter, hard cuts EN→ZH→TL→ID→TL at 0.6/0.9/1.2/1.5 s
        (ghost card nudges on each cut), headline in 3 chunks 1.6–2.7 s. ~2.7 s, then holds on TL.
One list. Split by shop.
Shopping
Wet market
Wellcome
Bakery
Fresh fish
Milk
Bok choy
Pineapple buns
Eggs
Tomatoes
Bread loaf
Rice 5 kg
Ginger
{{block:list-split-hook}}
block: list-split-hook
  From: helperflow-viral ad04-dinner-shopping 01b-hook-split. One long mixed shopping list; each item gets its shop colour dot, then the items sort into 3 shop cards.
  Params: l1 (One list.) · l2 (Split by shop.) · big (Shopping) · h1 (Wet market) · h2 (Wellcome) · h3 (Bakery) · r1 (Fresh fish) · r2 (Milk) · r3 (Bok choy) · r4 (Pineapple buns) · r5 (Eggs) · r6 (Tomatoes) · r7 (Bread loaf) · r8 (Rice 5 kg) · r9 (Ginger) · (row shop = data-k, row slots = data-y0/data-y1 in the markup)
  Anim: HFB["list-split-hook"](tl, root, t) — list card settles, rows tick in, colour dots pop (0.9), list card fades and rows glide into 3 shop cards (1.45-2.1), shop labels pop (2.05+), card 1 breathes. 3.6 s.
Meet
One shared home for your family and your helper.
{{block:meet-helperflow}}
block: meet-helperflow
  From: helperflow-launch 04-turn-meet (the turn after every hook). "Meet" + logo with a teal glow, headline, the app home screen rises in a phone, pastel pills drift out, glow ring on the 2/3 card.
  Params: meet (Meet) · h1 (One shared home for your family) · h2 (and your helper. — teal) · screen (hf/app/hero/hero-t01.png)
  Anim: HFB["meet-helperflow"](tl, root, t) — glow + "Meet" + logo pop, headline in two chunks (0.4–1.2 s), phone rises with a 12° tilt (0.8–1.8 s),
        3 pastel pills drift out, one teal ring pulse on the summary card at 1.8 s. ~2.5 s, then holds.
  Note: the ring position fits the "2/3 done" card of hero-t01.png. With another screen, hide it: .hfb-meet-ring { display: none }.
3:07 PM
In a meeting
Did the kids get
picked up?
HelperFlow · now
School pickup
Done by Maria · 3:04 PM
Know it's done.Without asking.
{{block:meeting-hook}}
block: meeting-hook
  From: helperflow-launch 03-hook-meeting (hook C). Big time + "In a meeting" pill, the worry line, a HelperFlow push "School pickup ✓ done" with photo, two-line answer.
  Params: time (3:07 PM) · pill (In a meeting) · q1 (Did the kids get — word by word) · q2 (picked up? — second line, one chunk)
          · app (HelperFlow · now) · title (School pickup) · sub (Done by Maria · 3:04 PM) · photo (hf/illus/family-welcome.webp)
          · l1 (Know it's done.) · l2 (Without asking. — teal)
  Anim: HFB["meeting-hook"](tl, root, t) — slow 3 s push-in on the whole layer; time slams in from blur, pill pops, worry reveals chunk by chunk (0.6–1.3 s),
        push slides down, green check pops + tick draws, photo pops, answer in two beats. ~2.9 s, then holds.
2 shifts.
1 baby.
0 sharednotes.
Fix the night handover →
{{block:night-count-hook}}
block: night-count-hook
  From: helperflow-viral ct07-baby-3am 01-hook-b. Dark night hook (own dark-teal background): three counting lines slam in — "2 shifts." "1 baby." "0 shared notes." (amber numbers, red zero, the last line shakes), then a nudge line with an amber arrow.
  Params: n1 (2) · w1 (shifts.) · n2 (1) · w2 (baby.) · n3 (0) (red) · w3a (shared) · w3b (notes.) · l4 (Fix the night handover) · arrow (→)
  Anim: HFB["night-count-hook"](tl, root, t) — line 1 visible at frame 0 (punch-in), line 2 slams 0.55 s, line 3 slams 1.15 s + shake 1.5 s, nudge 2.1 s. ~2.5 s, then holds (original frame 3.6 s).
3:12AM
When was thelast feed?
11 PM?Midnight?1 AM?
Half asleep. Nobody wrote it down.
{{block:night-hook}}
block: night-hook
  From: helperflow-viral ct07-baby-3am 01-hook-a. Dark night hook: own dark-teal full-bleed background, moon, big clock, question, 3 guess chips.
  Params: time (3:12) · ampm (AM) · q1 (When was the) · q2 (last feed?) (amber) · c1/c2/c3 (11 PM? · Midnight? · 1 AM?) · l3 (Half asleep. Nobody wrote it down.)
  Anim: HFB["night-hook"](tl, root, t) — clock + question punch-in (visible at frame 0), moon turns in, chips pop 0.7/1.0/1.3 s, last line 1.9 s, chips dim 2.0 s. ~2.3 s, then holds (original frame 3.6 s).
8:47
Tuesday, 13 October
Mike 4m
Did you buy milk?
Grandma 2m
Where's the medicine??
Maria 1m
Ma'am, no more rice
Mike now
???  Call me
12 unread
Your home shouldn't run on
{{block:notification-avalanche}}
block: notification-avalanche
  From: helperflow-launch 01-hook-avalanche (hook A). Dark lock screen, chat pings pile up, unread badge counts up, white card slams in with the headline.
  Params: time (8:47) · date (Tuesday, 13 October) · n1who/n1ago/n1msg … n4who/n4ago/n4msg (Mike 4m "Did you buy milk?", Grandma 2m "Where's the medicine??", Maria 1m "Ma'am, no more rice", Mike now "??? &nbsp;Call me")
          · badge_from (12) · badge_to (47) · badge_unit (unread) · h1 (Your home shouldn't) · h2 (run on) · h3 (WhatsApp. — gets the green underline)
  Anim: HFB["notification-avalanche"](tl, root, t) — clock rises, 4 pings drop in with accelerating cadence and push the stack down, badge pops and counts up,
        headline card slams up from below with a stack shake, words land in two chunks, green underline draws, jitter hold. ~3 s (holds to any length).
  Note: the dark lock-screen backdrop (.hfb-aval-bg) is part of the block — it covers the scene .bg.
“OK” doesn’t alwaysmean understood
Please defrost the chicken for dinner
9:05 AM
OK ma’am
6:00 PM
Dinner time
Still frozen.
{{block:ok-misread-hook}}
block: ok-misread-hook
  From: helperflow-viral ad03-her-language 01-hook-ok. Instruction bubble → 'OK ma’am 👍' → 6:00 PM card with a still-frozen chicken; end pill.
  Params: c1 (“OK” doesn’t always) · c2 (mean understood) · msg (Please defrost the chicken for dinner) · time (9:05 AM) · reply (OK ma’am) · clock (6:00 PM) · cl (Dinner time) · end (Still frozen.)
  Anim: HFB["ok-misread-hook"](tl, root, t) — caption settle, my bubble pops (0.25), her OK pops (0.95), scene card rises (1.6), clock slams, frozen chicken pops and shivers, label hides, end pill pops (2.75). 4.0 s.
One care log for the whole home.
Medications for people and pets. Family and helper see the same log.
{{block:phone-caption}}
block: phone-caption
  From: helperflow-viral ct06-grandma-meds 05-app (same design: ct07-baby-3am 05-app; ct05 05-app adds a language chip row — not covered). Centred headline, a centred phone tilted −2° with a real app screenshot that scrolls up, a white caption card below.
  Params: title (One care log for <b>the whole home.</b>) (<b> teal) · size (title px, 88) · img (hf/app/hero/hero-t18.png) · shift (screenshot scroll in px, 300; 0 = no scroll)
    · caption (Medications for people and pets. <b>Family and helper see the same log.</b>) (<b> teal) · ptop (phone top, 560) · ph (phone height, 780) · ctop (caption top, 1360)
    ct07 05-app = title=Baby care in <b>one shared app.</b>|size=92|img=hf/app/hero/hero-t05.png|shift=260|caption=Feeds and sleep, logged. <b>Everyone sees the latest.</b>
  Anim: HFB["phone-caption"](tl, root, t) — title 0.05 s, phone flies up and tilts to −2° 0.15 s, screenshot scrolls 1.2–2.8 s, caption card pops 1.3 s. ~2.8 s (original frame 4.0 s).
Phrase 1 of 3
School pickup
EN
English
School pickup at 3
中
Chinese
下午三點接放學
TL
Tagalog
Sundo · 3:00
ID
Bahasa Indonesia
Jemput pukul 3
{{block:phrase-cards}}
block: phrase-cards
  From: helperflow-viral ct05-four-languages 02-pickup. Amber eyebrow pill, big centred title, 4 cards: round language tag + small label + the phrase in that language. Card 2 is the Chinese slot (Noto Sans HK).
  Params: pill (Phrase 1 of 3) · title (School pickup)
          ic0/lab0/big0/size0 (EN / English / School pickup at 3 / 72) · ic1/lab1/big1/size1 (中 / Chinese / 下午三點接放學 / 84)
          ic2/lab2/big2/size2 (TL / Tagalog / Sundo · 3:00 / 84) · ic3/lab3/big3/size3 (ID / Bahasa Indonesia / Jemput pukul 3 / 84) — sizeN = phrase font size in px
  Anim: HFB["phrase-cards"](tl, root, t) — pill + title 0.04, cards slide in from the right 0.30 / 1.05 / 1.80 / 2.55 s, each tag pops 0.12 s later. ~3 s (source scene 5 s). Source scene also wiped in (clip-path) — that is a scene transition, not in the block.
Save this
How to say
“School pickup at 3”
in 4 languages
English中文TagalogBahasa
The words every helper home uses
{{block:phrase-hook}}
block: phrase-hook
  From: helperflow-viral ct05-four-languages 01-hook-a. Light hook: amber pill, "How to say", a tilted mint note card with the quoted phrase (white ghost card behind), "in 4 languages", a row of 4 language chips that light up teal one after another (the ghost card wiggles each time), grey sub-line.
  Params: pill (Save this) · l1 (How to say) · phrase (School pickup at 3) · l2 (in <span class="hfb-phk-teal">4</span> languages)
          c0..c3 (English · 中文 · Tagalog · Bahasa — c1 uses Noto Sans HK) · l3 (The words every helper home uses)
  Anim: HFB["phrase-hook"](tl, root, t) — lines + card settle 0, pill 0.25, chips 0.45 stagger, chips light 1.0 / 1.4 / 1.8 / 2.2, l3 1.5. ~2.5 s (source scene 3.4 s). Source scene wiped in (clip-path) — scene transition, not in the block.
POV: you're in a meetingand can't stop wondering
2:47 PM
2:53 PM
2:58 PM
In a meeting
M
Ate Maria
online
Ate, did Mia take her medicine?
2:47 PM
typing…
…still no answer.
{{block:pov-chat-hook}}
block: pov-chat-hook
  From: helperflow-viral ad01-was-it-done 01-hook-pov. POV hook: big clock, 'In a meeting' pill, chat card with my unanswered message and a typing bubble.
  Params: c1 (POV: you're in a meeting) · c2 (and can't stop wondering) · t1 (2:47 PM) · t2 (2:53 PM) · t3 (2:58 PM) · pill (In a meeting) · av (M) · name (Ate Maria) · status (online) · msg (Ate, did Mia take her medicine?) · time (2:47 PM) · typing (typing…) · end (…still no answer.)
  Anim: HFB["pov-chat-hook"](tl, root, t) — caption settle, clock slams, pill pops, chat card rises, my bubble lands, typing dots bounce and vanish twice while the clock jumps t1 → t2 → t3 (shake), end line. 4.0 s.
Quick quiz
Your helper speaks2+ languages.
How manydo you?
1
2
3
4
Learn 3 phrases today →
{{block:quiz-hook}}
block: quiz-hook
  From: helperflow-viral ct05-four-languages 01-hook-b. Light hook: amber "quiz" pill, two-line statement, big two-line question, 4 white number circles pop in, a teal ring jumps across them and settles on the 2nd one, closing line.
  Params: pill (Quick quiz) · l1a (Your helper speaks) · l1b (<span class="hfb-qzh-teal">2+</span> languages.) · l2a (How many) · l2b (do you?)
          n0..n3 (1 · 2 · 3 · 4) · l3 (Learn 3 phrases <span class="hfb-qzh-teal">today →</span>)
  Anim: HFB["quiz-hook"](tl, root, t) — lines 0, pill 0.2, circles 0.5 stagger 0.12, ring 1.15 then hops 1.45 / 1.75 / 2.05 / 2.35, lands on circle 2 at 2.65, l3 2.3. ~2.9 s (source scene 3.6 s).
The question everycaregiver fears:
“Did she already take it?”
Yes?No?
Stop guessing.Log it.
{{block:quote-hook}}
block: quote-hook
  From: helperflow-viral ct06-grandma-meds 01-hook-b. Two-line lead-in, a tilted mint quote card with the big worried question, two answer pills that flicker amber (Yes? / No?), then a 2-line answer.
  Params: l1a (The question every) · l1b (caregiver fears:) · quote (Did she already take it?) (teal curly quotes added) · y (Yes?) · n (No?) · l3a (Stop guessing.) · l3b (Log it.) (teal)
  Anim: HFB["quote-hook"](tl, root, t) — lead-in + card punch-in (visible at frame 0), pills rise 0.5 s, amber flicker Yes/No 0.9–2.1 s, answer 2.4 s. ~2.8 s, then holds (original frame 3.6 s).
4
No tasks on her rest day
SAT
✓ Shopping✓ Meals
SUN
Rest day
MON
IroningClean the fridge
Hong Kong law
At least 1 rest day in every 7 days.
{{block:rest-day-week}}
block: rest-day-week
  From: helperflow-viral ct03-sunday-off 04-rest-day. Numbered headline, 3 day rows (SAT with done chips, SUN highlighted amber, MON); two task chips land on the SUN row, then slide down to MON and "Rest day" + sun appears; dark fact card.
  Params: n (4) · title (No tasks on her <em>rest day</em> — <em> = teal) · d1/d2/d3 (SAT · SUN · MON)
          done1/done2 (&#10003; Shopping · &#10003; Meals) · rest (Rest day) · task1/task2 (Ironing · Clean the fridge)
          k (Hong Kong law) · v (At least 1 rest day in every 7 days.)
  Anim: HFB["rest-day-week"](tl, root, t) — head 0.1, rows 0.35 stagger, tasks drop on row 2 at 0.8, move to row 3 at 1.9, rest label 2.35, fact 3.0. ~3.4 s (source scene 5.6 s).
Rules that areactually agreed
Rule changed?
Screen time:1 hour
House rule · updated
Screen time: 45 min, after homework
Accepted · Tue 9:14 AM
{{block:rule-change-hook}}
block: rule-change-hook
  From: helperflow-viral ad02-house-rules 02-hook-agreed. Old sticky-note rule gets crossed out and shrinks; the updated app rule card slides in and an 'Accepted · time' stamp lands.
  Params: c1 (Rules that are) · c2 (actually agreed) · q (Rule changed?) · old1 (Screen time:) · old2 (1 hour) · lbl (House rule · updated) · rule (Screen time: 45 min, after homework) · acc (Accepted · Tue 9:14 AM)
  Anim: HFB["rule-change-hook"](tl, root, t) — caption settle, note lands, 'Rule changed?' pops (0.55), red X draws in two strokes (0.95, 1.15), note shrinks + fades back, rule card rises (1.6), Accepted stamp slams (2.3) + card shake. 4.0 s.
You set the rules.She accepts them.
Shoes off at the door
Accepted · Mon 8:02 PM
Lock the gate after pickup
Accepted · Mon 8:02 PM
Screen time: 45 min
Updated · waiting to re-accept Re-accepted · Tue 9:14 AM
She reads them in her language
EN中文TagalogBahasa
{{block:rules-accepted}}
block: rules-accepted
  From: helperflow-viral ad02-house-rules 03-rules-proof. Headline + 3 rule cards with green 'Accepted · time'; card 3 goes amber 'Updated' then 'Re-accepted'; language chips.
  Params: l1 (You set the rules.) · l2 (She accepts them.) · r1 (Shoes off at the door) · r1st (Accepted · Mon 8:02 PM) · r2 (Lock the gate after pickup) · r2st (Accepted · Mon 8:02 PM) · r3 (Screen time: 45 min) · upd (Updated · waiting to re-accept) · re (Re-accepted · Tue 9:14 AM) · ll (She reads them in) · lang (her language) · k1 (EN) · k2 (中文) · k3 (Tagalog) · k4 (Bahasa)
  Anim: HFB["rules-accepted"](tl, root, t) — headline, 3 cards slide in from alternate sides, card 3 tints amber at 1.3, swaps to Re-accepted (green) at 2.2-2.3, language row rises at 2.8 (chip 3 is lit). 4.4 s.
6
One plan everyone can see
Today · Typhoon plan
1 of 3 done2 of 3 done
5:00 PM · Maria
Bring in laundry & plants
6:00 PM · Mike
Charge the power banks
All day · Everyone
Stay in. No errands today.
Each person reads it in their language
{{block:shared-plan}}
block: shared-plan
  From: helperflow-viral ct02-typhoon-8 05-shared-plan. Numbered headline + an app-like plan card: dark summary (label, "1 of 3 done" → "2 of 3 done", green bar 33 → 66 %), 3 task rows (row 1 ticked, row 2 ticks), amber chip below.
  Params: n (6) · title (One plan <em>everyone</em> can see — <em> = teal) · k (Today · Typhoon plan) · v1 (1 of 3 done) · v2 (2 of 3 done)
          tm1/tt1 (5:00 PM · Maria / Bring in laundry &amp; plants) · tm2/tt2 (6:00 PM · Mike / Charge the power banks) · tm3/tt3 (All day · Everyone / Stay in. No errands today.)
          chip (Each person reads it in their language)
  Anim: HFB["shared-plan"](tl, root, t) — head 0.1, card rises 0.35, rows 0.6 stagger, row 2 ticks + bar fills + count swaps 2.0 s, chip 2.7 s. ~3.1 s (source scene 4.8 s).
Shopping lists by shop. Or by person.
Wet marketMMaria
Fresh fish
Bok choy
Tomatoes
WellcomeMKMike
Milk
Rice 5 kg
Eggs
{{block:shop-split}}
block: shop-split
  From: helperflow-viral ad04-dinner-shopping 11-shop-lists. Word-by-word headline + 2 shop list cards (shop chip + person), items get ticked and struck.
  Params: h1 (Shopping lists by shop.) · h2 (Or by person.) · shop1 (Wet market) · av1 (M) · who1 (Maria) · i11 (Fresh fish) · i12 (Bok choy) · i13 (Tomatoes) · shop2 (Wellcome) · av2 (MK) · who2 (Mike) · i21 (Milk) · i22 (Rice 5 kg) · i23 (Eggs)
  Anim: HFB["shop-split"](tl, root, t) — h1 words stagger, cards swing in from left/right, h2 words slam at 0.9, three items tick + strike (1.5, 1.9, 2.3), card 1 breathes. 3.8 s.
Hong Kong · Typhoon season
T8
T8 is up.
Is your home ready?
6 things to check ↓
{{block:signal-hook}}
block: signal-hook
  From: helperflow-viral ct02-typhoon-8 01-hook-t8. DARK hook: own dark-teal backdrop (covers the scene .bg), slanted rain, amber warning-signal tile slams in with a ring + shake, big line, amber question, white nudge pill that bobs.
  Params: tag (Hong Kong · Typhoon season) · letter (T) · num (8) · l1 (T8 is up.) · l2 (Is your home ready?) · next (6 things to check &#8595;)
  Anim: HFB["signal-hook"](tl, root, t, o) — rain loops for o.duration (default 3.6 s); tile slam 0 s, ring 0.22 s, tag 0.15 s, l2 0.7 s, pill 1.8 s + bob, tile pulse 2.4 s. ~2.8 s of motion, rain to the end.
Our house ruleslived on the fridge
Shoes off at the door!
Gate locked after pickup
Mia: no sweets
Screen time 1 hour
Lights off by 10
Water the plants
Dark clothes separate
Dog: 2 meals only
Homework before TV
No phones at dinner
Bath at 7:30
Mia: 1 sweet on Fridays
Which one is current?
{{block:sticky-notes}}
block: sticky-notes
  From: helperflow-viral ad02-house-rules 01-hook-fridge. Fridge covered with 12 pinned sticky notes that fall off one by one; end pill.
  Params: c1 (Our house rules) · c2 (lived on the fridge) · n1 (Shoes off at the door!) · n2 (Gate locked after pickup) · n3 (Mia: no sweets) · n4 (Screen time 1 hour) · n5 (Lights off by 10) · n6 (Water the plants) · n7 (Dark clothes separate) · n8 (Dog: 2 meals only) · n9 (Homework before TV) · n10 (No phones at dinner) · n11 (Bath at 7:30) · n12 (Mia: 1 sweet on Fridays) · end (Which one is current?)
  Anim: HFB["sticky-notes"](tl, root, t) — caption settle; from 0.7 s the notes wobble and fall in a fixed order, faster and faster; end pill pops at 3.05. 4.0 s.
3 words that cause mix-ups at home
soon
later
the usual
Say this instead ↓
{{block:struck-words-hook}}
block: struck-words-hook
  From: helperflow-viral ct04-clear-instructions 02-hook-words. DARK hook (own dark-teal backdrop): headline with amber accent, 3 big mint word pills slam in one by one, red strikes cross them out and they dim, amber "instead" pill.
  Params: title (<em>3 words</em> that cause mix-ups at home — <em> = amber) · w1 (soon) · w2 (later) · w3 (the usual) · next (Say this instead &#8595;)
  Anim: HFB["struck-words-hook"](tl, root, t) — title 0, words 0.15 / 0.75 / 1.35, strikes 2.1 stagger 0.15 + dim, pill 2.8. ~3.2 s (source scene 4.2 s).
Tasks get done.
With photo proof.
Take out the trash
8:00 PM · Maria
Done at 8:02 PM
Fold the laundry · 9:00
Photo · 8:02 PM
{{block:task-proof}}
block: task-proof
  From: helperflow-launch 05-proof-tasks. A task card; a polaroid photo flies in with a flash; the check fills, the title strikes through, a green "Done at" stamp lands.
  Params: l1 (Tasks get done.) · l2 (With photo proof. — teal) · task (Take out the trash) · meta (8:00 PM · Maria) · done (Done at 8:02 PM)
          · photo (hf/illus/tasks.webp) · photo_cap (Photo · 8:02 PM) · ghost (Fold the laundry · 9:00)
  Anim: HFB["task-proof"](tl, root, t) — line 1 + card slide in from the right, polaroid flies in 14°→5° and flashes (0.5–1.3 s),
        check fills + tick draws, card tints mint, strike draws, DONE stamp (1.3–1.9 s), line 2 + faded next task (2.0–2.7 s). ~2.7 s, then holds.
Red flag:
rules that onlyexist in your head
Shoes off… or not?
Dinner at 6? 7?
Towels folded in 3?
“She should know.”
5 green flags instead →
{{block:thought-hook}}
block: thought-hook
  From: helperflow-viral ct09-green-flags 01-hook-b. A red flag + "Red flag:" label, a 2-line headline, a big thought cloud with 4 unwritten rules that appear and then blur away, a green pill.
  Params: k (Red flag:) · h1 (rules that only) · h2 (exist in your head) · r1 (Shoes off… or not?) · r2 (Dinner at 6? 7?) · r3 (Towels folded in 3?) · r4 (“She should know.”) · pill (5 green flags instead →)
  Anim: HFB["thought-hook"](tl, root, t) — label punch-in + flag wiggles (visible at frame 0), cloud grows 0.25 s, rules appear every 0.35 s from 0.55 s, rules 1–3 fade + blur 2.3 s, pill slides in 2.5 s. ~2.85 s, then holds (original frame 3.8 s).
You write in English. She reads it in Tagalog.
You · English
Please make sure James naps before football.
Auto-translated
Maria sees · Tagalog
Pakisiguradong umidlip muna si James bago mag-football.
EN中文TLID
{{block:translate-proof}}
block: translate-proof
  From: helperflow-launch 06-proof-translate. Your teal bubble types on in English, "Auto-translated" pops with a shimmer, her white bubble flips in already in Tagalog, language chips light TL.
  Params: la (You write in English.) · lb1 (She reads it in) · lb2 (Tagalog. — teal)
          · you_lbl (You · English) · you_msg (Please make sure James naps before football. — typed on, plain text)
          · tr (Auto-translated) · her_lbl (Maria sees · Tagalog) · her_msg (Pakisiguradong umidlip muna si James bago mag-football.)
          · chip1 (EN) · chip2 (中文) · chip3 (TL — this one lights up) · chip4 (ID)
  Anim: HFB["translate-proof"](tl, root, t) — line A words, your bubble slides in from the right and types on (0.12–0.58 s), pill pops + shimmer,
        her bubble flips in (0.8–1.35 s), line B words, her label, chips pop and chip 3 lights (2.2–2.85 s). ~2.9 s, then holds.
Still translating
for your helper?
中文
六點前請解凍雞肉，多謝！
⇅
Tagalog
Pakidefrost ang manok bago mag-6, salamat!
Copy
Copy→Translate→Paste→Send
×12 today… and again tomorrow
Maria is waiting…
{{block:translator-loop}}
block: translator-loop
  From: helperflow-translate hook A. Pain hook: copy → translate → paste, again and again.
  Params: h (headline HTML) · from_lang, from_text · to_lang, to_text · count (×12) · count_sub · waiting (chip text) · avatar (hf/cast/…)
  Language colours: card classes zh / tl (edit in markup for other pairs).
  Anim: HFB["translator-loop"](tl, root, t) — headline, cards, swap spin, text types in, pills light in a loop, counter ×3→×12, chip. ~3.4 s (end of hook: fade out from t+3.75 if the scene is 4 s).
Try today.
Helper & family join free
helperflow.app
{{block:try-today}}
block: try-today
  From: helperflow-translate v5+ last frame (partner feedback: short CTA, "today" in green).
  Params: l1 (Try) · l2 (today.) · pill (Helper &amp; family join free) · url (helperflow.app)
  Anim: HFB["try-today"](tl, root, t) — headline rises, green word pops, amber pill, logo, url, store badges. ~1.3 s, then holds.
“Clean the kitchen”
is not an instruction.
Clean the kitchen
Which part? By when? How clean is clean?
{{block:vague-hook}}
block: vague-hook
  From: helperflow-viral ct04-clear-instructions 01-hook-vague. Light hook: big quoted instruction, teal verdict line, an unticked task card, three amber question pills pop around it, the card shakes.
  Params: quote (&#8220;Clean the kitchen&#8221;) · not (is not an instruction.) · task (Clean the kitchen) · q1 (Which part?) · q2 (By when?) · q3 (How clean is clean?)
          (pills sit at fixed spots: q1 left 80 / top 1170, q2 left 560 / top 1240, q3 left 230 / top 1360 — keep them short)
  Anim: HFB["vague-hook"](tl, root, t) — quote 0, card 0.25, verdict 0.75, pills 1.4 / 1.8 / 2.2, card shake 2.7. ~2.9 s (source scene 3.8 s).
Our 7-dayHK family menu
Save it
Mon1
Tue2
Wed3
Thu4
Fri5
Sat6
Sun7
+ 1shoppinglist
Cantonese · Filipino · Indonesian · pasta night
{{block:week-grid-hook}}
block: week-grid-hook
  From: helperflow-viral ct08-week-menu 01-hook-b. "Save it" listicle hook: left 2-line headline, tilted amber bookmark pill, a 4×2 grid of day cards (day + numbered mint plate) with a dark 8th card, and a mix line.
  Params: h1 (Our 7-day) · h2 (HK family menu) (teal) · save (Save it) · d1–d7 (Mon … Sun) · p1–p7 (1 … 7) · k8 (+ 1) · x1 (shopping) · x2 (list) · mix (Cantonese · Filipino · Indonesian · pasta night)
  Anim: HFB["week-grid-hook"](tl, root, t, o) — headline punch-in (visible at frame 0), save pill pops to −3° at 0.1 s, cards pop every 0.12 s from 0.2 s, mix line 1.5 s, save pulse 2.6 s; grid exits up at 3.3 s (o.exit = other time, or false). ~2.9 s + exit (original frame 3.6 s).
Our week menu
Mon → Thu
Mon
Steamed fish
Cantonese · ginger + spring onion
Tue
Tomato & egg
Quick · with rice
Wed
Chicken adobo
Filipino favourite
Thu
Soto ayam
Indonesian chicken soup
{{block:week-menu}}
block: week-menu
  From: helperflow-viral ct08-week-menu 02-menu-1 (4 rows) and 03-menu-2 (3 rows + dark tip). Left-aligned kicker + big title, then up to 4 day rows: coloured day tile (teal-light, amber-light, teal, amber) + dish + small tag.
  Params: k (Our week menu) · h (Mon → Thu) · per row 1–4: d (day: Mon…) · n (dish: Steamed fish…) · s (tag: Cantonese · ginger + spring onion…)
    · tip (dark tip card under the rows, <b> = amber; default empty = hidden) · t0 (first row time, 0.45) · step (time between rows, 1.15)
    An empty d hides the row. 03-menu-2 = h=Fri → Sun|d1=Fri|n1=Congee|s1=Light and easy|d2=Sat|n2=Sweet &amp; sour pork|s2=Weekend treat|d3=Sun|n3=Pasta night|s3=The kids’ pick|d4=|tip=Tip: let <b>everyone</b> pick one night.|t0=0.4|step=1.0
  Anim: HFB["week-menu"](tl, root, t) — kicker + title rise, rows slide in from the right (t0 + i·step), then the tip pops (last row + 0.6 s) or, with no tip, the title pulses (last row + 1.1 s). ~5.5 s with 4 rows (original frames 6.0 / 5.0 s).
Plan the week's dinners. Once.
This weekFrom your dish library
MonSteamed fish
TueTomato & egg
WedChicken adobo
ThuSoto ayam
FriSweet & sour pork
SatCongee
SunPasta night
Everyone sees the menu
{{block:week-plan}}
block: week-plan
  From: helperflow-viral ad04-dinner-shopping 10-plan-week. Word-by-word headline + 'This week' card with 7 days of dinners + green pill.
  Params: h1 (Plan the week's dinners.) · h2 (Once.) · title (This week) · lib (From your dish library) · d1 (Steamed fish) · d2 (Tomato &amp; egg) · d3 (Chicken adobo) · d4 (Soto ayam) · d5 (Sweet &amp; sour pork) · d6 (Congee) · d7 (Pasta night) · pill (Everyone sees the menu)
  Anim: HFB["week-plan"](tl, root, t) — h1 words stagger up, card rises, library chip pops, dishes slide in day by day (0.2 s apart from 0.6), h2 slams at 2.1, pill at 2.4, card breathes. 4.0 s.
New helper starting Monday?
Mon
19
Tue
20
Wed
21
Thu
22
Fri
23
Sat
24
Sun
25
Mon · New helper arrives
School run times
Mia: no peanuts
Grandma's meds
Wi‑Fi password
Where the mop is
Rubbish night
Her rest day
House rules
Dinner for 4
Bath at 7 PM
Don't keep it all in your head.
{{block:week-strip-hook}}
block: week-strip-hook
  From: helperflow-viral ad05-new-helper-week 01a-hook-monday. Week calendar strip with Monday circled in red + event row; 10 'things to explain' notes pile up; dark slam card.
  Params: l1 (New helper) · l2 (starting Monday?) · ev (Mon · New helper arrives) · n1 (School run times) · n2 (Mia: no peanuts) · n3 (Grandma's meds) · n4 (Wi‑Fi password) · n5 (Where the mop is) · n6 (Rubbish night) · n7 (Her rest day) · n8 (House rules) · n9 (Dinner for 4) · n10 (Bath at 7 PM) · s1 (Don't keep it all) · s2 (in your head.)
  Anim: HFB["week-strip-hook"](tl, root, t) — calendar settles, red ring draws round Monday (0.1-0.5), event pulses, notes drop in faster and faster from 0.7, pile shakes at 2.0, slam card flies up at 2.3 and breathes. 3.6 s.

Cast

av-grandma.png
av-maria.png
av-mei.png
av-mike.png
av-siti.png
hook-illus.png

Logos