### Install Dependencies and Run Scriptimate Example

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Installs project dependencies using npm ci and then executes a specific Scriptimate example ('7_dashoffset.smte') to generate a GIF. This is a typical workflow for development and testing.

```bash
npm ci
cd examples
node ../bin/scriptimate.js -i 7_dashoffset.smte -f gif
```

--------------------------------

### Scriptimate CLI Usage Examples

Source: https://context7.com/devforth/scriptimate/llms.txt

Demonstrates various command-line interface commands for Scriptimate, including installation, basic usage, output format selection, custom filenames, resolution settings, performance tuning, debugging, intermediate format selection, and cache control.

```bash
# Install and run with npx
npx scriptimate@latest -i demo.smte -f gif

# Basic usage - compile to mp4 (default)
npx scriptimate -i animation.smte

# Compile to multiple formats
npx scriptimate -i animation.smte -f webm,mp4,gif

# Custom output filename and resolution settings
npx scriptimate -i animation.smte -fn output_video -f mp4

# Performance tuning - more threads and custom FPS
npx scriptimate -i animation.smte -t 8 -fps 30

# Debug mode - start from specific second for faster iteration
npx scriptimate -i animation.smte -fs 5 -d true

# Use JPEG intermediate format for faster processing
npx scriptimate -i animation.smte -if jpeg -ijq 0.9

# Disable cache for development
npx scriptimate -i animation.smte -nc 1
```

--------------------------------

### Complete Animation Example with Easing and Parallelism

Source: https://context7.com/devforth/scriptimate/llms.txt

A comprehensive example demonstrating constants, frame size setup, multiple element placement, parallel animations with different easing functions, pauses, and fading out elements.

```scriptimate
; Set up canvas with constants
const $frameWidth=600 $frameHeight=300
set_frame_size $frameWidth $frameHeight

; Place multiple SVG elements
place boomerang1 0 0
place boomerang2 0 $boomerang1__HEIGHT
place boomerang3 0 $boomerang1__HEIGHT*2
place boomerang4 0 $boomerang1__HEIGHT*3

; Animate all with different easing
animate_3000 move boomerang1 600-$boomerang1__WIDTH -
  && move easein boomerang2 600-$boomerang1__WIDTH -
  && move easeout boomerang3 600-$boomerang1__WIDTH -
  && move easeinout boomerang4 600-$boomerang1__WIDTH -

; Pause for 1 second
animate_1000 pause

; Fade out all elements
animate_500 opacity boomerang1 0
  && opacity boomerang2 0
  && opacity boomerang3 0
  && opacity boomerang4 0
```

--------------------------------

### Define and Run Example Groups

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Demonstrates the usage of `define_group` and `run_groups_together` to create and execute parallel animation scenarios involving moving and rotating SVG elements.

```scriptimate
define_group scenario1:
  animate_1000 move easein boomerang1 270 -
  animate_2000 move easeout boomerang1 $frameW-$boomerang1__WIDTH $frameH-$boomerang1__HEIGHT

define_group scenario2:
  animate_1000 move boomerang2 250 -
  animate_1000 pause
  animate_1000 move boomerang2 $frameW-$boomerang1__WIDTH 0

define_group rotator:
  animate_3000 rotate boomerang1 360*4 && rotate boomerang2 360*5

run_groups_together scenario1 scenario2 rotator
```

--------------------------------

### Install Scriptimate Dependencies (Ubuntu/WSL2)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

This command installs necessary system packages required for Scriptimate to function, including libraries for rendering and `ffmpeg` for video encoding. Ensure you are using a compatible Node.js version (16+).

```bash
sudo apt install libnss3-dev libatk-bridge2.0-0 libcups2 libgtk-3-0 libgbm-dev ffmpeg
```

--------------------------------

### Install Fonts for Scriptimate (Ubuntu)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

If your SVG animations use custom fonts, you need to install them on your system. This command installs the Roboto and Open Sans fonts, which are commonly used.

```bash
sudo apt install fonts-roboto fonts-open-sans
```

--------------------------------

### Create SVG Animation Script (Scriptimate)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

This example demonstrates how to create a script file (`.smte`) for Scriptimate to define SVG animations. It sets frame size, places an SVG part, and animates its position and rotation.

```scriptimate
set_frame_size 600 300
place boomerang 0 100
animate_1000 move boomerang 400 - && rotate boomerang 720 && scale boomerang 2
```

--------------------------------

### Schedule JavaScript Execution for Div Updates

Source: https://context7.com/devforth/scriptimate/llms.txt

Schedules JavaScript code to execute at specified intervals during animation using `schedule_eval`. It provides helper functions like `incr()`, `get()`, and `set()` for manipulating div content.

```scriptimate
; Create a counter that increments every 100ms
place_div seconds 100 100 50 30 1 "0"
schedule_eval timer 100 incr('seconds')

; Complex timer with minutes rollover
place_div time_mins 100 100 30 30 1 "0"
place_div time_secs 140 100 30 30 1 "0"
schedule_eval clock 10 incr('time_secs', 2); if (+get('time_secs') >= 60) { incr('time_mins'); set('time_secs', 0)}
```

--------------------------------

### Show Scriptimate Help and Options

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Displays all available command-line options and arguments for the scriptimate CLI. This is useful for understanding the full range of functionalities and their parameters.

```bash
scriptimate -h
```

--------------------------------

### Mounting /tmp on RAM for Build Performance

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Configures the system to mount the /tmp directory on RAM using tmpfs. This can significantly improve build performance for applications like Scriptimate that utilize /tmp for build cache.

```bash
tmpfs /tmp tmpfs nosuid,nodev,noatime 0 0
```

--------------------------------

### Scriptimate CLI Usage and Arguments

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Details the various optional arguments for the scriptimate CLI, such as output format, input file specification, thread count, debugging options, and cache control. This helps users customize their video generation process.

```bash
usage: scriptimate.js [-h] [-v] [-f FORMAT] [-i INPUT] [-fn FILENAME] [-t THREADS] [-fs FROMSECOND] [-d DEBUGHTML] [-bd BASEDIR]
                      [-fps FPS] [-if INTERMEDIATEFORMAT] [-ijq INTERMEDIATEJPEGQUALITY] [-nc NOCACHE] [-h, --help show this help message and exit]
[-v, --version show program's version number and exit]
[-f FORMAT, --format FORMAT output file format, or multiple via comma: "webm,mp4". Available formats: mov, mp4, gif, webm, default is mp4]
[-i INPUT, --input INPUT Input .smte script file]
[-fn FILENAME, --filename FILENAME output filename]
[-t THREADS, --threads THREADS Threads count used during compiling, defaults to 4]
[-fs FROMSECOND, --fromsecond FROMSECOND Start from defined second (could be used to debug animation faster, also you can use "exis" keyword in smte script)]
[-d DEBUGHTML, --debughtml DEBUGHTML Create HTML files near image to debug]
[-bd BASEDIR, --basedir BASEDIR Input directory (folder where src subfolder and .smte file is located)]
[-fps FPS, --fps FPS FPS]
[-if INTERMEDIATEFORMAT, --intermediateFormat INTERMEDIATEFORMAT Screenshots format used to compile video png|jpeg, defaults to png]
[-ijq INTERMEDIATEJPEGQUALITY, --intermediateJpegQuality INTERMEDIATEJPEGQUALITY JPEG quality 0.0 - 1.0, defaults to 1]
[-nc NOCACHE, --nocache NOCACHE Don't use screenshots cache (but still generate it), for scriptimate develeopmnt]
```

--------------------------------

### FFmpeg Command for Video Generation (WebM)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Illustrates the FFmpeg command for generating WebM video output using the VP9 codec. This provides an alternative format suitable for web playback.

```bash
ffmpeg -framerate 25/1 -i frames/%07d.jpg -c:v libvpx-vp9 -b:v 2M -r 25 out.webm -y
```

--------------------------------

### Place SVG Part in Animation (Scriptimate)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

The `place` command in Scriptimate is used to add an SVG file as a part of the animation. It specifies the SVG filename (without extension), its initial position (x, y coordinates), and optional parameters like opacity, scale, and boxhole.

```scriptimate
place cursor 400 120
```

--------------------------------

### Scriptimate: Animate Elements with animate_xxx

Source: https://context7.com/devforth/scriptimate/llms.txt

Applies animation effects over a duration in milliseconds. Multiple animations can be chained with `&&` for parallel execution. Supports easing functions like linear, easein, easeout, and easeinout. Includes commands for movement, rotation, scaling, pausing, opacity changes, and dash offset animation.

```scriptimate
; Simple movement over 3 seconds
animate_3000 move boomerang 500 -

; Parallel animations - move, rotate, and scale simultaneously
animate_1000 move boomerang 400 - && rotate boomerang 720 && scale boomerang 2

; With easing functions
animate_3000 move easein element1 600 - 
  && move easeout element2 600 - 
  && move easeinout element3 600 -

; Pause animation (sleep)
animate_2000 pause

; Change opacity
animate_500 opacity logo 0

; Animate dash offset for stroke drawing effect
animate_2000 dashoffset stroke 0
```

--------------------------------

### Run Command Groups Together

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Executes multiple defined command groups simultaneously. This command is used in conjunction with `define_group` to orchestrate complex animations or scenarios.

```scriptimate
run_groups_together <group name 1> <group name 2> etc.
```

--------------------------------

### Scriptimate: Initialize Canvas with set_frame_size

Source: https://context7.com/devforth/scriptimate/llms.txt

Initializes the animation canvas with specified width and height in pixels. This command is mandatory before placing any elements. An optional scale parameter can adjust the overall output scaling.

```scriptimate
; Basic usage
set_frame_size 600 300

; With optional scale factor (2x resolution)
set_frame_size 1920 1080 2
```

--------------------------------

### FFmpeg Command for Video Generation (MP4)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Shows the underlying FFmpeg command used for generating MP4 video output from a sequence of image frames. This command can be customized for different encoding options.

```bash
ffmpeg -framerate 25/1 -i frames/%07d.jpg -c:v libx264 -r 25 out.mp4 -y
```

--------------------------------

### Define and Run Parallel Animation Groups

Source: https://context7.com/devforth/scriptimate/llms.txt

Defines named sequential animation groups using `define_group` and executes them in parallel with `run_groups_together`. Supports various animation types like move, pause, and rotate.

```scriptimate
const $frameW=600 $frameH=300
set_frame_size $frameW $frameH

place boomerang1 0 $boomerang1__HEIGHT/2
place boomerang2 0 $boomerang1__HEIGHT*3/2

; Define first animation sequence
define_group scenario1:
  animate_1000 move easein boomerang1 270 -
  animate_2000 move easeout boomerang1 $frameW-$boomerang1__WIDTH $frameH-$boomerang1__HEIGHT

; Define second animation sequence with pause
define_group scenario2:
  animate_1000 move boomerang2 250 -
  animate_1000 pause
  animate_1000 move boomerang2 $frameW-$boomerang1__WIDTH 0

; Define rotation group
define_group rotator:
  animate_3000 rotate boomerang1 360*4 && rotate boomerang2 360*5

; Run all groups simultaneously
run_groups_together scenario1 scenario2 rotator
```

--------------------------------

### Define Command Group

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Defines a named group of commands that can be executed together. This is useful for organizing complex or parallel sequences of actions.

```scriptimate
define_group <group name, slug compatable>:
  <command 1> command args
  <command 2> command args
  etc
```

--------------------------------

### Apply Font Smoothing with -webkit- and -moz- Prefixes

Source: https://github.com/devforth/scriptimate/blob/master/index.html

This CSS snippet applies font smoothing to text elements using vendor prefixes for WebKit and Mozilla browsers. It ensures consistent text rendering across different platforms by handling anti-aliasing for WebKit and grayscale anti-aliasing for Firefox.

```css
* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
```

--------------------------------

### Schedule JavaScript Execution

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Schedules the execution of JavaScript code at a specified interval. It takes an ID for the interval, the interval duration in milliseconds, and the JavaScript code to execute. Useful for time-based updates or recurring tasks within the scriptimate environment.

```scriptimate
schedule_eval <id of interval> <interval in ms> <javascript code>
```

```scriptimate
# schedule_eval task_time 10 incr('task_time_secs', 2); if (+get('task_time_secs') >= 60) { incr('task_time_mins'); set('task_time_secs', 0)}
```

--------------------------------

### Define Custom Constants

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Allows the definition of custom constants within the scriptimate environment. These constants can be used to represent values that might change or to improve readability.

```scriptimate
const <slug compatible constant name>=<constant value>
```

```scriptimate
const $PositionX=600 $underLocation=300
```

--------------------------------

### Place HTML Div Element

Source: https://context7.com/devforth/scriptimate/llms.txt

Creates a div element on the canvas for dynamic content, which can be updated using `schedule_eval`. It takes an ID, position, size, opacity, and initial content.

```scriptimate
; place_div <id> <left> <top> <width> <height> <opacity> <content>
place_div counter 50 50 100 40 1 "0"
place_div timer_display 200 100 200 50 1 "<span>00:00</span>"
```

--------------------------------

### Create Clipping Container (Boxhole)

Source: https://context7.com/devforth/scriptimate/llms.txt

Creates a rectangular container (`boxhole`) that clips its contents. Elements placed inside a boxhole are clipped at its boundaries, useful for effects like slide-ins.

```scriptimate
; Create a boxhole container
place_boxhole viewport 100 100 400 200

; Place element inside boxhole (using boxhole reference)
place slider 0 0 1 1 viewport
```

--------------------------------

### Apply Animations Over Time

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Applies a sequence of animators over a specified duration. Multiple animators can be specified and will run in parallel, separated by '&&'. Supports various animation modes like 'linear', 'easein', 'easeout', and 'easeinout'.

```scriptimate
animate_<duration in ms> <animator 1> <[optional] mode> [args of animator 1]  && <animator 2> <[optional] mode> [args of animator 2] and so on
```

--------------------------------

### Move Animation Part to Top Layer (Scriptimate)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Use the `moveToTop` command to ensure a specific SVG part is rendered above all other elements in the animation. This is useful for elements that should always be visible, like cursors or highlights.

```scriptimate
moveToTop cursor
```

--------------------------------

### Scriptimate: Place SVG Element with place

Source: https://context7.com/devforth/scriptimate/llms.txt

Places an SVG file onto the canvas at specified coordinates. The SVG file must reside in the `src/` folder. Optional parameters control opacity, scale, boxhole reference, and dash offset.

```scriptimate
; Basic placement - place boomerang.svg at x=0, y=100
place boomerang 0 100

; With opacity (0.5 = 50% transparent)
place cursor 400 120 0.5

; With scale factor (2x size)
place icon 100 50 1 2

; Full syntax with all optional parameters
; place <svg-name> <left> <top> <opacity> <scale> <boxhole> <dashoffset>
place stroke 10 10 1 1 0 -1000
```

--------------------------------

### Scriptimate: Define Constants with const

Source: https://context7.com/devforth/scriptimate/llms.txt

Defines constants, prefixed with `$`, for use within scripts. These constants can include expressions. Scriptimate automatically creates built-in constants for placed elements, such as `$<part>__WIDTH`, `$<part>__HEIGHT`, `$<part>__LEFT`, and `$<part>__TOP`.

```scriptimate
; Define frame dimensions as constants
const $frameW=600 $frameH=300
set_frame_size $frameW $frameH

; Use part dimensions in calculations
place cake 0 0
place plate 0 $cake__HEIGHT

; Complex expressions in animations
const $numberOfSpins=5 $ScaleFactor=0.01
place boomerang 0 $frameHeight-$boomerang__HEIGHT
animate_1000 move boomerang $frameWidth-$boomerang__WIDTH 0
  && rotate boomerang 360*$numberOfSpins
  && scale boomerang $ScaleFactor
```

--------------------------------

### Dashoffset SVG Part Animation

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Animates the dash offset of an SVG element's stroke, useful for drawing effects. It takes the SVG name, an optional mode, and the target dash offset value.

```scriptimate
dashoffset <svg name> <[optional] mode> <target dashoffset>
```

--------------------------------

### Opacity SVG Part Animation

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Animates the opacity of an SVG element. It requires the SVG name, an optional mode, and the target opacity value (between 0 and 1).

```scriptimate
opacity <svg name> <[optional] mode> <target opacity 0 - 1>
```

--------------------------------

### Scale SVG Part Animation

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Animates the scale of an SVG element. It requires the SVG name, an optional mode, a target scale factor, and the origin point for scaling.

```scriptimate
scale <svg name> <[optional] mode> <target scale factor> <scale origin>
```

--------------------------------

### Scale Body Element from Top Left Origin

Source: https://github.com/devforth/scriptimate/blob/master/index.html

This CSS rule targets the body element to scale it from its top-left origin. The transform-origin property sets the point around which the scaling occurs, and the transform property applies a scale factor of 2, effectively doubling the size of the body content.

```css
body { transform-origin: top left; transform: scale(2); }
```

--------------------------------

### Add CSS Styles to Elements

Source: https://context7.com/devforth/scriptimate/llms.txt

Applies CSS styles to a part or div element using `addstyle`. Styles must be provided as a string with no spaces in values. This is useful for customizing appearance beyond basic properties.

```scriptimate
; Add stroke dash array for drawing animation
place stroke 10 10 1 1 0 -1000
addstyle stroke stroke-dasharray:1000;

; Style a div with font settings
place_div label 100 100 200 50 1 "Hello"
addstyle label color:white;font-family:'OpenSans';font-size:24px;
```

--------------------------------

### Built-in Constants for SVG Parts

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Provides access to internal constants representing the dimensions and position of SVG parts. These are dynamically generated when a part is added to the script.

```scriptimate
$<part name>__WIDTH    # width of SVG part in px
$<part name>__HEIGHT   # height of SVG part in px
$<part name>__LEFT     # current left coordinate of SVG part in px
$<part name>__TOP      # current top coordinate of SVG part in px
```

```scriptimate
place cake 0 0 
place plate 0 $cake__HEIGHT
```

--------------------------------

### Change Element Z-Order to Top

Source: https://context7.com/devforth/scriptimate/llms.txt

Moves a specified element to the top of the stacking order using `moveToTop`, ensuring it is rendered above all other elements on the canvas.

```scriptimate
place background 0 0
place content 100 100
place cursor 200 200

; Ensure cursor is always on top
moveToTop cursor
```

--------------------------------

### Resize Div Animation

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Animates the width and height CSS attributes of a div element. This is typically used for creating animated bars or containers and requires the div to have appropriate display properties like 'flex'.

```scriptimate
resize_div <div_name> <destination width> <destination height>
```

--------------------------------

### Add CSS Styles to Animation Part (Scriptimate)

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

The `addstyle` command allows you to apply CSS styles to SVG parts or divs within your Scriptimate animation. Styles should be provided as a single string without spaces between property-value pairs.

```scriptimate
addstyle cursor "color:white;font-family:'OpenSans'"
```

--------------------------------

### Pause Animation

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

A simple animator that introduces a pause or 'sleep' for a specified duration. It's often used within animation sequences to create delays between actions.

```scriptimate
pause
```

```scriptimate
animate_3500 pause
```

--------------------------------

### Move SVG Part Animation

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Animates the position of an SVG element. It takes the SVG name, an optional animation mode, and target coordinates for left and top.

```scriptimate
move <svg name> <[optional] mode> <target left> <target top>
```

--------------------------------

### Rotate SVG Part Animation

Source: https://github.com/devforth/scriptimate/blob/master/readme.md

Animates the rotation of an SVG element. It takes the SVG name, an optional mode, a target rotation degree, and the origin point for rotation.

```scriptimate
rotate <svg name> <[optional] mode> <target rotate deg> <scale origin>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.