Web-Based Animation Editor with Keyframe System & Transparent Video Export

We built a web-based animation editor using React and Pixi.js for hardware-accelerated rendering, a keyframe engine with 30+ easing functions, and an FFmpeg-powered backend for exporting WebM videos with full VP9 alpha channel support.

Architecture

• Frontend: React with TypeScript, Pixi.js for WebGL-accelerated canvas rendering
• State Management: Zustand for centralized scene state
• Animation Engine: Custom keyframe interpolation engine with easing library
• Backend: Express.js with WebSocket support for real-time frame streaming
• Video Encoding: FFmpeg (via fluent-ffmpeg) for VP9 WebM encoding with alpha channel
• Monorepo: pnpm workspace with shared TypeScript types across frontend and backend

Animation Engine

Keyframe System

The core animation engine supports keyframe-based animation across multiple properties:

• Position — X/Y coordinates for movement paths
• Rotation — Degree-based rotation animation
• Color — Hex color interpolation with smooth transitions
• Alpha — Opacity animation for fade effects
• Size — Width, height, and radius scaling

Each keyframe stores the time (in milliseconds), a subset of animated properties, and a selected easing function. The engine interpolates between surrounding keyframes at any point in time, applying the appropriate easing curve.

Easing Library (30+ Functions)

A comprehensive easing library covering all standard animation curves:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (spring-like overshoot), Back (anticipation), Bounce
• Each available in ease-in, ease-out, and ease-in-out variants

Interpolation

For any given timestamp, the engine:

1. Finds the surrounding keyframes (before and after)
2. Calculates normalized progress between them (0 to 1)
3. Applies the selected easing function to the progress value
4. Interpolates property values (linear for numbers, color lerp for hex values)
5. Returns the complete set of animated properties for rendering

Canvas & Rendering

Object Types

• Rectangles — Configurable width, height, color, alpha, rotation
• Circles — Configurable radius, color, alpha, rotation
• Text — Configurable font family, font size, content, color, alpha

Hardware-Accelerated Rendering

• Pixi.js WebGL rendering for smooth 60fps preview playback
• Configurable canvas resolution (default 1920x1080 at 30fps)
• Transparent background support with adjustable background alpha
• Interactive object selection with visual highlighting
• Real-time animation playback with play, pause, and timeline scrubbing

Editor Interface

Toolbar

Object creation buttons for adding rectangles, circles, and text to the scene with default properties that can be customized immediately.

Properties Panel

Selected object properties editable in real-time: position, size, color, alpha, rotation, and type-specific properties (text content, font settings).

Timeline

Visual timeline showing:

• Keyframe markers at their time positions per object
• Playhead for current time with scrubbing
• Per-keyframe easing function selection
• Add/remove keyframe controls at the current playhead position

Video Export Pipeline

Frame Capture

1. Animation duration and FPS determine total frame count
2. Each frame is rendered individually at full resolution
3. Canvas content captured as PNG blob per frame
4. Frames collected for upload to the encoding backend

Encoding Backend

The Express.js backend handles video encoding through a job-based system:

1. Job Creation — Client requests a new export job (UUID-based)
2. Frame Upload — Frames uploaded in batches (or streamed via WebSocket)
3. FFmpeg Encoding — Frames assembled into WebM video with VP9 codec
4. Alpha Channel — Uses yuva420p pixel format for full transparency support
5. Progress Tracking — Real-time progress updates during encoding
6. Download — Completed video available for download with transparency verification

WebSocket Alternative

For real-time export, frames can be streamed directly via WebSocket instead of HTTP batch upload, with live progress updates throughout capture, upload, and encoding phases.

Key Features

1. Keyframe Animation — Timeline-based animation with per-property keyframes
2. 30+ Easing Functions — Complete easing library for professional animation curves
3. Transparent Video Export — VP9 WebM with full alpha channel support
4. Hardware-Accelerated Canvas — Pixi.js WebGL rendering for smooth real-time preview
5. Multiple Object Types — Rectangles, circles, and text with independent animation
6. Real-Time Preview — Play, pause, and scrub through animations instantly
7. Batch & Streaming Export — HTTP batch upload or WebSocket real-time frame streaming
8. Configurable Output — Resolution, FPS, and bitrate settings for export
9. Type-Safe Monorepo — Shared TypeScript types across frontend and backend
10. Custom Backgrounds — Adjustable background color and alpha with image/video support