15 Styles for Your Brand Animation mg-styles-15

Choose a style that can tell your brand story

Before choosing effects for a brand animation, compare flat graphics, hand-drawn lines, pixel art and collage. Which helps viewers remember what your product does? This repository contains 15 ten-second films made in code with Claude Opus 5.5. Each includes a complete prompt and source, so you can start with a visual style and develop your own content.

Watch the two samples above. The flat-vector film uses simple shapes and bold colours; the hand-drawn film keeps a slight wobble in its lines. Their clean and handmade qualities suggest different brand personalities. Compare all the styles on the author’s showcase, with sound on to hear how movement and audio work together.

For this exercise, use the flat style for a fictional task app called Daylight. Scattered tasks become an organised list, leaving one clear next step. The aim is to show what the product helps someone do, rather than only replacing a sample’s closing logo.

Find the prompt and prepare your content

This is a collection of examples and prompts, without an installable SKILL.md. Open an empty folder in an AI coding tool that can write code and run commands. Send it the complete prompt block from the flat-vector prompt. The author used Claude Opus 5.5; your result will still need revision.

Distinguish three sections: Creative seed supplies the story, Signature features defines the recognisable style, and Output sets duration and dimensions. Keep the style features while replacing the story, then decide the format. Reducing the prompt to “make it look premium” loses the useful constraints.

For this example, prepare the name Daylight, the line “Find your next step,” and a sequence in which scattered cards become a list. For your own product, supply accurate product information and the paths to your assets. Interface details, numbers and capabilities should come from your actual materials.

Ask for key frames first

After sending the full prompt, add the request below. These example requests were written for this tutorial, rather than supplied by the creator. We have not used them to generate a video.

Use the flat-vector prompt to make a 10-second brand animation for a fictional task app, Daylight.
Keep the Signature features and rewrite Creative seed:
Scattered task cards appear → they form a list → one task lights up → the brand name closes the film.
Copy: Find your next step.
1920×1080, 30fps. Use simple graphics and a simplified interface that is clearly a mock-up.
Show the shot plan and key frames from the beginning, middle and end before making the full film.

Check whether the frames communicate a change from confusion to clarity. Does the list visibly come from the earlier cards? By the time the brand appears, can viewers understand the benefit? If attractive frames do not connect, fix the sequence before adding more transitions or particles.

Make a first version and check movement with sound

Once the key frames work, ask the AI to write the animation, develop its sound and render a first version. In the author’s main workflow, a web page draws any requested moment, Chrome captures each frame, and FFmpeg combines picture and audio. The 3D example also needs Blender.

Make the first version from the approved key frames.
Keep the card movements easy to follow; avoid making every element compete at once.
Match sound effects to cards settling and the selected task lighting up.
Play the whole film to check reading time, transitions and the closing pause.
Deliver the MP4 and editable source.

Sound is part of these examples’ design. Play the film to check that each sound effect coincides with a card settling. The original films went through two review-and-revision rounds; the same prompt produces different results, and one run is not guaranteed to match a finished sample.

You can use rubric.md for a separate review and bring its concrete observations back to the production conversation. “Three cards move at once in the middle, making the order hard to follow” gives a clearer next step than “make it more polished.”

Make a focused revision

If the brand name disappears too quickly, request a local revision:

Change only the ending: leave more reading time after the full brand name appears.
Keep the approved colours, style and middle sequence. Keep the film at 10 seconds.
Shorten the opening wait to compensate, and move the closing audio cues rather than cutting off the soundtrack.
Show the revised ending before rebuilding the full film.

A timing change affects audio as well as picture. Changing from flat vector to hand-drawn animation is a larger decision: return to that style’s prompt and confirm its lines, shapes and movement, rather than simply adding paper texture.

Adapt it to your product

Fill in these placeholders and send them with the complete prompt for your chosen style:

Brand and product: [name and audience]
What viewers should remember: [one main benefit or feeling]
Visual change: [starting state → change the product brings → ending state]
Style to keep: [selected prompt and its key features]
Available materials: [logo, interface, copy, fonts and file paths]
Output: [duration, aspect ratio, captions and sound]
Must remain accurate: [names, capabilities, numbers and colours]
Confirm key frames before making the first version. Keep editable source and material credits.

For a subscription manager, scattered subscription cards could become a monthly overview. For a coffee brand, the sequence might follow grinding, brewing and serving. Define the change before choosing its visual treatment.

Prepare a local environment when you need the source

To run an existing example, prepare Node.js 22.12+, Python 3.11+, Google Chrome and FFmpeg, then run these commands in a terminal:

git clone https://github.com/Vincentwei1021/mg-styles-15.git
cd mg-styles-15
npm install
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python3 demos/01-flat-vector/audio.py
node harness/render.mjs demos/01-flat-vector

These commands were checked against the README and source; we did not install the dependencies or render an example for this tutorial. If Chrome is not at the renderer’s default macOS path, set MG_CHROME to the actual browser executable first. A common Linux path is /usr/bin/google-chrome, but check your installation before using it.

The audio goes to demos/01-flat-vector/out/audio.wav, and the film to video.mp4 in the same directory. The renderer calls window.renderAt(t) to draw a requested moment. For preview, run python3 -m http.server 8000 from the repository root and open the local preview so absolute resource paths such as /assets/ resolve correctly.

Font files are not bundled. Follow assets/fonts/README.md to supply them; system fallback can change the lettering and layout. Follow the separate Blender instructions for the 3D example. Project code, prompts and original films use MIT licensing; third-party fonts and materials retain their own licences.