Repolode
Submit
Vincentwei1021

Vincentwei1021/mg-styles-15

Fifteen 10-second motion-design films, each made by Claude writing code, with the prompt and full source published for each style.

View on GitHubWebsite
Stars
1,417
Forks
208
Open issues
2
Last commit
16 days ago

What is it?

This repository collects fifteen 10-second motion-design films, one per style, ranging from frame-by-frame cel animation and isometric 2.5D to pixel art, synthwave and a 9:16 variety-show caption edit. Each film was produced by Claude Opus 5.5 writing code from a single prompt, covering the visuals, animation, music and sound effects. Pictures are built with SVG, Canvas, WebGL, Three.js, and Blender for the 3D film, rather than generative image or video models.

For each style, the repository provides the film, style notes, the full prompt in the prompts/ folder, and the complete source, including the picture code, the audio.py soundtrack script and the timing file. A Node-based renderer captures every frame in headless Chrome and uses ffmpeg to combine frames with the audio into an MP4, and a preview page lets you scrub through any film in the browser.

The project is aimed at developers who want to reproduce a style with their own AI assistant. Prompts can be reused with a new story and brand, and the repository includes a review rubric and a template for writing prompts for new styles.

Key features

  • 01Fifteen films across distinct styles, each 10 seconds long.
  • 02Every style ships with its prompt, style notes and full source code.
  • 03Pictures are generated as code (SVG, Canvas, WebGL, Three.js, Blender), with no image or video generation.
  • 04Soundtracks are synthesised by audio.py scripts using recorded instrument samples.
  • 05Headless Chrome renderer plus ffmpeg produces frame-accurate MP4 output.
  • 06Browser preview page for scrubbing through each film.

Use cases

  • Learning how a specific motion design style is built in code.
  • Reusing a prompt as a starting point for your own animated short.
  • Studying a headless-Chrome plus ffmpeg rendering pipeline for deterministic video output.
  • Exploring how an AI assistant can write both visuals and audio code for a film.

Quick start

  1. 1

    Install the Node packages from the repository root (needs Node.js 22.12 or later)

    npm install
  2. 2

    Install the Python packages for the soundtracks and asset scripts (needs Python 3.11 or later)

    pip install -r requirements.txt
  3. 3

    Synthesise the soundtrack for one film

    python3 demos/01-flat-vector/audio.py
  4. 4

    Render every frame of that film to an MP4 (requires Google Chrome and ffmpeg)

    node harness/render.mjs demos/01-flat-vector

Things to know

  • Rendering needs Google Chrome and ffmpeg installed on the machine.
  • The 3D film also needs Blender, and its fonts are not included in the repository.
  • This is a showcase of 15 films and their source, not a reusable library.

Topics

#motion-design#animation#claude#prompt-engineering#ffmpeg#threejs#generative-art#video

FAQ

What is mg-styles-15?
Fifteen 10-second motion-design films, each made by Claude writing code, with the prompt and full source published for each style. This repository collects fifteen 10-second motion-design films, one per style, ranging from frame-by-frame cel animation and isometric 2.5D to pixel art, synthwave and a 9:16 variety-show caption edit. Each film was produced by Claude Opus 5.5 writing code from a single prompt, covering the visuals, animation, music and sound effects. Pictures are built with SVG, Canvas, WebGL, Three.js, and Blender for the 3D film, rather than generative image or video models.
Is mg-styles-15 free to use? What license does it have?
mg-styles-15 is open source under the MIT license. Check the license terms before using it in commercial products.
Is mg-styles-15 still maintained?
Actively maintained. The last commit to mg-styles-15 was on Oct 5, 2026.
What can I use mg-styles-15 for?
Learning how a specific motion design style is built in code. Reusing a prompt as a starting point for your own animated short. Studying a headless-Chrome plus ffmpeg rendering pipeline for deterministic video output. Exploring how an AI assistant can write both visuals and audio code for a film.
How do I install mg-styles-15?
Install the Node packages from the repository root (needs Node.js 22.12 or later): npm install Install the Python packages for the soundtracks and asset scripts (needs Python 3.11 or later): pip install -r requirements.txt Synthesise the soundtrack for one film: python3 demos/01-flat-vector/audio.py Render every frame of that film to an MP4 (requires Google Chrome and ffmpeg): node harness/render.mjs demos/01-flat-vector
Where can I get mg-styles-15?
The source code and installation instructions are on GitHub: https://github.com/Vincentwei1021/mg-styles-15

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects