Vincentwei1021 / mg-styles-15

# 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. 
每支片都附风格说明、完整提示词和全部源码。
**▶ Watch all 15 films with sound · 在线观看**
**English** | 简体中文
> **中文用户请看这里：完整中文说明 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.
- **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.
## How a film is made
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.
 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.
## Make a film from a prompt
1. Open an AI ass