charlie947/motion-graphics-skills

newsletter-promo

Turn a newsletter edition into a 12-20 second promo clip for LinkedIn, Instagram or X that drives people to read and subscribe.

查看源码
仓库原始内容

按源仓库内容呈现,保留标题、案例、代码、表格、链接以及原文引用的演示图片。

Newsletter promo, built in code

A promo does one job: make someone want the full edition. Show the best bits, never the whole thing.

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.

Step 1: Ask for four things, then wait

  1. The edition link or the full text. Read it before anything else.
  2. The hook. The one question or promise the edition answers. If none is given, propose three from the edition's own lines and wait for a pick.
  3. Three proof frames. Real images, charts or clips from the edition. Attached files only.
  4. The ending card, word for word: newsletter name, where to read it, and an optional subscriber count with its source.

Step 2: Structure (15 seconds)

TimeFrame
0-3sThe hook, big. A question works better than a statement.
3-11sThree proof frames, about 2.5s each, each with a 3-5 word label.
11-15sNewsletter name, "Read it free at [URL]", held still.

Step 3: Build brief (paste into Claude Code)

Build one self-contained HTML file called index.html: a 15-second promo at [WIDTH] x [HEIGHT] for my newsletter edition, using only the files I attached.

Hook (0-3s): "[HOOK]" in bold condensed type, [TEXT] on [BG], key words in [ACCENT].
Proof (3-11s): my three attached images in this order, each held about 2.5 seconds with a slow push-in and this label: [LABEL 1], [LABEL 2], [LABEL 3].
End card (11-15s): "[NEWSLETTER NAME]" and "Read it free at [URL]". Hold still, readable on a phone.

Banned: typewriter text, glow, bouncing, gradients on text, any claim or number not in my brief.

Build rules: every frame from the time alone, window.seek(seconds), wait for seek when the URL has ?render. Capture one frame per shot and check every label is readable at phone size.

Step 4: Export and post

Export 1080 x 1350 for LinkedIn and 1080 x 1920 for Stories and Reels. Put the edition link in the first line of the caption, not only the comments.

来自同一仓库

更多 Skills

全部 Skills
charlie947
社区

motion-prompt-writer

Write a complete 8-part Claude Motion prompt (The bar, Format, The one rule, Look, Motion, Never, Before you finish, The scene) for one short looping motion graphic, in your own brand. Takes your brand (a website screenshot, a logo, hex codes, or nothing for the Apple-style default) and one moment you want to show, in plain words. Use when someone says "write me a Motion prompt", "turn this idea into a motion graphic", "fill in the 8 parts" or "make my motion brief". Outputs parts 1 to 7 as a re

安装量
1
GitHub Stars
194
最近更新
10月11日
charlie947
社区

apple-launch-film

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.

安装量
3
GitHub Stars
70
最近更新
9月30日
charlie947
社区

animated-chart

Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that counts up, a before and after. Every value stays exactly as given. Use when someone says "animate my chart", "animated graph", "make my results move", "stat animation" or wants a data graphic that loops.

安装量
2
GitHub Stars
70
最近更新
9月30日
charlie947
社区

brand-intake

The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), plus a rule in CLAUDE.md so Claude reads them before it animates anything. Use at the start of any motion project, or when someone says "set up my brand", "brand intake", "build my motion design system", "make it look like my brand", "onboard me", "writ

安装量
2
GitHub Stars
70
最近更新
9月30日