---
name: launch-film
description: Plans and makes a short product launch film as code: nine five-second motion design scenes, each in its own scene style, in one look, put together in the video editor. Use for launch videos, product teasers, feature announcements and release films.
---
# Launch film

## Read first
Launch.md: the product, what it is, who it's for, the one line, the look, the mark and where to get it, and every scene's message, style and words. Each scene's style is the scene file wired into it, and the logo is wired in when there is one.

## The film
- About 45 seconds: nine scenes of five seconds, one beat each, in the order a viewer needs them: the hook (what people do today, or the question), the problem, the turn, the product's name and line, three scenes of how it works (one idea each), the proof, and the close.
- Each scene says one thing in at most ten words on screen, usually three to six, plain and specific to this product. The film reads as one sentence told across cuts: a scene can end mid-thought and the next one finish it.
- Each scene's style suits its message (below), and two scenes in a row never share a style; across the film, use each style about twice at most. The close is the family's end card: the product's name, its line and where to get it.
- The Film row names the film it starts from, and its families are the film's language (Canvas film: Canvas; Feature drop: Kinetic type; App launch: Product UI with Kinetic type): every scene in their styles, unless Launch.md asks to mix in others.
- Product UI styles show the wired screenshots; with none wired, a style that needs them draws its own stand-in, so prefer them when there are screenshots.

## Scene styles
### Canvas
Told with Fil’s own canvas: nodes, threads and runs.
- Days to minutes: for the hook, the problem, time saved, a before and after. Words: headline, rows, times, steps, day.
- Cross it out: for the problem, before and after, simplicity, replacing busywork. Words: node title, node detail, subtitle in the film, new way, old way (files, struck out).
- Run: for cause and effect, the turn, pressing go, it just works. Words: run node title, button, headline, nodes.
- One thread: for the name and its line, how it works, steps that connect. Words: headline, steps, the idea, as written, the launch line (film and site).
- Generate all: for automation, many steps at once, a pipeline, speed. Words: workflow name, button, headline, steps, models, status words.
- Every format: for one thing becoming many, formats, reach, write once. Words: source document, the document's title, the document's lines, headline, outputs.
- Change a step: for editing, iteration, control, changing one thing. Words: menu title, another choice in the menu, headline, plan steps, the step it becomes, mark on the steps that stay, project name.
- Every model: for choice, integrations, the best tools for each job. Words: models, node, headline.
- Sentence to nodes: for the pitch, one thing becoming others, how it works. Words: sentence (words in [brackets] become nodes), name on the site, site headline, site button.
- Pull it through: for the brand line, connection, from an idea to a result. Words: first node, the idea, as written, last node, film length, headline.
- Everything follows: for consistency, one change everywhere, a system. Words: headline, sections, project name.
- Brand colours: for personalisation, themes, brand, every scene in your colours. Words: scene words, colours, headline.
- Side by side: for collaboration, teams, real time. Words: names, headline, document, document text, brand node, poster node, draft title, poster title, poster details.
- Versions: for history, nothing lost, trying again. Words: headline, asks (it rewinds to the first), the new take's ask, button, rerun tag (before the version it came from).
- Cut together: for editing, assembling, it comes together. Words: sound name, duration, export cost, headline, clips.
- Live: for launch, going live, sharing, reach, the proof. Words: page node, button, button once published, status, address, headline, visitors, more visitors, site line, site button.
- The mark: for the close: the name, the line, where to get it. Words: name, line, address, the three nodes.

### Kinetic type
The type is the picture: big words that move with weight.
- Knock-on: for the hook: a set-up and its payoff, a promise or a question. Words: headline, kicker.
- Gives way: for the problem: a slow, many-step process that breaks down. Words: the old way's steps, headline.
- Through the old: for the turn: the old way to the new, from this to that. Words: before (the old way), after (the new way), small label.
- Out from behind: for the product’s name and what it is, with its logo. Words: name, what it is. Pictures: logo.
- Sorts itself: for a feature about sorting or putting things in order, in a line that still reads with two words swapped. Words: small label, the feature, in one line.
- Lined up: for three features or three things it makes, and what they add up to. Words: headline, three features.
- Closing the gap: for the proof: one number that says it all, a time, a count or a price. Words: number, unit, what it means.
- Word for word: for a customer’s or a user’s words. Words: quote, name, role.
- Justified: for the film’s one line to remember. Words: the line.
- Close ranks: for the close: the name, the line and where to get it, with the logo. Words: the line, name, where to get it. Pictures: logo.

### Product UI
Your screenshots in clean frames, with camera moves and callouts.
- Out of the screen: for the hook, or introducing the product over its screen. Words: kicker, headline. Pictures: screenshot.
- Room to think: for a redesign, a cleanup or any before and after. Words: headline, after label, before label. Pictures: before screenshot, after screenshot.
- In step: for how it works: three features, shown on the product’s own screen. Words: features. Pictures: screenshot.
- A scroll away: for everything in one place: a library, a feed, all your work. Words: headline. Pictures: screenshot.
- Unlocked: for a phone app, or work that goes with you. Words: kicker, headline, notification. Pictures: phone screen.

## Making a scene
- The wired scene file is the starting point: keep its choreography, timing, easing, type scale, layout and craft as they are, and change what this scene's message needs: its marked words (data-fil-text) and the things that carry them (how many labels, facts, options or cards), never its motion design.
- Set the brand exactly as Launch.md gives it: the mode on the html tag, its colours in the first :root rule and the other mode's in the :root[data-mode] rule, the fonts in --font-display, --font-text and --font-mono with their Google Fonts link; hard-code no other colour or font.
- Keep the style's sound marks (<meta name="fil:sounds">): the moments its sounds land on. Move a time only when that moment moves.
- Keep <meta name="fil:duration" content="5">, every data-fil-text and data-fil-label mark, the :root variables and the scripts' rules: words read from their elements when the page loads, measured in the stage's units and again when it's resized, randomness seeded.
- Words fit the scene: a headline no longer than the style's own (shorten the words before shrinking the type), a list as many items as the style shows, every word spelled as Launch.md gives it.
- The product's mark: the wired logo where the style has room for one (the close), as an <img> of its address set small beside the headline; without one, none.
- Pictures: a style's picture slots (elements marked data-fil-image) show the wired screenshots, a phone screen in a phone slot, the logo in a logo slot: the slot's contents replaced by one <img> of the picture's address, width and height 100% and object-fit as its data-fil-fit says, the mark kept. A slot with no picture keeps what it draws.

## Avoid
Changing a style's motion, new effects, slideshow fades, more words than the style holds, numbers or claims Launch.md doesn't give, stock phrases ("revolutionary", "next-level", "game-changer"), emoji, and colours outside the Look.