{
    "css": "w-150 h-110",
    "initialize": {
        "position": "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
        "scale": 1
    },
    "animation": [
        {
            "rotateY": 250,
            "duration": 2
        },
        {
            "scale": 0.2,
            "top": "top-1/2",
            "left": "-250px",
            "xPercent": 0,
            "duration": 2,
            "bounce": true,
            "easeReverse": false
        },
        {
            "duration": 0.5
        }
    ],
    "connection": [
        null,
        null,
        null
    ],
    "narration": [
        {
            "title": "Browser",
            "titleVisible": false
        },
        null,
        {
            "title": "Browser",
            "titleVisible": true
        }
    ]
}

{
    "stage": 0,
    "phase": 0,
    "debug": false,
    "isPlaying": false,
    "isForward": false,
    "isFlipped": false,
    "isLabeled": false,
    "connectTo": null,
    "connectFrom": null
}

{
    "css": "size-24",
    "initialize": {},
    "animation": [
        {
            "duration": 2
        },
        {
            "duration": 2
        },
        {
            "duration": 0.5
        }
    ],
    "connection": [
        null,
        null,
        null
    ],
    "narration": [
        {
            "title": "App",
            "titleVisible": false
        },
        null,
        {
            "title": "App",
            "titleVisible": true
        }
    ]
}

{
    "stage": 0,
    "phase": 0,
    "debug": false,
    "isPlaying": false,
    "isForward": false,
    "isFlipped": false,
    "isLabeled": false,
    "connectTo": null,
    "connectFrom": null
}

{
    "css": "size-24",
    "initialize": {},
    "animation": [
        {
            "duration": 2
        },
        {
            "duration": 2
        },
        {
            "duration": 0.5
        }
    ],
    "connection": [
        null,
        null,
        null
    ],
    "narration": [
        {
            "title": "Server",
            "titleVisible": false
        },
        null,
        {
            "title": "Server",
            "titleVisible": true
        }
    ]
}

{
    "stage": 0,
    "phase": 0,
    "debug": false,
    "isPlaying": false,
    "isForward": false,
    "isFlipped": false,
    "isLabeled": false,
    "connectTo": null,
    "connectFrom": null
}

{
    "css": "size-24",
    "initialize": {},
    "animation": [
        {
            "duration": 2,
            "children": {
                "dots": {
                    "initialize": {
                        "opacity": 0
                    },
                    "animation": {
                        "duration": 2
                    }
                },
                "paths": {
                    "initialize": {
                        "visibility": 0
                    },
                    "animation": {
                        "duration": 2
                    }
                },
                "wrapper": {
                    "initialize": {
                        "y": 10,
                        "opacity": 0
                    },
                    "animation": {
                        "duration": 2
                    }
                }
            }
        },
        {
            "duration": 0.5,
            "children": {
                "dots": {
                    "animation": {
                        "opacity": 1,
                        "duration": 0.5,
                        "easeReverse": false
                    }
                },
                "paths": {
                    "animation": {
                        "visibility": 1,
                        "delay": 0.5,
                        "duration": 1.5,
                        "easeReverse": false
                    }
                }
            }
        },
        {
            "duration": 2,
            "children": {
                "dots": {
                    "animation": {
                        "opacity": 0,
                        "duration": 0.5,
                        "easeReverse": false
                    }
                },
                "wrapper": {
                    "animation": {
                        "y": 0,
                        "opacity": 1,
                        "duration": 0.5,
                        "easeReverse": false
                    }
                }
            }
        }
    ],
    "connection": [
        null,
        null,
        null
    ],
    "narration": [
        {
            "title": "Spoofproof",
            "titleVisible": false
        },
        null,
        {
            "title": "Spoofproof",
            "titleVisible": true
        }
    ]
}

{
    "stage": 0,
    "phase": 0,
    "debug": false,
    "isPlaying": false,
    "isForward": false,
    "isFlipped": false,
    "isLabeled": false,
    "connectTo": null,
    "connectFrom": null
}

{
    "initialize": {},
    "animation": [
        {
            "duration": 2
        },
        {
            "duration": 2
        },
        {
            "duration": 0.5
        }
    ],
    "connection": [
        null,
        null,
        null
    ],
    "narration": [
        {
            "title": "ready",
            "description": "Let's explore what happens when using a service protected by Spoofproof"
        },
        null,
        {
            "title": "start",
            "description": "This is cool, when you're ready, click play. All the descriptions will be here, that' why pauses have been added between each step"
        }
    ]
}

{
    "stage": 0,
    "phase": 0,
    "debug": false,
    "isPlaying": false,
    "isForward": false,
    "isFlipped": false,
    "isLabeled": false,
    "connectTo": null,
    "connectFrom": null
}