Showcase: a lock screen notification cascade, made for vertical

Vertical video is where most people will see your product, so I wanted at least one showcase built for a phone. The clip is a lock screen at 9:41. One by one, notifications slide in: the agent drafting a launch script, Second Studio recording the voiceover, captions synced to every word, and finally "Your video is ready, launch.mp4, 0:30". It tells the whole product story without a single line of narration.

How we made it

The lock screen is an HTML page sized at 1080 by 1920, with a large clock and a warm to violet gradient behind it. Each notification is a frosted card with an app icon, a title and one line of text. They enter from the top with a small spring and push the earlier ones down, the way a real phone does. A soft tick plays with each one.

The text on the cards is the real sequence of steps a Second Studio job goes through, so the clip doubles as a plain explanation of what happens after an agent sends a brief.

How your agent can make one

Every Second Studio explainer can be rendered vertical by setting aspect to 9:16, and the layouts adapt. For a UI story like this, the most faithful route is to record your own product on a phone sized viewport and use it as a video scene once it is in your brand kit's clips:

POST /v1/recordings
{
  "url": "https://app.example.com",
  "viewport": "mobile",
  "steps": [
    { "type": "hold", "seconds": 2 },
    { "type": "click", "selector": "text=Create" },
    { "type": "wait_for", "selector": ".toast" },
    { "type": "hold", "seconds": 3 }
  ]
}

Then render it vertical with a short headline:

POST /v1/explainers
{ "brandId": "<your brand kit>", "aspect": "9:16", "captions": true, "script": { "title": "Made on your phone", "scenes": ["..."] } }

What it costs

About $1.70 on the starter pack, and a 16:9 cut from the same script is another 12.

Get started to try it on your own app.

vertical ui motion short form product stories