Zaojing — Chinese Paper-Cut Video Editor

A frame-accurate creative workspace for turning layered art, narration, and subtitles into Chinese paper-cut stories.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Zaojing — Chinese Paper-Cut Video Editor

Inspiration

Creating a short historical animation usually means jumping between an asset folder, an image editor, a subtitle tool, an audio workstation, and a renderer. Generic video editors can do the job, but their mental model is not designed for layered paper-cut storytelling. I wanted one calm, purpose-built workspace where a creator can move from illustrated assets to a finished story without losing the handcrafted visual language.

What it does

Zaojing is a local browser-based video editor for Chinese paper-cut animation. It combines a searchable asset library, a frame-accurate Remotion canvas, direct manipulation, a property inspector, and a six-track timeline for backgrounds, characters, subtitles, narration, music, and sound effects. Projects autosave with schema validation and versioned backups, and the same project data drives deterministic MP4 export.

The included sample is a complete 30-second historical story at 1080×1440 and 30 FPS, so judges can launch the editor and immediately test a real project rather than an empty prototype.

How we built it

The application uses React, TypeScript, Zustand, Zundo, React Moveable, Remotion, Express, Multer, and Zod. A shared project schema connects the UI, preview player, persistence API, and renderer. Every edit changes the same typed timeline model; there is no separate preview-only representation.

Codex and GPT-5.6 were used as the primary engineering collaborator during Build Week. They helped translate the creative workflow into a typed data model, implement the editor and rendering API, diagnose Windows and Remotion issues, create deterministic quality checks, and refine the final interface. I directed the product scope, visual style, story, asset choices, and acceptance criteria.

Challenges

The hardest challenge was keeping canvas interaction, timeline edits, autosave, undo/redo, and rendering in sync without duplicating state. Another challenge was handling a media-heavy Chinese-path Windows project reliably. The final design uses one validated project document, immutable state updates, explicit frame math, and local versioned backups.

Accomplishments

  • A coherent editor experience rather than a technical prototype
  • Frame-accurate preview and deterministic export from one project model
  • Direct canvas manipulation and a six-track timeline
  • A real sample project with layered visuals, subtitles, and narration
  • Local-first persistence with validation, backups, and no cloud dependency

What we learned

Specialized creative tools can feel simpler than general-purpose editors when their data model reflects the creator's actual workflow. We also learned that AI-assisted engineering works best when human decisions are explicit: the strongest results came from clear visual constraints, small acceptance tests, and repeated checks against real media.

What's next

Next steps include scene templates, waveform visualization, automatic subtitle alignment, alternate canvas ratios, and optional Codex-powered editing commands that can propose timeline changes while keeping the underlying project fully inspectable.

Built With

Share this project:

Updates