Cuitty Video
SDK, DSL, renderer, and preview.
Remotion engine · programmatic rendersSDK, DSL, preview, and export pipelineemits → observe, code
$ cui video render onboarding.composition.ts --format mp4
rendering 42 frames (Playwright + FFmpeg, 1920x1080)
output: dist/onboarding.mp4 (3.2 MB, 14s @ 30fps)
observe: video.render.complete event emitted
Six surfaces. One pipeline.
Author videos in TypeScript, compose them in the DSL, render with Playwright + FFmpeg, preview in a web component player, batch from the CLI, and serve renders from an HTTP endpoint.
Render progress, encoding results, and queue depth stream to Observe as structured telemetry. Finished renders land in Store for sync and signed-URL delivery.
SDK
TypeScript composition API with tween() and
spring() for data-driven animations.
DSL
Declarative .cuitty video blocks. Define compositions
without leaving config files.
Renderer
Playwright captures pixel-perfect CSS/SVG frames. FFmpeg encodes to MP4, WebM, or GIF.
Player
Web Component with scrubbing, frame-by-frame inspection, and embedded in any page.
CLI
Terminal-first with batch rendering and hot-reload during development.
Server
HTTP render endpoint with a queue backend. Submit compositions, poll for results.
Auth, Store, and Observe integration
Video is both a standalone SDK and a connected surface in the Cuitty platform. Every render job, frame progress, and encoding result emits to Observe for end-to-end visibility.
Auth Signed render requests with HMAC verification.
Store Blob storage, local-first sync, signed URLs.
Observe Render jobs, progress, encoding results — full telemetry.
Portal Module CRUD, render queues, real-time status in the admin UI.
Write the scene. Scrub the result.
The demo is a real, inspectable composition timeline: play, pause, scrub, and select a clip to see its frame range and animated values. It uses the same authoring concepts as the TypeScript API.
import { composition, tween } from "@cuitty/video";
const onboarding = composition({
id: "onboarding", fps: 30, durationInFrames: 300,
});
onboarding.layer("title").clip({
startFrame: 0, endFrame: 150,
render: (ctx) => tween(ctx.frame, [0, 30], [0, 1]),
});From composition to a delivered render.
A composition remains a small piece of code until a render request makes it concrete. Each hand-off is explicit: author, capture, encode, and deliver—with operational events visible along the way.
- 01 CompositionTypeScript or DSL defines scenes, clips, and data.
- 02 Playwright captureA browser renders deterministic HTML, CSS, and SVG frames.
- 03 FFmpeg encodeFrames become MP4, WebM, or GIF artifacts.
- 04 Store + ObserveArtifacts deliver by signed URL while progress stays observable.