rindig/animation-workflow

Purpose and Operating Model

This repository is a reusable Remotion video-production toolkit, not a standalone application. It combines AI-assistant guidance, video specifications, visual-system documentation, and a minimal React/Remotion starter so teams can turn a scene plan into frame-rendered animation. Its primary human/AI workflow is spec → build → render/refine.

Entry Points and Deliverables

The main reusable entry points are the assistant knowledge packages in skills/ and the project scaffold in starter/. A consumer copies starter/ into a new video project, installs Node/React/Remotion dependencies, and uses Remotion Studio or CLI rendering against the eventual project composition entrypoint. The checked-in sample composition begins at starter/src/compositions/Example/index.tsx.

Specification Layer

Video intent is represented as markdown rather than embedded in animation code. The blank starting contract is templates/spec-template.md; the starter includes a reference scene blueprint at starter/projects/example/spec.md. This separates creative direction, timings, and scene requirements from implementation, enabling an AI assistant or engineer to translate a stable spec into compositional React code.

AI Assistant Knowledge Layer

Three installable skill packages provide the system’s operational conventions:

• Remotion frame animation, sequencing, composition, and rendering: skills/remotion-best-practices/SKILL.md

• Scene-by-scene specification authoring: skills/spec-writing/SKILL.md

• Reusable visual component architecture: skills/component-registry/SKILL.md

These are plain Markdown context files intended for Claude Code, Cursor, or similar assistants; they are not runtime modules.

Starter Composition Architecture

The starter organizes each video/project as a composition namespace. The example composition owns its assembly point, scene implementations, and composition-local parameters:

• starter/src/compositions/Example/index.tsx

• starter/src/compositions/Example/scenes/TitleScene.tsx

• starter/src/compositions/Example/constants/timing.ts

• starter/src/compositions/Example/constants/colors.ts

The expected control flow is composition entry → ordered/timed scenes → frame-dependent visual output. Constants localize duration/timing and composition-specific palette decisions so scenes remain focused on rendering.

Shared Visual System and Governance

Cross-composition styling is centralized under starter/src/styles/, including starter/src/styles/colors.ts and starter/src/styles/typography.ts, with consolidated exports in starter/src/styles/index.ts. Design constraints and effect usage rules live outside code in starter/docs/style-guide.md and starter/docs/visual-philosophy.md. Project-level AI implementation instructions are supplied by starter/CLAUDE.md.

Runtime and External Boundaries

The runtime is Node.js 18+ with React, React DOM, Remotion, @remotion/cli, and @remotion/bundler installed by the consuming project. Remotion Studio previews compositions; the Remotion CLI renders frame-based React output into ProRes or H.264 media files. Final editorial work—voiceover sync, footage, cuts, and delivery—crosses into external video editors such as CapCut, DaVinci Resolve, or Premiere. No hosted backend, database, or web-service integration is represented in the repository.