mg-styles-15 README

The project's README from github.com/Vincentwei1021/mg-styles-15. As one markdown file: README.md.

15 Motion Design Styles

Fifteen styles, one 10-second film each, all made by Claude Opus 5.5 writing code.
15 种 MG 动态设计风格，每种一支 10 秒成片，全部由 Claude Opus 5.5 写代码做出来。

Every film comes with its style notes, its full prompt and its complete source.
每支片都附风格说明、完整提示词和全部源码。

15 Motion Design Styles: all fifteen films playing side by side

▶ Watch all 15 films with sound · 在线观看

English | 简体中文

films length made with license GitHub Pages

中文用户请看这里：完整中文说明 README.zh-CN.md
English readers: keep reading below.

What it is

Fifteen 10-second motion-design films, one style each, from frame-by-frame cel animation to a 9:16 variety-show edit. Claude Opus 5.5 made every film by writing code from a prompt: the picture, the animation, the music and the sound effects. This repository publishes all of it, so you can watch a style, read how it was made, copy its prompt and make a film of your own.

How a film is made

How a film is made: one prompt per style, then Claude writes the film as a web page that can draw any moment, headless Chrome renders every frame, audio.py synthesises the music and effects on the same cues, ffmpeg muxes an exact 10-second MP4, and a second AI reviews it with rubric.md for two rounds of revision

Every film is a web page that draws the frame for any time you give it (window.renderAt(t)). The renderer captures each frame in headless Chrome, then ffmpeg joins the frames and the soundtrack. The 3D film is the one exception: Blender renders its picture, and a web page adds the type and grain. Each film went through two rounds of review and revision. Final scores from the AI jury run from 7.57 to 8.21 out of 10.

The 15 styles

Click a film to watch it with sound on the page.

Frame-by-Frame / Line Boil: HAND MADE
01 · Frame-by-Frame / Line Boil
HAND MADE
Prompt · Source		 Isometric 2.5D: ISOPOLIS — Let the City Grow
02 · Isometric 2.5D
ISOPOLIS — Let the City Grow
Prompt · Source		 Flat Vector: popwise — One Dot
03 · Flat Vector
popwise — One Dot
Prompt · Source
Line Art: ATELIER LINEA — One Line
04 · Line Art
ATELIER LINEA — One Line
Prompt · Source		 3D Render: soft. — Soft Landing · C4D / Blender look
05 · 3D Render
soft. — Soft Landing · C4D / Blender look
Prompt · Source		 Shape Morph: morphe. — One Shape, Every Story
06 · Shape Morph
morphe. — One Shape, Every Story
Prompt · Source
Sticker Explainer: How Many Elements Hide in a Phone?
07 · Sticker Explainer
How Many Elements Hide in a Phone?
Prompt · Source		 Cyberpunk HUD / FUI: KESTREL-9 · Target Acquired
08 · Cyberpunk HUD / FUI
KESTREL-9 · Target Acquired
Prompt · Source		 Collage / Cut-out: NOGGIN Quarterly
09 · Collage / Cut-out
NOGGIN Quarterly
Prompt · Source
Aurora & Glassmorphism: Aurora — Think in Light
10 · Aurora & Glassmorphism
Aurora — Think in Light
Prompt · Source		 Geometric Bauhaus: KONSTRUKTION · 20 Beats
11 · Geometric Bauhaus
KONSTRUKTION · 20 Beats
Prompt · Source		 80s Synthwave / VHS: NEON DRIVE — Midnight 1986
12 · 80s Synthwave / VHS
NEON DRIVE — Midnight 1986
Prompt · Source
Pixel Art: PIXEL QUEST
13 · Pixel Art
PIXEL QUEST
Prompt · Source		 Liquid Motion: drop. — It All Starts with a Drop
14 · Liquid Motion
drop. — It All Starts with a Drop
Prompt · Source		 Variety Captions: Miaowu Diary EP.07 · 9:16 vertical
15 · Variety Captions
Miaowu Diary EP.07 · 9:16 vertical
Prompt · Source

On the page, each style has its own section: the film, what the style is and how this film was made. Below it, one click opens the full prompt or a browser for every source file. The page switches between English and Chinese.

The showcase page: the Frame-by-Frame film next to its style notes, with the prompt open below

Make a film from a prompt

  1. Open an AI assistant that can write code and run commands (for example Claude Code) in an empty folder. The machine needs Node, Chrome and ffmpeg; the suggested route for the 3D style uses Blender.
  2. Open any file in prompts/ and send the whole prompt block.
  3. To make it your own: only Creative seed is a specific story. Replace its story, brand name, copy and colours with yours, or change Output to vertical 1080×1920 or another length. Keep Signature features: it is what makes the style recognisable at a glance.
  4. To push it further: once the film is done, have a second AI review it with rubric.md and paste the review back for another round. The original films went through make → review → revise twice.
  5. To write a new style: fill in the four sections of template.md (output spec, technical route, creative seed, signature features) and copy the shared parts as they are.

To save effort, you can also point the AI at this repository's harness/render.mjs for rendering and lib/audio for the soundtrack, instead of building both from scratch.

Run the source

Needs For How
Node.js 22.12 or later The renderer and the films' npm packages nodejs.org, then npm install
Google Chrome Capturing frames headlessly Found in its default macOS location; elsewhere set MG_CHROME=<path>
ffmpeg Joining picture and sound brew install ffmpeg or sudo apt install ffmpeg
Python 3.11 or later The soundtracks (audio.py) and the asset scripts pip install -r requirements.txt
Blender Only the 3D film demos/04-3d-render/README.md
The fonts Lettering that matches the films Not in the repository; assets/fonts/README.md lists them 
# from the repository root
npm install
pip install -r requirements.txt
python3 demos/01-flat-vector/audio.py          # soundtrack → demos/01-flat-vector/out/audio.wav
node harness/render.mjs demos/01-flat-vector   # render every frame → demos/01-flat-vector/out/video.mp4
python3 -m http.server 8000                    # preview: http://localhost:8000/harness/preview.html?demo=01-flat-vector

What is in the repository

Path Contents
index.html, site/ The showcase page: each style's film, description, prompt and a source browser, in English and Chinese
videos/ The 15 films and their cover frames. 8 use the original streams as they are; the other 7 were 37–100 Mb/s, too heavy to stream on the web, and were re-encoded to H.264 under 28 Mb/s
prompts/ One complete prompt per style, with instructions (the instructions are in Chinese; the prompts are in English, with Chinese style notes)
demos/<name>/ Each film's source: the picture code (index.html and JS), the soundtrack script audio.py, the timing sheet cues.json, and the scripts that generated the film's own assets
harness/render.mjs The renderer: captures every frame in headless Chrome, then muxes video and audio with ffmpeg
harness/preview.html Scrub through any film in the browser
lib/audio/ mgaudio, the toolkit that synthesises the music and sound effects, plus the 103 instrument samples the 15 soundtracks use
assets/ Textures and the HDRI the films share; a list of the fonts (the font files are not in the repository)
rubric.md, template.md A review prompt; a template for writing a prompt for a new style
docs/ The images in this README: the cover, the diagram, the film previews and the page screenshots

Deploy your own copy

  1. Fork this repository, or push all of its files (including .nojekyll) to the main branch of your own repository. The largest file is 38 MB, under GitHub's 100 MB per-file limit, so Git LFS is not needed.
  2. In the repository, open Settings → Pages → Build and deployment, choose Deploy from a branch, branch main, folder / (root). On a free account Pages works only for public repositories.
  3. A minute or two later, open https://<user>.github.io/<repo>/. The page detects the repository by itself, so "Open on GitHub" jumps to the right file; with a custom domain, put the repository URL in <meta name="repo"> in index.html.

The site is about 575 MB, 420 MB of it video. GitHub Pages allows 1 GB per site and a soft limit of 100 GB of traffic a month; videos download only when played.

Good to know

License

About

Made by Vincentwei1021 with Claude Opus 5.5. The page is at https://vincentwei1021.github.io/mg-styles-15/ and the repository at https://github.com/Vincentwei1021/mg-styles-15. If you build on these prompts or this code, a link back is appreciated.

mg-styles-15 (Vincentwei1021/mg-styles-15)

Searching Database…

960 ·GitHub
Mg-styles-15
Что это?Коллекция из 15 десятисекундных фильмов моушн-дизайна, каждый в своём собственном визуальном стиле; все созданы Claude Opus 5.5, писавшим код по одному текстовому промпту. В репозитории опубликован каждый фильм вместе с заметками о стиле, полным промптом и полным исходным кодом.
Это галерея для просмотра или то, что я могу реально использовать сам?И то и другое: index.html/site/ — двуязычная витринная страница, где можно посмотреть каждый фильм и прочитать заметки о стиле, а demos/, prompts/ и harness/ дают полный исходный код и рендерер, чтобы вы могли перегенерировать фильмы или писать новые.
Как сделать свой фильм в одном из этих стилей?Откройте AI-ассистента, умеющего писать код и выполнять команды (например, Claude Code), в пустой папке, откройте файл в prompts/ и отправьте весь блок промпта; ассистент напишет код (картинка, анимация, музыка, звук), который создаёт фильм.
Что нужно установить для рендеринга фильмов из исходников?Node.js 22.12+ и npm install для пакетов рендерера и фильмов, Google Chrome для headless-захвата кадров, ffmpeg для сведения картинки и звука, а также Python 3.11+ для скриптов саундтреков audio.py; Blender нужен только для одного стиля с 3D-рендером.
Если я запущу тот же промпт снова, получится тот же фильм?Нет. Тот же промпт каждый раз даёт другой фильм, и один прогон обычно не дотягивает до финала оригиналов, которые прошли два раунда AI-ревью и доработки.
Генерируются ли какие-то визуалы моделями AI-изображений или видео?Нет — каждая картинка это код: SVG, Canvas, WebGL и Three.js, плюс Blender для единственного 3D-фильма. Единственный задействованный AI — Claude Opus 5.5, который написал этот код по промптам.
Как создаются музыка и звуковые эффекты?У каждого фильма свой скрипт audio.py, который синтезирует свою музыку и звуковые эффекты из кода, опираясь на 103 записанных сэмпла инструментов, общих для всех 15 саундтреков.
Можно захостить витринный сайт самому?Да — сделайте форк репозитория, включите GitHub Pages (развёртывание из ветки main, корневая папка). Весь сайт весит около 575 МБ (в основном видео), что укладывается в лимит GitHub Pages в 1 ГБ на сайт, а видео скачиваются только при воспроизведении.
Насколько хороши фильмы по мнению самого проекта?Каждый фильм прошёл два раунда ревью и доработки AI-жюри; финальные оценки — от 7,57 до 8,21 из 10.
What are similar projects?awesome-opus5-5-videos, lemo-opuscar, pdoom-video, onetake, motion-video-kit, ClaudeAnimationBase, saas-motion-kit, genart-skill
Which topics is it in?showcase, blender, motion-graphics, audio-generation, creative-coding, threejs, canvas, webgl, music, svg, ffmpeg, video-generation
Creator
Vincentwei1021
Size
554.6 MB
Stars
960
Updated
CommitOct 05
Age
15d
Commits · 90 Days