xsukax Text to Video Maker

# xsukax Text to Video Maker

## Project Overview

**xsukax Text to Video Maker** is a browser-based application that empowers you to create simple videos from a declarative text script. It provides a sophisticated code editor (powered by Monaco) where you define video properties (like resolution and duration) and describe frame-by-frame animations using a simple syntax.

The application parses your script, renders the frames to an HTML canvas in real-time, and encodes the animation into a downloadable `.webm` video file. This entire process, from scripting to encoding, runs completely within your web browser, ensuring maximum privacy and zero server-side dependencies.

**Github Repo:** [https://github.com/xsukax/xsukax-Text-to-Video-Maker](https://github.com/xsukax/xsukax-Text-to-Video-Maker)

**Demo:** [https://xsukax.github.io/xsukax-Text-to-Video-Maker](https://xsukax.github.io/xsukax-Text-to-Video-Maker)

[](https://www.gnu.org/licenses/gpl-3.0)
[](https://github.com/xsukax/xsukax-Text-to-Video-Maker/commits/main)
[](https://github.com/xsukax/xsukax-Text-to-Video-Maker)
[](https://github.com/xsukax/xsukax-Text-to-Video-Maker/issues)

## Security and Privacy Benefits

This application is architected to be **100% client-side**, offering an unparalleled level of security and privacy for your projects.

* **Zero Server-Side Processing:** Your video scripts, text content, and generated video files are **never** uploaded to, processed by, or stored on any external server.
* **No Data Transmission:** All parsing, rendering, and encoding operations are performed locally by your browser’s JavaScript engine. Your data never leaves your computer.
* **Complete Privacy:** Since your data remains local, you maintain full control and confidentiality over your creations. There is no risk of data logging, user tracking, or unauthorized access from third parties.
* **Offline Functionality:** Once the `index.html` file is loaded (or saved locally), the application can run entirely offline, making it a secure and reliable tool regardless of internet connectivity.

## Features and Advantages

* **Declarative Video Creation:** Use a simple, YAML-like syntax to describe scenes, text, and shapes frame by frame.
* **Client-Side Encoding:** Leverages the browser’s `MediaRecorder` API to create high-quality `.webm` (VP9) video files without any server costs or dependencies.
* **Live Preview:** The canvas element provides an immediate visual representation of your video as it’s being generated.
* **Rich Code Editor:** Integrates the Monaco Editor (the engine behind VS Code) for a professional coding experience with syntax highlighting and line numbers.
* **Zero Installation:** Runs directly in any modern web browser. There are no libraries to install or complex build steps to run.
* **Customizable Output:** Easily define video `width`, `height`, `duration`, and `fps` directly in your script.
* **Basic Shape & Text Support:** Supports fundamental drawing primitives including `background`, `text`, `rectangle`, `circle`, and `line`.

## Installation Instructions

This application is a single HTML file and requires no complex installation.

### Method 1: Clone the Repository

1. Clone this repository to your local machine:
“`bash
git clone [https://github.com/xsukax/xsukax-Text-to-Video-Maker.git](https://github.com/xsukax/xsukax-Text-to-Video-Maker.git)
“`
2. Navigate to the project directory:
“`bash
cd xsukax-Text-to-Video-Maker
“`
3. Open the `index.html` file in your preferred web browser (e.g., Chrome, Firefox, Safari, Edge).

### Method 2: Direct Download

1. Go to the [repository homepage](https://github.com/xsukax/xsukax-Text-to-Video-Maker).
2. Click the green “Code” button and select “Download ZIP”.
3. Extract the ZIP file.
4. Open the `index.html` file in your browser.

## Usage Guide

### Scripting Syntax

The video is defined using a simple, line-by-line syntax.

#### 1\. Configuration (Global)

These properties define the overall video settings and should be placed at the top of your script.

“`yaml
# Total duration in seconds
duration: 3
# Frames per second
fps: 30
# Video width in pixels
width: 1280
# Video height in pixels
height: 720
“`

#### 2\. Frame Blocks

Define what happens during a specific frame range. Commands inside this block will be executed for every frame in that range.

“`yaml
# Applies from frame 0 up to and including frame 30
frame 0-30:
# …drawing commands go here
“`

#### 3\. Drawing Commands

These commands are indented under a `frame` block and describe what to draw on the canvas.

* `background: `

* Sets the background color for the frame.
* Example: `background: #1a1a2e`

* `text: text: “…”, x: …, y: …, size: …, color: …, align: …`

* Draws text on the screen. `align` can be `left`, `center`, or `right`.
* Example: `text: text: “Hello”, x: 640, y: 360, size: 72, color: white, align: center`

* `rectangle: x: …, y: …, width: …, height: …, color: …`

* Draws a filled rectangle.
* Example: `rectangle: x: 100, y: 100, width: 150, height: 150, color: red`

* `circle: x: …, y: …, radius: …, color: …`

* Draws a filled circle.
* Example: `circle: x: 640, y: 360, radius: 100, color: #16c79a`

* `line: x1: …, y1: …, x2: …, y2: …, width: …, color: …`

* Draws a line.
* Example: `line: x1: 0, y1: 0, x2: 1280, y2: 720, width: 5, color: white`

### Full Example Script

Here is the default script that loads with the application, demonstrating a simple animation.

“`yaml
# Video Configuration
duration: 3
fps: 30
width: 1280
height: 720

# Animation: Fade in title
frame 0-30:
background: #1a1a2e
text: text: “xsukax Text to Video”, x: 640, y: 300, size: 72, color: #ffffff, align: center

frame 30-60:
background: #1a1a2e
text: text: “xsukax Text to Video”, x: 640, y: 300, size: 72, color: #ffffff, align: center
text: text: “Create videos with code”, x: 640, y: 400, size: 36, color: #16c79a, align: center

# Animation: Shapes
frame 60-90:
background: #0f3460
circle: x: 250, y: 360, radius: 100, color: #e94560
circle: x: 1030, y: 360, radius: 100, color: #16c79a
text: text: “Simple & Powerful”, x: 640, y: 360, size: 48, color: #ffffff, align: center
“`

## License

This project is licensed under the GNU General Public License v3.0.