skill
apple-notes-ad-skill
Apple Notes Ad: a Claude skill that turns ad copy into an iOS Notes typing-animation video ad. One self-contained HTML file, deterministic rendering, one-command MP4 export, no video model needed.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/neomorrison/apple-notes-ad-skill itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 23, 2026Apple Notes Ad — a Claude skill
Turn a few lines of ad copy into a believable "typing into Apple Notes" video ad — a single self-contained HTML file, no video-generation model involved.
Features
- Pixel-fidelity iOS 17 Notes UI — status bar, gold nav bar with a live "Done" button, date line, bold title + body text, and a fully modeled iOS keyboard (letter + numeric/punctuation layouts, shift-to-uppercase, key-pop balloons, accessory toolbar).
- Deterministic, seeded typing engine — realistic inter-key jitter, punctuation pauses, thinking pauses, and newline pauses, all driven by a mulberry32 PRNG so the same config always renders the same frames.
- Time-driven renderer, not CSS animation — the whole ad is
render(t), a pure function of milliseconds. Seek anywhere, forwards or backwards, and get the exact right frame. That's what makes frame-perfect MP4 export possible. - Cinematic intro/outro — keyboard slides up to start typing, slides down when done, note content glides up-and-scales for a title-card finish, with an optional fading caption.
- Zero network requests — every icon is inline SVG, fonts fall back to the system stack. Open the file and it just plays.
- One-command MP4 export via a Playwright + ffmpeg recorder that steps the timeline frame-by-frame (see below).
Quick start
Open assets/template.html directly in a browser (double-click it, or drag it into a tab). It ships with a working demo ad and starts playing automatically.
Use it with Claude
Clone or copy this repository into your skills folder:
# project-level
cp -r apple-notes-ad-skill .claude/skills/
# or user-level, available in every project
cp -r apple-notes-ad-skill ~/.claude/skills/
Then just ask, e.g.:
"Make me a 20-second Apple Notes style ad for my app Lunaria. It's a smartwatch, $249, ships Sept 12, hook: 'notes to self, 3:14am'."
Claude will read the CONFIG contract in assets/template.html, copy the template to a new campaign-named file, fill in your copy, estimate the runtime, and offer to preview it or record an MP4.
Recording to MP4
npm install
npx playwright install chromium
Make sure ffmpeg is on your PATH (ffmpeg -version should work in a terminal), then:
npm run record -- --in examples/demo.html --out demo.mp4
Full options:
node scripts/record.mjs [--in <html>] [--out ad.mp4] [--fps 60] [--scale 3]
| Flag | Default | Meaning |
|---|---|---|
--in | assets/template.html | Path to the ad HTML file to record |
--out | ad.mp4 | Output MP4 path |
--fps | 60 | Frames per second to capture |
--scale | 3 | Device pixel scale (higher = crisper, slower) |
The recorder doesn't record wall-clock playback — it pauses the page's own animation loop and calls window.__seek(t) for every frame timestamp, screenshotting each one, then stitches them with ffmpeg (libx264, yuv420p, crf 18, +faststart). That's what makes the export frame-perfect regardless of how fast or slow the recording machine is.
CONFIG reference
All editing happens inside the CONFIG object at the top of the <script> in assets/template.html (or your copy of it). Never edit anything below the END CONFIG marker.
| Key | Type | Description |
|---|---|---|
seed | number | PRNG seed. Same seed + same config = identical output every time. |
paceMultiplier | number | Typing speed multiplier — see table below. |
title | string | The note's title, typed first, bold ~28px. |
bodyLines | string[] | Body lines, typed in order with a return-key beat between each. "" is a deliberate blank line. |
dateText | string | The gray date string under the nav bar (static, not auto-generated, so recordings stay reproducible). |
endHold | number (ms) | How long to hold on the finished note before the outro starts. |
outro | {text, sub} | null | Optional fading caption at the end. null skips it. |
loop | boolean | Restart from 0 after finishing (for live preview only — leave false when recording). |
showDynamicIsland | boolean | Show the black pill at the top of the stage. |
theme | 'light' | 'dark' | 'light' is the fidelity-priority mode; 'dark' is a best-effort bonus. |
Estimating duration
Roughly: total_chars × 0.15s ÷ paceMultiplier + ~5.5s intro/outro overhead + punctuation/newline pauses. The template also exposes the exact number at runtime as window.__duration (milliseconds) — the source of truth.
paceMultiplier guide
| Value | Feel |
|---|---|
0.75 | Relaxed, deliberate — good for longer, thoughtful copy |
1 | Realistic human typing speed (default) |
1.5 | Snappy — most product-launch teasers |
2.5 | Fast-cut — social-first, sub-15s |
Ad copywriting tips
- Hook first line. The title is the first thing on screen — make it a scroll-stopper, not a label.
- Short lines beat long paragraphs. Notes reads like a text message, not a brochure — one idea per line.
- Aim for 15–30 seconds. Long enough to land the pitch, short enough to hold attention on a feed.
How the deterministic engine works
Everything the ad will ever show — every keystroke, pause, keyboard slide, and caption fade — is compiled up front from CONFIG into a flat, time-sorted array of events using a seeded PRNG (mulberry32) for all randomness. Playback is then just render(t): a pure function that reconstructs the exact visual state for any millisecond by replaying events up to t. There are no wall-clock CSS transitions to fall out of sync — this is what lets the page seek instantly to any frame (window.__seek(ms)) and lets the recorder capture a flawless MP4 by stepping through time rather than watching the animation happen in real time.
Disclaimer
This is a fan-made recreation of the Apple Notes UI for making ad mockups. It is not affiliated with, endorsed by, or sponsored by Apple Inc. "Apple" and "Notes" are trademarks of Apple Inc.
License
MIT — see LICENSE.