git404hub

what is cinematic-choreography fr?

xiaoxiunique/cinematic-choreography — explained in plain English

Analysis updated 2026-05-18

13TypeScriptAudience · designerComplexity · 2/5Setup · easy

tl;dr

A browser-based tool for planning cinematic camera moves around placeholder subjects, with real-time preview and video export with music.

vibe map

mindmap
  root((repo))
    What it does
      Plans cinematic camera paths
      Uses placeholder subjects
    Tech stack
      Three.js
      React
      GSAP
    Modes
      Camera view
      Overview planning
    Use cases
      Music video previz
      Camera path export
    Output
      4K video export
      Synced background music

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Plan and preview a cinematic camera path around several placeholder subjects before filming

VIBE 2

Switch between a director's-eye camera view and a top-down overview to plan shots

VIBE 3

Export a finished camera move as a 4K or 1080p video with background music

VIBE 4

Prototype a music video or promo shoot's camera choreography before setting foot on set

what's the stack?

Three.jsReactTypeScriptGSAPCloudflare Pages

how it stacks up fr

xiaoxiunique/cinematic-choreographyabhi-arya1/riffandersondanieln/hexllama
Stars131313
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardeasy
Complexity2/54/52/5
Audiencedesignerdevelopervibe coder

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Runs entirely in the browser, leftover Google AI Studio dependencies are unused and no API key is needed.

in plain english

Cinematic Choreography is a visual tool built with Three.js and React that lets you design camera movements in the style used by directors like Spielberg or Michael Bay, but without needing an actual film crew or camera. Instead of real people, the tool uses simple capsule shapes as stand ins for the subjects being filmed, and you use those placeholders to plan out a full cinematic camera path around them. The tool offers two main ways of looking at your scene. Camera mode shows you what the final rendered shot will actually look like, with each subject's name tag stuck to its surface and always facing the camera. Overview mode instead shows the whole space from above, including a black line marking the path the camera is about to travel along and a small model representing the camera itself. The two modes can switch back and forth automatically after each full pass, and in overview mode the camera can automatically circle the scene on its own. The camera motion itself follows a three part timeline built with the GSAP animation library, moving in close for a starting pose, having the subject rise, sweeping around them in an arc, and then pulling back to reveal the whole group. You can also add background music, which stays synced to the timeline no matter where you drag the playback position. Once a full pass is set up the way you want, you can export it as a recorded video in either 4K or 1080p resolution, camera view included, with the music baked in. To run it locally you install dependencies with bun or npm and start the development server. Although the project started from a Google AI Studio template and still carries some leftover dependencies from that, the tool itself runs entirely in the browser and does not need any API key to work. Deployment is set up for Cloudflare Pages, and there is also a sample command for converting the exported video into a standard mp4 file afterward.

prompts (copy fr)

prompt 1
Run this project locally with bun install and bun run dev.
prompt 2
Explain how the three act camera timeline built with GSAP works in this project.
prompt 3
Show me how to deploy this to Cloudflare Pages using wrangler.
prompt 4
Help me convert my exported cinematic_2160p.webm file into an mp4 using ffmpeg.
prompt 5
Walk me through switching between camera mode and overview mode in this tool.

Frequently asked questions

what is cinematic-choreography fr?

A browser-based tool for planning cinematic camera moves around placeholder subjects, with real-time preview and video export with music.

What language is cinematic-choreography written in?

Mainly TypeScript. The stack also includes Three.js, React, TypeScript.

How hard is cinematic-choreography to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is cinematic-choreography for?

Mainly designer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.