render-ios-lockscreen
render-ios-lockscreen
Generate iOS lockscreen screenshots that look like real captures — translucent grouped notification banners, app icons with avatar thumbnails, "now" / "2m ago" timestamps, the centered clock + date stack, status bar (signal, wifi, battery), optional Dynamic Island, and an optional decorative tear/glow overlay that sells the "too many notifications to handle" payoff.
Purpose
Produce ONE static lockscreen PNG (or its underlying HTML) from a JSON config. Use this as a hyperframe inside a video ad — typically as the climax of a "notification flood" mechanic where the lockscreen reveals an avalanche of app banners from one brand.
This atom is intentionally static. Animation (banners sliding in one by one, the stack tearing apart) lives in the calling molecule (notification-flood-ad), which drives this atom's HTML through Playwright with a TIMELINE — same pattern as create-imessage-video-ad drives create-imessage-mockup.
When to use
- "Notification flood" ad payoff (N messages from the same app raining onto the screen)
- "Lockscreen reveal" — the brand's notification is the punchline
- Hyperframe inside a UGC ad where the camera pretends to look at someone's phone
- Storyboard frame showing what an app's push looks like in context
If you need a chat thread instead, use skills/atoms/messaging/create-imessage-mockup. If you need a full motion-graphics composition, use skills/atoms/motion-graphics/create-motion-graphics-hyperframes.