App Capture for TikTok

Three repeatable formats that record the live Fulin web apps in a 360x640 viewport at 3x (exactly 1080x1920), with a status bar and tap ripples, then compose them into posts.

What to say

Capture a split-screen recording of the HSK reader and compose a TikTok post.

How it works

Write a capture plan JSON
capture_app_screen.py
split_capture.py at step labels
Stage assets and render with the batch workflow

Example input (examples/app_capture.json)

{
  "slug": "example_reader_decode",
  "url": "https://hsk.fulinlabs.com/text-reader",
  "viewport": { "width": 360, "height": 640, "scale": 3 },
  "output": { "width": 1080, "height": 1920, "fps": 30 },
  "color_scheme": "light",
  "status_bar": { "enabled": true, "time": "9:41" },
  "tap_indicator": true,
  "settle_seconds": 0.9,
  "tail_seconds": 1.8,
  "steps": [
    { "action": "tap", "label": "open paste tab", "selector": "button:has-text('Paste')", "after": 0.5 },
    { "action": "type", "label": "paste the text", "selector": "textarea", "text": "老板，这个多少钱？太贵了！", "delay_ms": 90, "after": 0.6 },
    { "action": "tap", "label": "read it", "selector": "button:has-text('Read')", "after": 1.2 },
    { "action": "tap", "label": "reveal first word", "selector": "button:has-text('老板')", "after": 1.8 },
    { "action": "tap", "label": "close card", "selector": "button:has-text('Close')", "after": 0.4 },
    { "action": "tap", "label": "payoff", "selector": "button:has-text('贵')", "after": 2.6 }
  ]
}

At a glance

Best for

Growth posts for hsk.fulinlabs.com and flashcard.fulinlabs.com

You give

A capture plan

You get

Phone-screen recordings

Time

Minutes

Cost

Free

Good to know

Needs PEXELS_API_KEY for b-roll and the SchedulePost app for scheduling

Examples (real results, first 24 seconds)

No sample render of this one is checked in yet. Ask for it and the first result becomes the example.