Scene.js
Archived

Scene.js

A vanilla JavaScript (ES6) library for blocking and staging scenes efficiently.

This is a JavaScript library that simplifies creating and displaying dynamic or static scenes, often used in theater and film.

It allows one to define scenes complete with props, characters, cameras, and lights—each with adjustable positions, parameters, and animations—providing a way to manage complex stage layouts.

The library separates configuration, rendering, and interaction layers:

  • Scene Class: Manages the overall scene structure.
  • Context Classes: Handle styling and scene elements.
  • Config Generators: Define scenes using code or JSON configurations.

Built with TypeScript, Webpack, DOM manipulation, and SVG rendering, it has no external dependencies, supports multiple scenes on a single page, and simplifies mounting, unmounting, and re-rendering. It also supports features like customizable themes, interactive prop dialogs, and animation controls.

The implementation involves React-like state management, render lifecycle, and action dispatching.

Documentation is organized with Docusaurus into multiple sections.

Tags:

TypeScript,

ES6,

Animation,

Webpack,

Docusaurus,

GitHub Actions

Previous
Low level FS implementation
Next
Trading System