Showcase

The gallery draws every primitive with its default params. This page shows what the defaults hide: params and spec options added since, each drawn by the committed library from the spec under its picture (seed 12345). Moving examples loop one second at 30 frames per second; transparent examples sit on a checkerboard so the alpha is visible.

Rendered with npm run showcase:generate

Added in 0.11.0

stickman: the presenter
animspec's default avatar points at a `line-chart`'s newest point (`action: "point"` with `targetX`/`targetY`) and speaks the frame's label in a bubble (`speech: true`). The chart and the speech both come from the host's frame data.
Spec
{ "accent": "#ff2d2d", "layers": [ { "type": "line-chart", "points": 8, "fill": true }, { "type": "stickman", "action": "point", "x": 0.08, "scale": 0.5, "targetX": 0.9, "targetY": 0.22, "speech": true, "colour": "accent", "style": "joints" } ] }

stickman: a choreographed fight
Two `stickman` layers and a `sequence` of clips: they square up, one punches as the other is hit, a kick sends the second into a `fall`, then a dance over the `ko`. Interaction is choreography: each beat is a clip, and no figure reads another.
Spec
{ "accent": "#ff2d2d", "sequence": [ { "from": 0, "to": 24, "layers": [ { "type": "stickman", "action": "walk", "x": 0.38, "scale": 0.55, "facing": "right", "style": "bold" }, { "type": "stickman", "action": "walk", "x": 0.62, "scale": 0.55, "facing": "left", "style": "bold", "colour": "accent" } ] }, { "from": 24, "to": 44, "layers": [ { "type": "stickman", "action": "punch", "x": 0.415, "scale": 0.55, "facing": "right", "style": "bold" }, { "type": "stickman", "action": "hit", "x": 0.585, "scale": 0.55, "facing": "left", "style": "bold", "colour": "accent" } ] }, { "from": 44, "to": 64, "layers": [ { "type": "stickman", "action": "kick", "x": 0.415, "scale": 0.55, "facing": "right", "style": "bold" }, { "type": "stickman", "action": "fall", "x": 0.585, "scale": 0.55, "facing": "left", "style": "bold", "colour": "accent" } ] }, { "from": 64, "to": 90, "layers": [ { "type": "stickman", "action": "dance", "x": 0.38, "scale": 0.55, "facing": "right", "style": "bold" }, { "type": "stickman", "action": "ko", "x": 0.62, "scale": 0.55, "facing": "left", "style": "bold", "colour": "accent" } ] } ] }

stickman: a crowd on the beat
One layer, nine figures: `count: 9` with `arrangement: "cluster"` dances out of step (each figure's phase and size come from the seed) and hops on loud frames (`drive: "beat"`); `highlight: 5` picks the one in red.
Spec
{ "accent": "#ff2d2d", "layers": [ { "type": "dots", "count": 90 }, { "type": "stickman", "action": "dance", "count": 9, "arrangement": "cluster", "highlight": 5, "scale": 0.36, "y": 0.9, "drive": "beat" } ] }

Added in 0.10.0

Game Boy DMG profile

160 × 144 with profile: "gameboy-dmg" and pixelMode: the background, ink, accent, fg2 and the hero's parts all come from the four DMG greens, so every pixel of every frame is one of them. No roles are written by hand.

Spec

{
 "background": "white",
 "profile": "gameboy-dmg",
 "pixelMode": true,
 "layers": [
  {
   "type": "checker",
   "pattern": "b",
   "size": 16
  },
  {
   "type": "tetris",
   "cols": 8
  },
  {
   "type": "sprite",
   "character": "hero",
   "motion": "bounce",
   "speed": 1.2,
   "scale": 2,
   "y": 0.95,
   "reactive": false
  }
 ]
}

Genesis profile

320 × 224 with profile: "genesis": four image planes scroll at their own speeds, the hero walks in front, and a dither band with matrix: "2" mixes two sea tones in a checkerboard. Every colour, including the art's, is snapped to the 512-colour 9-bit grid.

Spec

{
 "profile": "genesis",
 "pixelMode": true,
 "roles": {
  "boots": "#5a3418",
  "cloak": "#2d4a8c",
  "cloak-shade": "#1a2c55",
  "eyes": "#1e6b3a",
  "gold": "#e0b030",
  "hair": "#8a4a20",
  "hair-light": "#d08850",
  "outline": "#201010",
  "skin": "#f0c8a0",
  "tunic": "#a02828",
  "sea-dark": "#1830a0",
  "sea-light": "#3878e0"
 },
 "assets": {
  "sky": {
   "sha256": "48c82ff3921e8fe7a9f4e9a73d197a95784ef73fb9d4f0d5d6e5231c9f599404",
   "width": 320,
   "height": 180
  },
  "mountains": {
   "sha256": "fdad037c5bea251875d3ea4632643028adce2647ccda534e0c11cc46206655b4",
   "width": 320,
   "height": 180
  },
  "trees": {
   "sha256": "096f17fbeac2b3bd01762cbdc203282894dbc7474400ba7212518ea6a7f213d6",
   "width": 160,
   "height": 180
  },
  "ground": {
   "sha256": "139d9d18324ee765983b674ebec862c6d85556482dff003a3cf11c5a3dca1b54",
   "width": 64,
   "height": 180
  }
 },
 "layers": [
  {
   "type": "image",
   "asset": "sky",
   "fit": "none",
   "x": 0,
   "y": 0,
   "anchor": "top-left",
   "wrap": "x",
   "scrollX": 0,
   "drive": "none"
  },
  {
   "type": "image",
   "asset": "mountains",
   "fit": "none",
   "x": 0,
   "y": 0,
   "anchor": "top-left",
   "wrap": "x",
   "scrollX": 0.05,
   "drive": "none"
  },
  {
   "type": "image",
   "asset": "trees",
   "fit": "none",
   "x": 0,
   "y": 0,
   "anchor": "top-left",
   "wrap": "x",
   "scrollX": 0.2,
   "drive": "none"
  },
  {
   "type": "image",
   "asset": "ground",
   "fit": "none",
   "x": 0,
   "y": 0,
   "anchor": "top-left",
   "wrap": "x",
   "scrollX": 0.5,
   "drive": "none"
  },
  {
   "type": "dither",
   "colors": "sea-dark,sea-light",
   "y0": 0.8,
   "matrix": "2",
   "drive": "none"
  },
  {
   "type": "sprite",
   "character": "hero",
   "motion": "static",
   "scale": 3,
   "x": 0.35,
   "y": 0.62,
   "reactive": false
  }
 ]
}

Arcade attract mode (horizontal)
A MAME-era horizontal attract screen at 256 × 224 with `pixelMode`: a `dots` starfield over a `gridhorizon` floor, the player `sprite`, and `hud-score` reading 1UP, HI-SCORE and CREDIT from the frame's `labels`; 1UP flashes on the beat, and `INSERT COIN` waits. The CRT look is a finish added after animspec (Motion Studio).
Spec
{ "pixelMode": true, "accent": "#f0c020", "layers": [ { "type": "dots", "count": 90 }, { "type": "gridhorizon" }, { "type": "sprite", "character": "bot", "motion": "bounce", "speed": 1.4, "scale": 3, "y": 0.7, "reactive": false }, { "type": "type-reveal", "text": "INSERT COIN", "framesPerUnit": 1, "fontSize": 14, "y": 0.86 }, { "type": "hud-score", "size": 0.055 } ] }

Added in 0.9.0

News ticker
`ticker` scrolls the frame's `labels` as a news band, joined by separators; the headline crossing the centre turns accent on loud frames. The bars above follow the same signal.
Spec
{ "accent": "#e02020", "layers": [ { "type": "bars", "heightFrac": 0.6 }, { "type": "ticker", "speed": 3 } ] }

Versus stage (CPS II profile)

384 × 224 with pixelMode: two fighter sprites, the second a player-two palette swap (variant: "alt") facing left. A sequence of clips stages the exchange: guard, a pose: "punch" against a pose: "hit", then guard again. versus-bars reads each side's health and damage tail from the frame's coords (the tail drains after the hit); hud-score draws the timer and names from its labels.

Spec

{
 "pixelMode": true,
 "accent": "#e02020",
 "roles": {
  "boots": "#c03030",
  "cloak": "#203870",
  "cloak-shade": "#152650",
  "eyes": "#1e6b3a",
  "gold": "#e0b030",
  "hair": "#202020",
  "hair-light": "#484848",
  "outline": "#201010",
  "skin": "#f0c8a0",
  "tunic": "#101010",
  "s0": "#101040",
  "s1": "#a04050",
  "d0": "#6a4a28",
  "cloak-alt": "#a03018",
  "cloak-shade-alt": "#702010",
  "gold-alt": "#f0f0f0"
 },
 "sequence": [
  {
   "from": 0,
   "to": 10,
   "layers": [
    {
     "type": "dither",
     "colors": "s0,s1",
     "x0": 0,
     "y0": 0,
     "x1": 1,
     "y1": 0.78,
     "drive": "none"
    },
    {
     "type": "dither",
     "colors": "d0",
     "x0": 0,
     "y0": 0.78,
     "x1": 1,
     "y1": 1,
     "drive": "none"
    },
    {
     "type": "sprite",
     "character": "fighter",
     "motion": "static",
     "scale": 4,
     "x": 0.36,
     "y": 0.56,
     "reactive": false,
     "pose": "auto"
    },
    {
     "type": "sprite",
     "character": "fighter",
     "motion": "static",
     "scale": 4,
     "x": 0.64,
     "y": 0.56,
     "reactive": false,
     "faceLeft": true,
     "variant": "alt",
     "pose": "auto"
    },
    {
     "type": "versus-bars"
    },
    {
     "type": "hud-score",
     "layout": "versus",
     "drive": "none"
    }
   ]
  },
  {
   "from": 10,
   "to": 16,
   "layers": [
    {
     "type": "dither",
     "colors": "s0,s1",
     "x0": 0,
     "y0": 0,
     "x1": 1,
     "y1": 0.78,
     "drive": "none"
    },
    {
     "type": "dither",
     "colors": "d0",
     "x0": 0,
     "y0": 0.78,
     "x1": 1,
     "y1": 1,
     "drive": "none"
    },
    {
     "type": "sprite",
     "character": "fighter",
     "motion": "static",
     "scale": 4,
     "x": 0.36,
     "y": 0.56,
     "reactive": false,
     "pose": "punch"
    },
    {
     "type": "sprite",
     "character": "fighter",
     "motion": "static",
     "scale": 4,
     "x": 0.64,
     "y": 0.56,
     "reactive": false,
     "faceLeft": true,
     "variant": "alt",
     "pose": "hit"
    },
    {
     "type": "versus-bars"
    },
    {
     "type": "hud-score",
     "layout": "versus",
     "drive": "none"
    }
   ]
  },
  {
   "from": 16,
   "to": 30,
   "layers": [
    {
     "type": "dither",
     "colors": "s0,s1",
     "x0": 0,
     "y0": 0,
     "x1": 1,
     "y1": 0.78,
     "drive": "none"
    },
    {
     "type": "dither",
     "colors": "d0",
     "x0": 0,
     "y0": 0.78,
     "x1": 1,
     "y1": 1,
     "drive": "none"
    },
    {
     "type": "sprite",
     "character": "fighter",
     "motion": "static",
     "scale": 4,
     "x": 0.36,
     "y": 0.56,
     "reactive": false,
     "pose": "auto"
    },
    {
     "type": "sprite",
     "character": "fighter",
     "motion": "static",
     "scale": 4,
     "x": 0.64,
     "y": 0.56,
     "reactive": false,
     "faceLeft": true,
     "variant": "alt",
     "pose": "auto"
    },
    {
     "type": "versus-bars"
    },
    {
     "type": "hud-score",
     "layout": "versus",
     "drive": "none"
    }
   ]
  }
 ]
}

Vertical shooter (tate profile)

224 × 288 portrait with pixelMode: the player's ship (a built-in sprite character, its engine flame flickering) weaves under a drifting formation of alien sprites over a dots starfield, and hud-score shows 1UP, HI-SCORE and CREDIT from the frame's labels; the score rises as the host's data changes.

Spec

{
 "pixelMode": true,
 "roles": {
  "outline": "#101018",
  "cloak": "#c8d0e0",
  "cloak-shade": "#6878a0",
  "hair-light": "#40c8f0",
  "tunic": "#d02020",
  "gold": "#f8c020",
  "boots": "#f03030"
 },
 "layers": [
  {
   "type": "dots",
   "count": 120
  },
  {
   "type": "sprite",
   "icon": "alien",
   "motion": "bounce",
   "speed": 0.6,
   "scale": 2,
   "x": 0.395,
   "y": 0.24,
   "reactive": false
  },
  {
   "type": "sprite",
   "icon": "alien",
   "motion": "bounce",
   "speed": 0.6,
   "scale": 2,
   "x": 0.465,
   "y": 0.32,
   "reactive": false
  },
  {
   "type": "sprite",
   "icon": "alien",
   "motion": "bounce",
   "speed": 0.6,
   "scale": 2,
   "x": 0.535,
   "y": 0.24,
   "reactive": false
  },
  {
   "type": "sprite",
   "icon": "alien",
   "motion": "bounce",
   "speed": 0.6,
   "scale": 2,
   "x": 0.605,
   "y": 0.32,
   "reactive": false
  },
  {
   "type": "sprite",
   "character": "ship",
   "motion": "bounce",
   "speed": 1.2,
   "scale": 2,
   "y": 0.86,
   "reactive": false
  },
  {
   "type": "hud-score"
  }
 ]
}