โ† All examples

States of matter

Canonical Scrwly scene example: states-of-matter-comparison

States of matter Visual scene states-of-matter-comparison {"version":"0.1","sceneId":"states-of-matter-comparison","targets":[{"nodeId":"solid","semanticRole":"shape","animation":"fade","order":1,"startPct":16.44,"durationPct":8,"value":"Solid","label":"Solid"},{"nodeId":"liquid","semanticRole":"shape","animation":"fade","order":2,"startPct":20.89,"durationPct":8,"value":"Liquid","label":"Liquid"},{"nodeId":"gas","semanticRole":"shape","animation":"fade","order":3,"startPct":25.33,"durationPct":8,"value":"Gas","label":"Gas"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Solids, liquids and gases","label":"Solids, liquids and gases"},{"nodeId":"solidHeading","semanticRole":"label","animation":"label","order":4,"startPct":35.33,"durationPct":8,"value":"Solid","label":"Solid"},{"nodeId":"liquidHeading","semanticRole":"label","animation":"label","order":5,"startPct":38.67,"durationPct":8,"value":"Liquid","label":"Liquid"},{"nodeId":"gasHeading","semanticRole":"label","animation":"label","order":6,"startPct":42,"durationPct":8,"value":"Gas","label":"Gas"},{"nodeId":"solidText","semanticRole":"label","animation":"label","order":7,"startPct":45.33,"durationPct":8,"value":"Particles packed tightly\nKeeps its shape","label":"Particles packed tightly\nKeeps its shape"},{"nodeId":"liquidText","semanticRole":"label","animation":"label","order":8,"startPct":48.67,"durationPct":8,"value":"Particles move around\nTakes shape of container","label":"Particles move around\nTakes shape of container"},{"nodeId":"gasText","semanticRole":"label","animation":"label","order":9,"startPct":52,"durationPct":8,"value":"Particles spread out\nFills available space","label":"Particles spread out\nFills available space"}]} Solids, liquids and gases Solid Liquid Gas SOLID LIQUID GAS Particlespacked tightlyKeeps its shape Particles movearoundTakes shape ofcontainer Particlesspread outFills availablespace
{
  "version": "0.1",
  "id": "states-of-matter-comparison",
  "title": "States of matter",
  "canvas": {
    "width": 900,
    "height": 430,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "title",
      "x": 450,
      "y": 58,
      "type": "text",
      "text": "Solids, liquids and gases",
      "fontSize": 27,
      "fontWeight": 650,
      "align": "center"
    },
    {
      "id": "solid",
      "x": 90,
      "y": 118,
      "width": 210,
      "height": 238,
      "style": {
        "fill": "#f6f6f1",
        "stroke": "background",
        "strokeWidth": 1.4
      },
      "type": "roundedRect",
      "radius": 8,
      "label": "Solid"
    },
    {
      "id": "liquid",
      "x": 345,
      "y": 118,
      "width": 210,
      "height": 238,
      "style": {
        "fill": "#e3e3dc",
        "stroke": "background",
        "strokeWidth": 1.4
      },
      "type": "roundedRect",
      "radius": 8,
      "label": "Liquid"
    },
    {
      "id": "gas",
      "x": 600,
      "y": 118,
      "width": 210,
      "height": 238,
      "style": {
        "fill": "#cfcfc6",
        "stroke": "background",
        "strokeWidth": 1.4
      },
      "type": "roundedRect",
      "radius": 8,
      "label": "Gas"
    },
    {
      "id": "solidHeading",
      "x": 195,
      "y": 162,
      "type": "text",
      "text": "Solid",
      "fontSize": 22,
      "fontWeight": 600,
      "align": "center"
    },
    {
      "id": "liquidHeading",
      "x": 450,
      "y": 162,
      "type": "text",
      "text": "Liquid",
      "fontSize": 22,
      "fontWeight": 600,
      "align": "center"
    },
    {
      "id": "gasHeading",
      "x": 705,
      "y": 162,
      "type": "text",
      "text": "Gas",
      "fontSize": 22,
      "fontWeight": 600,
      "align": "center"
    },
    {
      "id": "solidText",
      "x": 195,
      "y": 246,
      "width": 164,
      "type": "text",
      "text": "Particles packed tightly\nKeeps its shape",
      "fontSize": 19,
      "align": "center",
      "wrap": true
    },
    {
      "id": "liquidText",
      "x": 450,
      "y": 246,
      "width": 164,
      "type": "text",
      "text": "Particles move around\nTakes shape of container",
      "fontSize": 19,
      "align": "center",
      "wrap": true
    },
    {
      "id": "gasText",
      "x": 705,
      "y": 246,
      "width": 164,
      "type": "text",
      "text": "Particles spread out\nFills available space",
      "fontSize": 19,
      "align": "center",
      "wrap": true
    }
  ]
}