Course Infographics

Course Infographics Generator

Generate publication-ready infographics and short motion graphics for course lessons and classroom content, on any platform that accepts images and GIFs.

IMPORTANT: Read references/design-tokens.md for the color system and the accent parameter. Read references/layout-modes.md for the Editorial layout and its variants. Read references/content-routing.md for content-to-variant mapping. Read references/motion-specs.md for animation timing.

Read the remotion-best-practices skill, if it is installed, before writing any Remotion code. If the host project defines a DESIGN-RULES.md at its root, read that too for project-scoped constraints that override the defaults here.

Prerequisites

1. A Remotion project to host the compositions. Set REMOTION_PROJECT to its path:

   export REMOTION_PROJECT=/path/to/your/remotion-project
   

   Run npm install inside it if dependencies are not yet installed.

2. Source content available (lesson markdown, module directory, or free text).

Configuration

The accent is a parameter, not a fixed value. Swap it for the course's own color and the whole system follows, since nothing else in the palette is chromatic.

Two Tiers

One idea per frame. Split heavy lessons across multiple graphics rather than cramming everything into one.

Workflow

1. Analyze Content

Read the input content. Determine:

• What is the key concept or takeaway?
• Is this a still (reference/showcase) or motion (concept visualization)?
• Which right-column variant fits? (See references/content-routing.md)

2. Select Right-Column Variant

All compositions use the Editorial wrapper. The left column is always: label, serif headline, accent line, body text. The right column varies:

Still variants:

Motion variants:

3. Build Props

Construct the props object for the selected composition. Each composition has its own props type in its file.

4. Write Composition (if custom)

If none of the existing templates fit, create a new composition in src/infographics/compositions/ following existing patterns. Use the shared tokens, fonts, layout components, and animation primitives.

5. Render

cd "$REMOTION_PROJECT"

# Still image
npx remotion still src/infographics/Root.tsx <CompositionId> \
  --output=out/<name>.png \
  --props='<json>'

# Motion graphic (GIF)
npx remotion render src/infographics/Root.tsx <CompositionId> \
  --output=out/<name>.gif \
  --props='<json>' \
  --image-format=png

Pass props as JSON via the --props flag, including the accent color when it differs from the default.

6. Verify

Check rendered output against the rules in references/design-tokens.md (and the project's DESIGN-RULES.md if one exists):

• Content fills 80%+ width, 70%+ height
• Nothing below 24px font size
• Accent on ONE meaningful element only, never on individual letters
• No content overflow or cut-off at the bottom
• Two-column editorial layout maintained
• For motion: smooth looping, no jarring cuts

Flags