render-imessage-cascade

Name: render-imessage-cascade
Author: gooseworks-ai

1.0kstars193forks

How to install render-imessage-cascade?

gooseworks-ai/goose-skills/render-imessage-cascade

$npx -y skills add gooseworks-ai/goose-skills --skill render-imessage-cascade

Installs into the current project.

Summary

Assemble an iMessage notification-cascade video ad (≈14s, 9:16) from a phone-on-desk plate + 3–5 messages — authentic Apple Messages banners composited in PIL (SF Pro text, green Messages icon, warm translucent-greige fill, soft shadow) spring in one-by-one at the BOTTOM and push

Files · 1

View on GitHub

SKILL.md

1	# render-imessage-cascade
2
3	The free, deterministic renderer for the imessage-notification-cascade video ad
4	format — the viral iOS trend where a phone sits on a desk and Apple Messages
5	notifications STACK IN one after another. The signature mechanic is the **bottom-up
6	push**: each new banner springs in at the bottom (nearest the phone) and shoves every
7	existing one UP a row; the iOS grouped "⌄ Show less / ✕" pill rides above the stack;
8	the ✕ clears the stack; then a serif end card resolves.
9
10	This is a DETERMINISTIC composite — no generative video of the UI. Authentic
11	iMessage banners are drawn in PIL and animated in FFmpeg over a Ken-Burns plate, so
12	the notification text + wordmark stay pixel-crisp (a video model would smear type).
13	The template recipe supplies the per-brand `plate`, `notifications`, and `end_card`
14	config and gates the only paid steps — cleaning the plate (→ `create-image-fal`) and
15	the music bed/pop (→ `create-music-elevenlabs`) — to their own capabilities. This
16	capability itself makes no paid calls.
17
18	## Scripts (free)
19
20	- `scripts/build_assets.py` — draws the assets from `config`: `nb-1..N.png` (authentic
21	banners — green Messages icon, warm translucent-greige fill, soft box-shadow,
22	title/body/NOW/handle), `pill.png` (right-aligned "⌄ Show less / ✕"), `endcard.png`
23	(serif CTA + wordmark lockup + url). **Fonts are load-bearing: SF Pro (`SFNS.ttf`)
24	via `set_variation_by_name` for the banner title/body/NOW/handle** (Arial fallback),
25	Times/serif for the end-card CTA. Do NOT swap in Helvetica/Arial as the primary —
26	the banners must read as the real iOS system font.
27	- `scripts/compose.py` — Ken-Burns push-in on the plate → each banner springs in at the
28	BOTTOM while later arrivals push the stack UP (FFmpeg overlay `y` expressions) → pill
29	rides above → ✕-clear swipes the stack up + fades → serif end card fades in → optional
30	audio (bed + pop per arrival + a free FFmpeg swoosh on the clear) → encode h264 + aac.
31	- `scripts/config.example.json` — the shape of the brand `config` the recipe binds.
32
33	## Geometry contract (load-bearing — build_assets.py and compose.py MUST share it)
34
35	`W=1080 H=1920`, `SIDE=135` → banner width `BODY_W=810`, `BANNER_H=176`, `PAD=60`,
36	row pitch `H=214`, bottom anchor `YB=1200`. Icon ~100px at a ~24px left inset; body
37	text starts ~150px from the banner's left edge. Change one, change both.
38
39	## Craft rules (faithful to the source molecule)
40
41	- Keep the REAL iMessage UI: green Apple Messages icon, warm TRANSLUCENT greige banner
42	(NOT white, no white bloom), soft dark box-shadow. Do NOT rebrand the banner to the
43	brand's colors — the brand lives ONLY on the handle (bottom-right) + the end card.
44	- SF Pro for all banner text (title Semibold ~38, body Regular ~36, NOW/handle ~25).
45	Never AI-render text.
46	- 3–5 notifications (more crowds the top / clips the pill); newest enters at the BOTTOM,
47	so banner 1 is the oldest and ends up on TOP.
48	- ✕-clear then end card (a real hand-swipe needs a paid i2v — out of scope here).
49
50	## Requires
51
52	`watch` (QC the final master). The recipe gates `create-image-fal` (plate clean) and
53	`create-music-elevenlabs` (bed/pop) — both paid, proxy-routed, billed to the Ads agent.

People who liked this also viewed

6 picks

Type

render-imessage-cascade

1.0kstars193forks

View on GitHub

How to install render-imessage-cascade?

gooseworks-ai/goose-skills/render-imessage-cascade

$npx -y skills add gooseworks-ai/goose-skills --skill render-imessage-cascade

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# render-imessage-cascade
2
3	The free, deterministic renderer for the imessage-notification-cascade video ad
4	format — the viral iOS trend where a phone sits on a desk and Apple Messages
5	notifications STACK IN one after another. The signature mechanic is the **bottom-up
6	push**: each new banner springs in at the bottom (nearest the phone) and shoves every
7	existing one UP a row; the iOS grouped "⌄ Show less / ✕" pill rides above the stack;
8	the ✕ clears the stack; then a serif end card resolves.
9
10	This is a DETERMINISTIC composite — no generative video of the UI. Authentic
11	iMessage banners are drawn in PIL and animated in FFmpeg over a Ken-Burns plate, so
12	the notification text + wordmark stay pixel-crisp (a video model would smear type).
13	The template recipe supplies the per-brand `plate`, `notifications`, and `end_card`
14	config and gates the only paid steps — cleaning the plate (→ `create-image-fal`) and
15	the music bed/pop (→ `create-music-elevenlabs`) — to their own capabilities. This
16	capability itself makes no paid calls.
17
18	## Scripts (free)
19
20	- `scripts/build_assets.py` — draws the assets from `config`: `nb-1..N.png` (authentic
21	banners — green Messages icon, warm translucent-greige fill, soft box-shadow,
22	title/body/NOW/handle), `pill.png` (right-aligned "⌄ Show less / ✕"), `endcard.png`
23	(serif CTA + wordmark lockup + url). **Fonts are load-bearing: SF Pro (`SFNS.ttf`)
24	via `set_variation_by_name` for the banner title/body/NOW/handle** (Arial fallback),
25	Times/serif for the end-card CTA. Do NOT swap in Helvetica/Arial as the primary —
26	the banners must read as the real iOS system font.
27	- `scripts/compose.py` — Ken-Burns push-in on the plate → each banner springs in at the
28	BOTTOM while later arrivals push the stack UP (FFmpeg overlay `y` expressions) → pill
29	rides above → ✕-clear swipes the stack up + fades → serif end card fades in → optional
30	audio (bed + pop per arrival + a free FFmpeg swoosh on the clear) → encode h264 + aac.
31	- `scripts/config.example.json` — the shape of the brand `config` the recipe binds.
32
33	## Geometry contract (load-bearing — build_assets.py and compose.py MUST share it)
34
35	`W=1080 H=1920`, `SIDE=135` → banner width `BODY_W=810`, `BANNER_H=176`, `PAD=60`,
36	row pitch `H=214`, bottom anchor `YB=1200`. Icon ~100px at a ~24px left inset; body
37	text starts ~150px from the banner's left edge. Change one, change both.
38
39	## Craft rules (faithful to the source molecule)
40
41	- Keep the REAL iMessage UI: green Apple Messages icon, warm TRANSLUCENT greige banner
42	(NOT white, no white bloom), soft dark box-shadow. Do NOT rebrand the banner to the
43	brand's colors — the brand lives ONLY on the handle (bottom-right) + the end card.
44	- SF Pro for all banner text (title Semibold ~38, body Regular ~36, NOW/handle ~25).
45	Never AI-render text.
46	- 3–5 notifications (more crowds the top / clips the pill); newest enters at the BOTTOM,
47	so banner 1 is the oldest and ends up on TOP.
48	- ✕-clear then end card (a real hand-swipe needs a paid i2v — out of scope here).
49
50	## Requires
51
52	`watch` (QC the final master). The recipe gates `create-image-fal` (plate clean) and
53	`create-music-elevenlabs` (bed/pop) — both paid, proxy-routed, billed to the Ads agent.

People who liked this also viewed

6 picks

Type