apple-launch-film

Q: How do I install apple-launch-film?

Run npx skills add https://github.com/charlie947/motion-graphics-skills --skill apple-launch-film in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/apple-launch-film/ (personal) or .claude/skills/apple-launch-film/ (project).

by charlie947Marketing & SEO

Rebuild an Apple-style Mac launch film entirely in code with Claude Code. A thin menu bar, the black notch growing into widgets one scene at a time, full-screen gradient wallpapers and one short caption per scene. No screen recording, no After Effects. Use when someone says "Apple-style launch", "Mac launch video", "notch animation", "make it look like an Apple keynote", "macOS UI launch film" or wants a product launch that looks like native Mac interface.

Installs: 1.5K
Last 24h: +63
Trending rank: #2846
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/charlie947/motion-graphics-skills --skill apple-launch-film

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads apple-launch-film automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Apple-style launch film, built in code

Every pixel of the Mac is drawn in code: the menu bar, the notch, the widgets and the wallpapers. One HTML file with window.seek(seconds), exported to MP4.

Before you start: read brand.md and MOTION.md if they exist. If not, run brand-intake first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

Pairs with a free skill (not mine) that turns Apple's design guidelines into rules Claude follows. Install it once:

npx skills add emilkowalski/skills --skill apple-design

Step 1: Ask for five things, then wait

The product name and its one line, word for word.
The facts list. Every feature, number and requirement the film may show. Nothing else goes on screen.
The scenes. 6 to 8, each one feature plus one short caption. Example: "Your voice lives here."
A reference (optional): a real Mac launch film or frames of one, in a folder called ref. It sets the look only.
Size and length. Default 1920 x 1080, 30fps, about 2.5 seconds a scene.

Step 2: Build brief (paste into Claude Code)

Use the apple-design skill. [If ref/ exists: Match the LOOK of the reference in ref/. Read every frame first. Do not copy its words or its product name.]

It is a launch film for [PRODUCT]: the black MacBook notch at the top centre grows into Apple-style widgets, one scene at a time. Each scene has its own full-screen colour-gradient wallpaper and one centred caption below the notch, with the last word or two tinted a lighter shade of the wallpaper colour. It opens with the notch expanded and the word "hello" handwritten in a white script line, like the Mac hello screen.

Use only these facts, and add no others:
[FACTS LIST]

Scenes, about 2.5 seconds each:
[1. Notch expanded on black, "hello" handwritten.]
[2..n. Wallpaper colour, what the notch opens into, the caption.]
[Last. Black: the notch closes to its resting shape. Caption: PRODUCT and its one line.]

Size [WIDTH] x [HEIGHT], 30fps. The frame is a Mac screen: a thin macOS menu bar across the top with the notch in the middle of it. System fonts (-apple-system, Helvetica Neue fallback).

Build it as one self-contained HTML file with window.seek(seconds) that draws any exact frame. Capture one frame from each scene [and compare it side by side with the matching reference frame]. Fix what differs, and check the motion against the apple-design skill.

What I learned the hard way

Name the notch in words. Given the same brief, one model drew a whole laptop instead. "The notch at the top centre of the screen" is the anchor.
Springs, not tweens. The notch looks right when width and height spring on their own curves, open soft and close without overshoot.
Work motion out from the start of the film. If the notch reopens before it has finished closing, it carries on from where it is. A per-scene tween jumps.
Compare against the reference, scene by scene. Side-by-side frames caught a "hello" that sat off-centre and too big, a chunky progress bar that should be thin ticks, and a prompt jammed into the menu bar.
Keep the menu bar short. A full menu of words gets cut in half by wide widgets. Five items is plenty.
Widgets add no claims. Placeholder text is grey lines. Any UI word the facts list did not give you (button labels, a clock time) gets listed back for approval.

Step 3: Check and export

Would a stranger believe it is a real Mac for the first second? Is every word on screen from the facts list? Add a reduced-motion setting that swaps springs for quick fades.

Export with HyperFrames (free, open source): npx skills add heygen-com/hyperframes, then npx hyperframes render. For a vertical cut, hand the MP4 to reel-export.

FAQ

What does the apple-launch-film skill do?

How do I install apple-launch-film?

Run npx skills add https://github.com/charlie947/motion-graphics-skills --skill apple-launch-film in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/apple-launch-film/ (personal) or .claude/skills/apple-launch-film/ (project).

Which AI agents can use apple-launch-film?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is apple-launch-film safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains apple-launch-film?

It is published by charlie947 in charlie947/motion-graphics-skills. It has 1,524 recorded installs.