Vincentwei1021/mg-styles-15

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

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.

• No image or video generation. The picture is code: SVG, Canvas, WebGL and Three.js, with Blender for the 3D film. A few films use CC0 or public-domain photos.
• The sound is code too. Each film's audio.py synthesises its music and sound effects; the 15 soundtracks draw on 103 recorded instrument samples.
• Everything is published. The film, the style notes, the full prompt and the complete source, for all 15 styles.

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.

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

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

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.

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.

# 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

• Serve from the repository root: the paths inside the films (/assets/..., /node_modules/...) are relative to it.
• The 3D film's picture is a Blender-rendered frame sequence; the steps are in demos/04-3d-render/README.md.

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.

• The font files are not in the repository: their licences differ, and the Chinese fonts are large. assets/fonts/README.md lists which ones are needed and where they go. Without them the browser falls back to system fonts, and the lettering will differ from the films.
• The same prompt makes a different film every time. Each original film went through several rounds of iteration; a single run usually does not reach the same finish.
• The soundtrack scripts are deterministic: rerun in the same environment, they give the same result every time. Rerun with the versions in requirements.txt, 4 of them match the films' audio (within the least significant bit) and the other 11 differ in places, probably because of changes in the numerical libraries.
• When you make your own films, use only assets licensed for commercial use (CC0, OFL and the like). The prompts already ask for this.

• The code, prompts, docs and films made for this project are released under the MIT License.
• Third-party files keep their own licences. The instrument samples (VCSL), the HDRI, the paper texture, the photos and the HUD film's map data (Natural Earth) are CC0 or public domain. site/vendor/highlight.min.js is BSD-3-Clause (its licence). The glyph outlines in demos/04-3d-render/assets/mesh/ and demos/08-morph/glyphs.json come from fonts under the SIL Open Font License and stay under it.
• The font files are not in the repository and keep their own licences; assets/fonts/README.md lists them.

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.