Motion Graphics Components — Skill Guide

Use these Remotion components for data-driven scenes that would look better as clean motion graphics than as LTX-2.3 video clips. They render pixel-perfect 1920x1080 frames with smooth spring animations.

When to Use Motion Graphics vs LTX-2 Video

RULE: Use 1-2 motion graphic scenes per video MAX. Don't overuse them — they work best as contrast against video/image scenes.

BEST PLACEMENT:

• Hook scene (scene 0-1): DataMetric or NewsHeadline for a shocking stat or trending topic
• Product reveal (scene 2-3): ProductShowcase or StatGrid
• CTA scene (final scene): ProductShowcase with URL

Available Components

Import

import {
  PriceTicker,
  DataMetric,
  NewsHeadline,
  ProductShowcase,
  StatGrid,
  AnimatedComparison,
} from "../components/motion-graphics";

1.

PriceTicker

Crypto price display with counter roll, arrow bounce, and percentage change.

<PriceTicker
  symbol="BTC"
  price="$118,520"
  change="+4.2%"
  isPositive={true}
  accentColor="#F59E0B"
  durationInFrames={240}
/>

Props:

symbol

price

change

isPositive

accentColor

durationInFrames

2.

DataMetric

Big stat reveal — number counts up with easing, label slides in below.

<DataMetric
  value="$140B"
  label="Lost to crypto hacks since 2017"
  sublabel="Source: Chainalysis 2026 Report"
  accentColor="#EF4444"
  durationInFrames={240}
/>

Props:

value

label

sublabel

accentColor

durationInFrames

3.

NewsHeadline

Trending topic intro with typewriter headline and tag badge.

<NewsHeadline
  tag="TRENDING"
  headline="Bitcoin breaks $120k as institutional FOMO hits new highs"
  source="CoinDesk, March 2026"
  accentColor="#EF4444"
  durationInFrames={240}
/>

Props:

tag

headline

source

accentColor

durationInFrames

4.

ProductShowcase

Product feature highlight — name springs in, features pop one-by-one, URL glows.

<ProductShowcase
  name="PawPad"
  tagline="The seedless crypto wallet"
  features={["TEE-secured keys", "AI trading agent", "Multi-chain DeFi", "No seed phrase"]}
  url="paw.zkagi.ai"
  accentColor="#06B6D4"
  durationInFrames={300}
/>

Props:

name

tagline

features

url

accentColor

durationInFrames

5.

StatGrid

Multi-metric comparison — cards appear staggered with spring, values count up.

<StatGrid
  title="The Zero-Employee Advantage"
  stats={[
    { value: "15", label: "Traditional employees" },
    { value: "0", label: "ZkAGI employees" },
    { value: "$80k", label: "Monthly burn (old)" },
    { value: "$49", label: "Monthly API cost" },
  ]}
  accentColor="#8B5CF6"
  durationInFrames={300}
/>

Props:

title

stats

{ value: string; label: string }[]

accentColor

durationInFrames

6.

AnimatedComparison

Side-by-side comparison — center divider draws, items slide in from each side.

<AnimatedComparison
  left={{
    title: "Traditional",
    items: ["15 employees", "$80k/month", "3 months to launch", "Data breaches"],
    color: "#EF4444",
  }}
  right={{
    title: "ZkAGI",
    items: ["0 employees", "$49/month", "3 days to launch", "ZK-proven privacy"],
    color: "#10B981",
  }}
  accentColor="#7C3AED"
  durationInFrames={300}
/>

Props:

left

{ title: string; items: string[]; color?: string }

right

{ title: string; items: string[]; color?: string }

accentColor

durationInFrames

Integration Pattern

A motion graphic scene replaces the video clip + Ken Burns images for that scene. The audio and subtitle overlays still work the same way.

{/* Motion graphic scene — no video clip or images needed */}
<Sequence from={START[1]} durationInFrames={S1}>
  {/* Motion graphic fills the entire scene */}
  <DataMetric
    value="$847"
    label="Monthly API subscription cost before Zynapse"
    accentColor="#EF4444"
    durationInFrames={S1}
  />
  {/* Standard overlays still apply */}
  <BottomGradient intensity={0.7} />
  <TopicBadge label="THE PROBLEM" color="#EF4444" durationInFrames={S1} />
  <WordPopSubtitles text={scenes[1].dialogue} accentColor="#EF4444" durationInFrames={S1}
    highlightWords={["API", "bills", "subscriptions"]} />
  <Audio src={staticFile("audio/scene-1.wav")} />
</Sequence>

Key points:

• Motion graphic scenes do NOT need

  scene-N-a.mp4

  video or

  scene-N-b.png

  images
• Skip image generation and video clip generation for these scenes
• The component provides its own full-screen background
• Subtitle, TopicBadge, BottomGradient, and Audio layers overlay as normal
• ScreenShake can optionally wrap the motion graphic for impact

Scene Type in Screenplay

When writing the screenplay, mark each scene with a visual type:

Scene 1: "THE PROBLEM"
Type: motion-graphic (DataMetric)
Dialogue: "Eight hundred forty-seven dollars. That's what one developer spent monthly on AI API subscriptions."
Visual: DataMetric showing "$847" with label "Monthly API cost"

vs.

Scene 2: "THE DISCOVERY"
Type: video
Dialogue: "Then he found Zynapse. One API. One bill. Zero drama."
Visual: Developer at laptop, discovering Zynapse dashboard, camera zooms into screen

This tells the pipeline to skip image/video generation for motion-graphic scenes.

ComfyUI Motion Graphics Pipeline (Advanced)

For higher-quality motion graphics, use

generate-motion-clips.py

How It Works

1. PIL Template Rendering — creates a 768x512 PNG with clean typography on a dark gradient background
2. LTX-2.3 Image-to-Video — feeds the template to ComfyUI at low strength (0.2-0.3) to add subtle motion (particle drift, glow pulses, gentle camera) while preserving the text/layout
3. Output — a 3.88s (97 frames at 25fps) video clip with professional ambient motion

Template Types

metric

comparison

product

headline

price

grid

Usage

python3 generate-motion-clips.py --type metric --value "\$847" --label "Monthly API cost" --output scene-1-a.mp4
python3 generate-motion-clips.py --type product --name "PawPad" --tagline "The seedless wallet" --features "TEE keys,AI agent,Multi-chain" --url "paw.zkagi.ai" --output scene-5-a.mp4

Key Details

• Motion prompt focuses on ambient effects: particles, glows, subtle camera push
• Negative prompt includes: "text change, letter change, number change, layout shift"
• The low i2v strength (0.25) preserves the template layout while adding life
• Font: Inter-Bold.ttf stored in

  assets/fonts/

• These clips can replace React motion-graphic components in the Remotion composition

Fallback

The React/Remotion motion-graphic components (PriceTicker, DataMetric, etc.) still work as a fallback. If ComfyUI is unavailable, use them directly in the composition instead.