browser connections
---
company connections
---
🔒secure.chonky.com
c
Chonky BankWelcome Back
Access your accounts securely
Checking & Savings
Credit Cards
Mortgages
🔒secure.chonky.com
c
Chonky BankWelcome Back
Access your accounts securely
Checking & Savings
Credit Cards
Mortgages
debug
narration
position
,←,,,,05:01-03:00
browser
,←,,,,05-01:03-01
app
,←,,,,05-01:03-01
app spacer
,←,,,,05-01:03-01
server
,←,,,,05-01:03-01
server spacer
,←,,,,05-01:03-01
company
,←,,,,05-01:03-01
narration
,←,,,,05-01:03-01
browser stage
{
"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
}
]
}browser track
{
"stage": 0,
"phase": 0,
"debug": false,
"isPlaying": false,
"isForward": false,
"isFlipped": false,
"isLabeled": false,
"connectTo": null,
"connectFrom": null
}app stage
{
"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
}
]
}app track
{
"stage": 0,
"phase": 0,
"debug": false,
"isPlaying": false,
"isForward": false,
"isFlipped": false,
"isLabeled": false,
"connectTo": null,
"connectFrom": null
}server stage
{
"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
}
]
}server track
{
"stage": 0,
"phase": 0,
"debug": false,
"isPlaying": false,
"isForward": false,
"isFlipped": false,
"isLabeled": false,
"connectTo": null,
"connectFrom": null
}company stage
{
"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
}
]
}company track
{
"stage": 0,
"phase": 0,
"debug": false,
"isPlaying": false,
"isForward": false,
"isFlipped": false,
"isLabeled": false,
"connectTo": null,
"connectFrom": null
}narration stage
{
"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"
}
]
}narration track
{
"stage": 0,
"phase": 0,
"debug": false,
"isPlaying": false,
"isForward": false,
"isFlipped": false,
"isLabeled": false,
"connectTo": null,
"connectFrom": null
}console logs
ready...