A language for motion / 0.1

Motion,
written as geometry.

VGL describes scenes, shapes, and time as plain text. It runs in the browser or inside an app—staying sharp when the viewport moves, scales, or zooms.

Open the playground →Source + extension ↗

No export step. No timeline UI. Just a scene that can run.

hello.vgllive / svg

scene "hello" {
  size 960 540
  duration 6s

  circle ball {
    x 160
    radius 54
    animate x
      from 160
      to 800
      during 4s
  }
}

scroll to zoom / drag to pan

The premise

Not a video format.
A scene format.

Pixel video records what every frame looked like. VGL records what exists, where it is, and how it changes. The host renders the scene at the size it needs.

Canonical syntax

language / 0.1

A VGL document is a scene. A scene has a size, a duration, and named nodes. Nodes hold properties. Animations change one property over time.

document

scene "name" {
  size width height
  duration time
  circle name { ... }
}

Scene

The root timeline and coordinate space. Duration accepts ms, s, or m.

Node

A named rect, circle, line, or text.

Animation

One property interpolated from a starting value to an ending value.

02 / Pipeline

Text in. A living scene out.

The format is small on purpose. Renderers can grow without changing the authoring model.

Parse

Tokenize the plain-text source and turn it into an explicit syntax tree.

source → AST

→

Compile

Validate names, properties, and time values into a portable scene graph.

AST → graph

→

Render

Let a browser or app renderer draw the current state at native resolution.

graph → SVG / GPU

Bring VGL to a website

npm / vgl-motion

VGL runs in the browser through the vgl-motion package. Keep the .vgl file as a normal asset and let the player compile it into a live SVG scene.

install

npm install vgl-motion

main.js

import { VGLPlayer } from "vgl-motion";

const stage = document.querySelector("#stage");
await VGLPlayer.fromSource("/scenes/hello.vgl", stage);

Install

Add vgl-motion to any Vite, React, or JavaScript website.

Mount

Give the player a container such as <div id="stage"></div>.

Run

Serve the site over HTTP so the browser can fetch the .vgl scene.

04 / Playground

Write a scene. See it move.

editorready

VGL / plain text

preview / svg960 × 540

scroll to zoom · drag to pan0.00s

04 / Examples

Small patterns, ready to copy.

Start with the shape. Add time when the shape is clear.

01 / shape

A quiet rectangle

rect card {
  x 80
  y 80
  width 320
  height 180
  radius 12
  fill "#1d2a25"
}

02 / type

Text is a node

text label {
  value "Hello, vector world"
  x 480
  y 280
  size 32
  align center
}

03 / motion

Change one thing

animate x
  from 80
  to 720
  during 2s
  easing ease-in-out