Skip to content
Huzaifa Qadeer
Back to all work

Motion Graphics API

80+ hand-built motion-graphics components, tested one by one and served behind an API.

Role
Solo — component library and API
Status
FinishedNot hosted
Called by
Context

Why it exists

Every video needed the same visual vocabulary — maps, animated typography, charts, parallax, diagrams, camera moves — and I kept rebuilding pieces of it inside whichever project needed it that week. The components are now built once and served behind an API that any pipeline can call.

Architecture

How it is put together

Components sit behind a props contract, the contract sits behind an HTTP surface, and both pipelines render through that surface. Nothing calls a component directly.
  1. 01

    Component families

    80+ Remotion components

    • Maps
    • Animated typography
    • Parallax
    • Diagrams
    • Charts
    • Camera movement
  2. 02

    Props contract

    How a scene is described

    • Every component takes structured props
    • A caller composes a scene without knowing how it draws
    • Assets requested from Source IT rather than passed as file paths
  3. 03

    API surface

    Served, not imported

    • Render requested over HTTP
    • One deployed version of the library at a time
    • Individually tested components behind it
  4. 04

    Consumers

    Both orchestration pipelines

    • MotionGen AI — scene render, then human review
    • Documentary Studio — scene render inside an unattended run
Decisions

Trade-offs

  • Serve the components over an API

    Instead of Publish them as a package each pipeline imports and pins

    Both pipelines render against one deployed version instead of drifting to different ones. The cost is that every render is a network call, and the API is a single point of failure for both products at once.

  • Hand-build and individually test each component

    Instead of Generate variants from a handful of parameterised templates

    Each family behaves the way that family needs to. The cost is that 80+ components are 80+ things to maintain, and adding a family is days of work instead of a config entry.

  • Components read structured props only

    Instead of Let a component read the script or scene context itself

    An orchestrator can compose a scene without knowing how anything draws. The cost is that the props contract has to be versioned: changing one component’s props breaks every caller of it.

Stack

Built with

  • Remotion
  • React
  • TypeScript
  • HTTP API
Links

Where to look next

The repository is private. Ask for a walkthrough.