launch.md
41 lines · skills/hyperframes/references/types/launch.md at a595755
Most marks come from matching words in the file, so treat them as pointers.
Launch, promo and feature films
The shape is ../story.md §4 (hook → tension → reveal → proof → payoff → claim → end card), usually 20–45 s. What a viewer shares is real people and real output: in the official films, effects-heavy pieces drew about a tenth of the views of ones built on a real result.
Real UI, never a mockup
Everything that claims to be the product is the product. One invented button loses everyone who uses it.
- Where it comes from, best first: the person's recording or screenshots (ask, naming the screen per beat, when the proof needs one you cannot capture); Figma frames, rebuilt as states of one app so the change between two frames is a real click (
/figma); walking the flow yourself when no sign-in is needed;npx hyperframes captureof the feature's own page; the product's code, PR or docs to confirm today's labels. - Missing a screen: a clearly labelled placeholder ("Screenshot: Settings → Motion"), said in the reply. A feature with nothing visible (speed, an API): the real UI that exposes it, a real analogue the viewer knows, real terminal output, or a checklist of real facts. Never a made-up dashboard.
- Logo, icons and fonts are the brand's own files (
/media-usefor logos); never redrawn from memory, never a coloured square for an app icon.
The product on screen
Captured screens establish what is real; they are not a shot list. A launch film can rearrange verified pieces to explain a result. For a launch, do not substitute a sequence of full-page screenshots with titles for showing what the product does.
Plan the relationship between the product and its parts:
- Establish the workspace. Show enough of the real navigation and surrounding interface to locate the task. A whole-product view supplies context; the viewer does not need to read every control.
- Isolate the action. Bring the relevant chart, field or result forward. Keep its real labels, values and state; rebuild only the piece the beat uses and show it at 1.6–2× its real size. Text stays at least 26 px at 1080p after any push. Never a small window in the middle of an empty canvas, never product UI tilted in 3D. Let a trace draw, a result populate or a panel open before advancing. A camera move over a frozen screenshot is not the product performing an action.
- Return the result. Carry the same component back into its place in the interface, or pull back to show where the output is used. When the result plays inside the product, pull back to reveal its player or zoom through the player until the result fills the frame. A film made only of floating close-ups loses the system they belong to. Do not imply that a rearranged component is an interaction the product actually supports.
Keep a short explanation where the action needs one: a phrase naming the change, the relevant label or the meaning of a number. "Less text" does not mean removing the context needed to understand the evidence. Reveal supporting elements across the beat instead of showing everything at its start and extending the hold. Review the transition's intermediate frames as well as its endpoints; carried labels and values must not jump or get covered on the way back into the workspace.
For a background or palette revision, update the root, scene surfaces and timeline color tweens together; a later tween can restore the old background. Adjust text, chart strokes and axes for contrast on the new ground, then check frames from every affected scene and transition. Preserve the product's meaningful status colors.
- The camera cycles between the window on its ground, one pane, and a punch-in on one control. Moves take 0.4–0.6 s with motion blur, arrive at the control the cursor needs, then hold while the UI acts.
- Containers morph instead of cutting: the button becomes the menu, the message becomes the bubble.
- The cursor is big (4–7% of the frame), enters from off-screen, and its click causes the next thing on the same frame.
Worlds and transitions
Visit several worlds (../story.md §5) and enter each through an object on screen, with 3–5 kinds of transition in a film (../motion.md "Transitions with a cause").
The end card
The mark lands in the last 5–10% of the film, centred, the lockup 15–30% of the frame width, performed rather than faded in: the cursor clicks the mark and a fill rises through it, or a character carries it in, then the wordmark wipes in beside it. Then the call to action (a real button, the command to type), held 1.5–3 s.
Raw lines 35 to 38Tells for this type
Typing into a prompt box as the opener; a feature list as three cards; a title over a dimmed screenshot; an invented dashboard; the logo docked in a corner.
Raw lines 39 to 41