# Cinematic Shot

Shoot software UI like a film.

- Repository: https://github.com/dzhng/skills (1394 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add dzhng/skills --skill cinematic-shot -g -a claude-code -y`
Codex: `npx skills add dzhng/skills --skill cinematic-shot -g -a codex -y`
Cursor: `npx skills add dzhng/skills --skill cinematic-shot -g -a cursor -y`
Gemini CLI: `npx skills add dzhng/skills --skill cinematic-shot -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Cinematic shot

You are the director and the DP, not the motion designer. The film is a sequence of **hero shots**. Each one looks at a real piece of the product's UI from a steep, low angle, so close that the focal plane covers only a line or two of text and everything else melts into black. The camera drifts slowly toward where the next thing will happen. The UI does the work by itself: things get typed, streamed, selected, and written while we watch. Nothing explains itself with captions.

This skill is about camera, framing, light, and the edit. Build the film with any rendering stack. Whatever you choose, make every frame a pure function of time, so the film renders deterministically and can take motion blur.

Read [references/look.md](references/look.md) for exact camera, depth-of-field, light, reveal, and type recipes. Read [references/shot-list-example.md](references/shot-list-example.md) for a full example of the shot grammar.

For a ~15 second promo video made in code from a landing page (a continuous 3D fly-over of the page ending on a title card with the brand, logo mark, a two-part closing line, and an optional track), follow [references/landing-page-promo.md](references/landing-page-promo.md).

## The taste

A black void. The product floats in it like a dark slab, tilted away from the camera, lit by a soft pool that follows whatever matters and lets everything else fall into black. The camera is low and close, looking *along* the UI rather than at it, so lines of text run diagonally across the frame and shrink into the distance. The focal plane is a thin band: one control, one line of typing, one row of a list is sharp, and the rest is soft bokeh. The camera never stops drifting and never moves fast. Shots are long enough to watch something happen. The only colour is the product's own. Restraint everywhere else.

## 1. Find the story before the shots

Before planning a single camera, write down:

The rest: https://github.com/dzhng/skills/blob/HEAD/skills/graphics/cinematic-shot/SKILL.md