Window animation styles

A style is one *.motion.json file of at most 64 KB. It says what happens to a window in one or more moments of its life: going to the taskbar and back, filling the screen, being dragged, snapped, opened or closed. This page is written from the program's own code, so every range here is the one it enforces.

The shape of a file

{
  "$schema": "https://stillwarddisplay.com/schema/motion.json",
  "version": 2,
  "name": "Pour",
  "minimize": {
    "effect": {
      "kind": "pour",
      "bend": 0.7,
      "squeeze": 0.6,
      "slices": 64,
      "fade": 0.3,
      "sway": 0.4,
      "waist": 0.5
    },
    "duration_ms": 480,
    "ease": {
      "bezier": [0, 0, 1, 1]
    }
  },
  "knobs": "… 3 settings people can turn"
}

A style belongs to the moment of the first event it writes, and a person chooses one style for each moment. A file may write events of several moments; each is taken from the style chosen for its own.

Events

Writing an effect for an event that cannot draw it, a jelly for a minimize say, is refused. Every effect is written as the way from where the window stands to where it goes, and the way back plays it backwards unless the file writes its own.

Timing

Every event is {"effect": …, "duration_ms": …, "ease": …}. The duration is 80 to 1500 ms, 260 when left out. The ease is one of:

• a curve of the program's, by name: smooth, snappy, spring, gentle;
• {"bezier": [x1, y1, x2, y2]}, as in CSS, with x held to 0 to 1 and y allowed from -1 to 2;
• {"spring": {"bounce": b}}, a spring that takes the duration as how long it looks, with bounce from 0 (settles without passing the mark) to 0.6. A spring keeps its speed when a window is called back halfway, which is why the program's own styles use one.

Effects

Every number is brought into its range when it is outside it, and is the value under Left out when it is missing.

windows

Windows' own animation, left alone. For: minimize, restore, maximize, unmaximize, drag, resize, snap, monitor, arrange, switch, open, close.

none

No animation at all. For: minimize, restore, maximize, unmaximize, drag, resize, snap, monitor, arrange, switch, open, close.

transform

The whole window as one picture moving toward the target, growing or shrinking and fading through up to eight key moments. For: minimize, restore, close.

Its keys are up to 8 moments, each t (when, 0 to 1), toward (how far the picture's middle is from the window's to the target's, 0 to 1), scale (0.02 to 1.5) and opacity (0 to 1). A key at the start and one at the end are put in when left out.

funnel

The window pours into the target through a narrowing neck, the part nearest the taskbar first. For: minimize, restore.

pour

A funnel that sways and pinches on its way. For: minimize, restore.

hourglass

Runs out of one screen through a narrow neck between the two and gathers again on the other, like sand in an hourglass. For: monitor.

blinds

The window as strips that leave one after another, the one nearest the taskbar first. For: minimize, restore, close.

flip

The window tips back as it goes, the side away from the taskbar first, like a card laid down. For: minimize, restore, close.

fold

The window folds up like a fan, then goes into the target. For: minimize, restore, close.

shatter

The window breaks into a grid of pieces that fly into the target one after another, turning as they go. For: minimize, restore, close.

mesh

The window as a grid whose every point the author places at each key moment. See the mesh section. For: minimize, restore, maximize, unmaximize, resize, snap, monitor, switch, open, close.

jelly

A dragged window that bends and settles like jelly. For: drag.

tilt

A dragged window leans with the speed it is carried at, and swings straight when let go. For: drag.

lift

A dragged window lifts off the desk while held: a little larger, the desk showing through. For: drag.

card

A dragged window carried as a card: leaning with its speed, banking into its way, lifted, drawn out along its speed. For: drag.

swell

The window, where it now stands, takes a breath: a little larger and back. For: maximize, unmaximize, resize, snap, monitor, switch, open.

squash

The window squashes and stretches on its bottom edge, as a thing set down with some weight. For: maximize, unmaximize, resize, snap, monitor, switch, open.

wobble

A ripple runs through the window and dies away. For: maximize, unmaximize, resize, snap, monitor, switch, open.

spring

The edges that moved run on a little and spring back: those a resize pulled, a window filling, leaving or snapping to its screen recoiling off the screen's edges, or one carried to another screen running on the way it went. For: maximize, unmaximize, resize, snap, monitor.

tip

The window nods in depth about one edge and settles: the bottom, a snapped window's screen side, or the edge opposite the one pulled. For: maximize, unmaximize, resize, snap, monitor, switch, open.

sweep

One swell crosses the window once, from the edge it nods about to the other. For: maximize, unmaximize, resize, snap, monitor, switch, open.

glide

The windows a layout places fly to their places: at once or one after another, straight or along an arc. For: arrange.

The mesh

A mesh is the window as a grid of cols × rows cells, 1 to 8 each way, whose every point the author places at up to 16 key moments. It is the effect to use for a movement of your own.

The grid is written as if the taskbar were below the window, and the program turns it for a taskbar at any edge. Across runs left to right; along runs from the side of the window away from the taskbar (0) to the side nearest it (1). Points are listed row by row along the way, each row across, so point i across and j along is number j × (cols + 1) + i.

Each point is three numbers, [toward, across, along]:

• toward, -0.5 to 1.5: how far it is on its way from its place on the window (0) to the same place on the target (1). The target is the window's taskbar button, or for a close the window's own middle. A point at 1 has arrived whatever the size and place of the window, which is what lets one mesh look the same on every desk.
• across and along, -1.5 to 1.5: how far off its way it is, as a share of the window's width and height where it is now (the window's size at toward 0, the target's at 1). Use them for a swing or a bulge; a point on its way has 0 for both.

Each key is {"t": …, "opacity": …, "points": [...]}: when (0 to 1, a share of the duration), how solid the grid is (0 to 1), and every point. A key with any other number of points than (cols + 1) × (rows + 1) is refused, since guessing which point is which would draw something its author never saw.

The first moment is always the window where it stands, whatever the file says, so a mesh starts exactly where the window is and its way back lands exactly there. A mesh whose last key comes before t 1 holds that shape and fades out.

Between keys every number moves on a cubic curve through the keys around it, so a point passes a key without a corner in its path. The event's ease is laid over that, as for every effect.

Where the desk can bend pictures, each cell is drawn in perspective between its four points. Where it cannot, the grid is read as thin strips across the way.

The example below is a 4 × 4 mesh whose corner nearest the button leads the way; beside it, what the program draws from it.

{
  "$schema": "https://stillwarddisplay.com/schema/motion.json",
  "version": 2,
  "name": "Corner first",
  "minimize": {
    "effect": {
      "kind": "mesh",
      "cols": 4,
      "rows": 4,
      "keys": [
        {
          "t": 0,
          "opacity": 1,
          "points": [
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0],
            [0, 0, 0]
          ]

Checking a file

stillward-display.exe --check file.motion.json prints whether the program takes the file, what it draws for each event, every number it changed on the way in, and whether the Workshop card can play it. Add --gif picture.gif to write the picture its Workshop page will have. Nothing else of the program starts.