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

03 / 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