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

Demo: https://xsukax.github.io/xsukax-Text-to-Video-Maker

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:

   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:

   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.
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.

# 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.

# 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.

# 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.