I made every one of these styles myself. I wanted styles you'd actually use in your videos, not the bullsh*t ones you see all over the internet that you'd never touch.

By Shaan Johari. New styles drop on my Instagram first: @viashaan

animation-styles.gif

Every style from my reels as a one-page recipe: the look (colours with hex codes, free fonts, layout, texture), how it moves, what breaks it, and a ready prompt you paste into Claude (or Codex) with your own words or product. This page keeps growing: each new set of styles lands at the top.


How to use a card

  1. Pick the style that fits your video, not the one you like most. Each card says what it suits.
  2. Copy the card's "Paste this into Claude (or Codex)" prompt. Swap [YOUR WORDS] for your own line, product or brand name.
  3. Paste it into Claude Code (or Codex). If you have Remotion set up, it renders straight to video. If not, ask Claude (or Codex) to set it up first ("set up Remotion in this folder and ask me before installing anything").
  4. Give notes on the first version using the card's "How it moves" and "Never" sections. They're the words that get you the fix.
  5. Using a style a lot? Save it as a slash command. Make a file at .claude/commands/map-route.md in your project, paste the prompt in and put $ARGUMENTS where your words go. Then type /map-route plus your words in Claude Code. In Codex, put the same file at ~/.codex/prompts/map-route.md and type /prompts:map-route plus your words.

Part 4: 3D styles you'd actually use (new)

Nine more, mostly real 3D: products, money, receipts and stories that look studio-made.

Tap a style to open its card.

1. Products: Product turntable

2. Money: Money stack

3. Offers: Card flip

4. Costs: Receipt

5. Layers: Iceberg