Vincentwei1021/mg-styles-15

Maintainer? Show your league in your README

Card: your league's emblem, from Copper to Legendary

[![bestofgithub](https://bestofgithub.dev/badge/Vincentwei1021/mg-styles-15.svg?style=card)](https://bestofgithub.dev/repo/Vincentwei1021/mg-styles-15)

Flat: fits beside your other badges

[![bestofgithub](https://bestofgithub.dev/badge/Vincentwei1021/mg-styles-15.svg)](https://bestofgithub.dev/repo/Vincentwei1021/mg-styles-15)

Loading README…

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

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

Vincentwei1021/mg-styles-15

15 Motion Design Styles

What it is

How a film is made

The 15 styles

Make a film from a prompt

Run the source

What is in the repository

Deploy your own copy

Good to know

License

About