1[
2  {
3    "id" : "stage",
4    "type" : "ClutterStage",
5    "width" : 300,
6    "height" : 300,
7    "color" : "#335",
8
9    "signals" : [
10      { "name" : "destroy", "handler" : "clutter_main_quit" }
11    ],
12
13    "children" : [ "rectangle" ]
14  },
15
16  {
17    "id" : "rectangle-states",
18    "type" : "ClutterState",
19    "duration" : 1000,
20
21    "transitions" : [
22      {
23        "source" : null,
24        "target" : "base",
25
26        "keys" : [
27          [ "rectangle", "scale-x", "ease-in-cubic", 0.7 ],
28          [ "rectangle", "scale-y", "ease-in-cubic", 0.7 ],
29          [ "rectangle", "rotation-angle-z", "ease-out-cubic", 0.0 ]
30        ]
31      },
32      {
33        "source" : null,
34        "target" : "hover",
35
36        "keys" : [
37          [ "rectangle", "scale-x", "ease-in-cubic", 1.2 ],
38          [ "rectangle", "scale-y", "ease-in-cubic", 1.2 ]
39        ]
40      },
41      {
42        "source" : null,
43        "target" : "clicked",
44
45        "keys" : [
46          [ "rectangle", "rotation-angle-z", "ease-out-bounce", 90.0 ]
47        ]
48      }
49    ]
50  },
51
52  {
53    "id" : "rectangle",
54    "type" : "ClutterRectangle",
55    "width" : 200,
56    "height" : 200,
57    "x" : 50,
58    "y" : 50,
59    "color" : "#a90",
60    "rotation-center-z-gravity" : "center",
61    "scale-gravity" : "center",
62    "scale-x" : 0.7,
63    "scale-y" : 0.7,
64    "reactive" : true,
65
66    "signals" : [
67      {
68        "name" : "enter-event",
69        "states" : "rectangle-states",
70        "target-state" : "hover"
71      },
72      {
73        "name" : "leave-event",
74        "states" : "rectangle-states",
75        "target-state" : "base"
76      }
77    ],
78
79    "actions" : [
80      {
81        "type" : "ClutterClickAction",
82        "signals" : [
83          {
84            "name" : "clicked",
85            "states" : "rectangle-states",
86            "target-state" : "clicked"
87          }
88        ]
89      }
90    ]
91  }
92]
93