cinematic-shot
Shoot software UI like a film. A sequence of hero shots, each a steep, oblique, extreme close-up of the interface floating in black, with a razor-thin focal plane, a slow motivated camera drift, and UI that acts on its own, hard-cut on the action, ending on one line of copy and a still logo. Use when asked for a launch video, product film, feature trailer, teaser, promo clip, hero shot, or any "cinematic" footage of an app or UI. This skill covers camera, framing, light, and edit. It is stack-agnostic.
Install
npx skills add https://github.com/1weiho/cinematic-shot --skill cinematic-shotShot list example
This is a 52 s film, written in the abstract so it maps onto any feature. Replace each subject with the real piece of UI. Keep the rhythm, scales, and angles. It is shot on the dark stage; on the light stage, read "Black" as the ground colour.
The story shape is:
- A close look at the familiar app, where the entry point for the feature appears.
- The feature's view opens, and we read its core content up close.
- The user asks for something; the product answers while we watch.
- A single confirming action.
- The payoff, in the film's only wide shot.
- A close-up on the result.
- Copy, then the logo.
Magnification is relative to the UI at its native size, measured at the focal point. Angles are pitch (tilt back) / roll (in-plane, which sets the diagonal) / yaw. Drift is the camera move across the whole shot.
Why it works
- Shot length follows the action. The long shots (3, 5, 6, 8) are where something visibly happens: reading, typing, generating, paying off. The short shots (1, 4, 7) are punctuation, a single selection or press. Long and short alternate, so the film breathes instead of strobing.
- Scale rhythm: macro, macro, medium, extreme macro, macro, medium, extreme macro, wide, macro. The extreme macros are accents between longer reads. Holding the wide shot back until the payoff makes it land like a release.
- The diagonal flips on every cut. Roll alternates between negative and positive, so even two macros in a row read as different camera positions.
- The camera is always motivated. It tracks along a row, rises with a streaming reply, and pushes toward a button. It never moves just to move.
- Focus tells the eye where to go. Only a thin band is sharp. In shot 5, the rack from the input to the reply is the edit inside the shot.
- No pointer, no effects. The UI selects, presses, and writes on its own, so every frame stays about the product.
- The ending is quiet. After the widest, busiest shot, the film settles back into one close line, then one line of type, then a logo that does nothing at all.
Camera numbers in practice
With a CSS-style perspective camera at perspective: P looking at a plane dist away, the magnification at the focal point is about P / dist. At P = 1300:
A 4% push from 2.8× to 2.9× takes dist from 464 to 448. With a strong pitch, the near edge of the frame can be several times closer than the far edge, which is exactly where the depth of field comes from.
A still set
The same story, shot as five stills for a launch post: a hero image, three supporting stills, and a social card. Same stage, grade, and grain throughout. The film's cameras are not reused: each still gets the photographer's camera from Stills in look.md [blocked], with a perspective of about 2–2.2× the frame width. Angles are pitch / camera roll / in-plane roll / yaw.
Why it works:
- No still is a film frame. Every one has a longer lens, a level plane, and a whole subject inside the frame. Nothing looks caught on its way into the shot.
- The whole subject is sharp, and nothing else is. Camera roll keeps each text line inside the sharp zone, and the zone stops right at the subject's edges.
- Each frame shows an object. A real edge of a panel, a card, or the slab, with its shadow, gives the frame a structural line and makes the UI read as a thing on a set.
- The hero is the payoff, at medium scale, not the whole window: a single still has no cut to make a wide frame land.
- Scale still varies (medium, macro, extreme macro, macro, macro), and the diagonal flips between neighbours, so the set reads as one shoot from several camera positions.
- Every still is a moment: a reply generating, a prompt being typed, a tab just selected. None of them is the UI at rest.
- Copy appears once, on the social card, in the negative space and never over the UI.