{
  "id": "showcase-049-liquidity-flow",
  "css": "",
  "fps": 30,
  "html": "<section id=\"s49-1\" data-jc-clip=\"\" data-jc-name=\"01 · Incoming current\" data-jc-kind=\"scene\" data-jc-start=\"0\" data-jc-duration=\"4.5\" data-jc-track=\"1\" style=\"left:0;top:0;width:1080px;height:1080px;overflow:hidden;background:#050708\">\n <video id=\"s49-1-media\" data-jc-clip=\"\" data-jc-name=\"01 · Incoming current volumetric 3D\" data-jc-kind=\"video\" data-jc-start=\"0\" data-jc-duration=\"4.5\" data-jc-track=\"2\" data-jc-media-start=\"0\" data-jc-media-end=\"4.5\" data-jc-muted=\"true\" playsinline muted src=\"https://jsoncut.com/showcase/examples/liquidity-flow/assets/049-liquidity-glass-loop.mp4\" style=\"left:0;top:0;width:1080px;height:1080px;object-fit:cover;filter:contrast(1.12) saturate(.86);transform-origin:center\" data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;s49-1-media-scale&quot;,&quot;property&quot;:&quot;scale&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;s49-1-media-scale-0&quot;,&quot;time&quot;:0,&quot;value&quot;:1.03,&quot;easing&quot;:&quot;linear&quot;},{&quot;id&quot;:&quot;s49-1-media-scale-1&quot;,&quot;time&quot;:4.5,&quot;value&quot;:1.1,&quot;easing&quot;:&quot;linear&quot;}]}]}\"></video>\n <div id=\"s49-1-shade\" data-jc-clip=\"\" data-jc-name=\"Gallery vignette\" data-jc-kind=\"shape\" data-jc-start=\"0\" data-jc-duration=\"4.5\" data-jc-track=\"3\" style=\"left:0;top:0;width:1080px;height:1080px;background:#050708CC\"></div>\n <div id=\"s49-1-index\" data-jc-clip=\"\" data-jc-name=\"Sequence index\" data-jc-kind=\"text\" data-jc-start=\"0.2\" data-jc-duration=\"4.3\" data-jc-track=\"4\" style=\"left:72px;top:72px;width:180px;height:42px;color:#F4B64C;font-family:Inter;font-size:22px;font-weight:700;letter-spacing:.12em;text-align:left;display:grid;align-content:center\">01 / FLOW</div>\n <div id=\"s49-1-label\" data-jc-clip=\"\" data-jc-name=\"FLOW ARRIVES.\" data-jc-kind=\"text\" data-jc-start=\"0.3\" data-jc-duration=\"4.2\" data-jc-track=\"5\" style=\"left:72px;top:805px;width:936px;height:104px;color:#F4F7F6;font-family:Inter;font-size:64px;font-weight:700;letter-spacing:-.035em;text-align:left;white-space:normal;display:grid;align-content:end\">FLOW ARRIVES.</div>\n <div data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-track&quot;,&quot;property&quot;:&quot;opacity&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-start&quot;,&quot;time&quot;:0,&quot;value&quot;:0,&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-opacity-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:1,&quot;easing&quot;:&quot;ease-in-out&quot;}]},{&quot;id&quot;:&quot;preset-entrance-position-track&quot;,&quot;property&quot;:&quot;position&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-position-start&quot;,&quot;time&quot;:0,&quot;value&quot;:{&quot;x&quot;:738,&quot;y&quot;:0,&quot;z&quot;:0},&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-position-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:{&quot;x&quot;:738,&quot;y&quot;:72,&quot;z&quot;:0},&quot;easing&quot;:&quot;ease-in-out&quot;}]}]}\" style=\"left:738px;top:72px;width:270px;height:78px;transform-style:preserve-3d\" data-jc-track=\"5\" data-jc-duration=\"4.5\" data-jc-start=\"0\" data-jc-name=\"Flow metric 3 INPUTS\" data-jc-kind=\"group\" data-jc-clip=\"\" id=\"group-1\"><div style=\"left:0px;top:0px;width:270px;height:78px;background:#11141CDD;border-radius:39px\" data-jc-track=\"5\" data-jc-duration=\"4.5\" data-jc-start=\"0\" data-jc-name=\"Metric card 3 INPUTS\" data-jc-kind=\"shape\" data-jc-clip=\"\" id=\"shape-1\"></div><div style=\"left:0px;top:0px;width:270px;height:78px;color:#FFB547;font-family:Inter;font-size:22px;font-weight:750;text-align:center;white-space:normal;background:transparent;display:grid;align-content:center\" data-jc-track=\"6\" data-jc-duration=\"4.38\" data-jc-start=\"0.12\" data-jc-name=\"Metric 3 INPUTS\" data-jc-kind=\"text\" data-jc-clip=\"\" id=\"text-1\">3 INPUTS</div></div><div id=\"s49-1-sub\" data-jc-clip=\"\" data-jc-name=\"Independent streams enter one shared field.\" data-jc-kind=\"text\" data-jc-start=\"0.45\" data-jc-duration=\"4.05\" data-jc-track=\"6\" style=\"left:72px;top:920px;width:880px;height:62px;color:#B8C7C8;font-family:Inter;font-size:26px;font-weight:500;letter-spacing:.01em;text-align:left;white-space:normal;display:grid;align-content:start\">Independent streams enter one shared field.</div>\n </section><section id=\"s49-2\" data-jc-clip=\"\" data-jc-name=\"02 · Constriction\" data-jc-kind=\"scene\" data-jc-start=\"4.5\" data-jc-duration=\"5\" data-jc-track=\"1\" data-jc-transition=\"zoom-through\" data-jc-transition-duration=\"0.45\" data-jc-transition-easing=\"ease-in-out\" style=\"left:0;top:0;width:1080px;height:1080px;overflow:hidden;background:#050708\">\n <div data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-track&quot;,&quot;property&quot;:&quot;opacity&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-start&quot;,&quot;time&quot;:0,&quot;value&quot;:0,&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-opacity-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:1,&quot;easing&quot;:&quot;ease-in-out&quot;}]},{&quot;id&quot;:&quot;preset-entrance-position-track&quot;,&quot;property&quot;:&quot;position&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-position-start&quot;,&quot;time&quot;:0,&quot;value&quot;:{&quot;x&quot;:918,&quot;y&quot;:72,&quot;z&quot;:0},&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-position-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:{&quot;x&quot;:738,&quot;y&quot;:72,&quot;z&quot;:0},&quot;easing&quot;:&quot;ease-in-out&quot;}]}]}\" style=\"left:738px;top:72px;width:270px;height:78px;transform-style:preserve-3d\" data-jc-track=\"5\" data-jc-duration=\"5\" data-jc-start=\"4.5\" data-jc-name=\"Flow metric 1 BOTTLENECK\" data-jc-kind=\"group\" data-jc-clip=\"\" id=\"group-2\"><div style=\"left:0px;top:0px;width:270px;height:78px;background:#11141CDD;border-radius:39px\" data-jc-track=\"5\" data-jc-duration=\"5\" data-jc-start=\"4.5\" data-jc-name=\"Metric card 1 BOTTLENECK\" data-jc-kind=\"shape\" data-jc-clip=\"\" id=\"shape-2\"></div><div style=\"left:0px;top:0px;width:270px;height:78px;color:#FFB547;font-family:Inter;font-size:22px;font-weight:750;text-align:center;white-space:normal;background:transparent;display:grid;align-content:center\" data-jc-track=\"6\" data-jc-duration=\"4.88\" data-jc-start=\"4.62\" data-jc-name=\"Metric 1 BOTTLENECK\" data-jc-kind=\"text\" data-jc-clip=\"\" id=\"text-2\">1 BOTTLENECK</div></div><video id=\"s49-2-media\" data-jc-clip=\"\" data-jc-name=\"02 · Constriction volumetric 3D\" data-jc-kind=\"video\" data-jc-start=\"4.5\" data-jc-duration=\"5\" data-jc-track=\"7\" data-jc-media-start=\"0\" data-jc-media-end=\"5\" data-jc-muted=\"true\" playsinline muted src=\"https://jsoncut.com/showcase/examples/liquidity-flow/assets/liquidity-constriction-3d.mp4\" style=\"left:0;top:0;width:1080px;height:1080px;object-fit:cover;filter:contrast(1.12) saturate(.86);transform-origin:center\" data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;s49-2-media-scale&quot;,&quot;property&quot;:&quot;scale&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;s49-2-media-scale-0&quot;,&quot;time&quot;:0,&quot;value&quot;:1.03,&quot;easing&quot;:&quot;linear&quot;},{&quot;id&quot;:&quot;s49-2-media-scale-1&quot;,&quot;time&quot;:5,&quot;value&quot;:1.1,&quot;easing&quot;:&quot;linear&quot;}]}]}\"></video>\n <div id=\"s49-2-shade\" data-jc-clip=\"\" data-jc-name=\"Gallery vignette\" data-jc-kind=\"shape\" data-jc-start=\"4.5\" data-jc-duration=\"5\" data-jc-track=\"8\" style=\"left:0;top:0;width:1080px;height:1080px;background:#050708CC\"></div>\n <div id=\"s49-2-index\" data-jc-clip=\"\" data-jc-name=\"Sequence index\" data-jc-kind=\"text\" data-jc-start=\"4.7\" data-jc-duration=\"4.8\" data-jc-track=\"9\" style=\"left:72px;top:72px;width:180px;height:42px;color:#F4B64C;font-family:Inter;font-size:22px;font-weight:700;letter-spacing:.12em;text-align:left;display:grid;align-content:center\">02 / FLOW</div>\n <div id=\"s49-2-label\" data-jc-clip=\"\" data-jc-name=\"PRESSURE CONCENTRATES.\" data-jc-kind=\"text\" data-jc-start=\"4.8\" data-jc-duration=\"4.7\" data-jc-track=\"10\" style=\"left:72px;top:805px;width:936px;height:104px;color:#F4F7F6;font-family:Inter;font-size:64px;font-weight:700;letter-spacing:-.035em;text-align:left;white-space:normal;display:grid;align-content:end\">PRESSURE CONCENTRATES.</div>\n <div id=\"s49-2-sub\" data-jc-clip=\"\" data-jc-name=\"The system narrows before it can release.\" data-jc-kind=\"text\" data-jc-start=\"4.95\" data-jc-duration=\"4.55\" data-jc-track=\"11\" style=\"left:72px;top:920px;width:880px;height:62px;color:#B8C7C8;font-family:Inter;font-size:26px;font-weight:500;letter-spacing:.01em;text-align:left;white-space:normal;display:grid;align-content:start\">The system narrows before it can release.</div>\n </section><section id=\"s49-3\" data-jc-clip=\"\" data-jc-name=\"03 · Redistribution\" data-jc-kind=\"scene\" data-jc-start=\"9.5\" data-jc-duration=\"4.5\" data-jc-track=\"1\" data-jc-transition=\"soft-blur\" data-jc-transition-duration=\"0.45\" data-jc-transition-easing=\"ease-in-out\" style=\"left:0;top:0;width:1080px;height:1080px;overflow:hidden;background:#050708\">\n <div data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-track&quot;,&quot;property&quot;:&quot;opacity&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-start&quot;,&quot;time&quot;:0,&quot;value&quot;:0,&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-opacity-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:1,&quot;easing&quot;:&quot;ease-in-out&quot;}]},{&quot;id&quot;:&quot;preset-entrance-position-track&quot;,&quot;property&quot;:&quot;position&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-position-start&quot;,&quot;time&quot;:0,&quot;value&quot;:{&quot;x&quot;:738,&quot;y&quot;:144,&quot;z&quot;:0},&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-position-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:{&quot;x&quot;:738,&quot;y&quot;:72,&quot;z&quot;:0},&quot;easing&quot;:&quot;ease-in-out&quot;}]}]}\" style=\"left:738px;top:72px;width:270px;height:78px;transform-style:preserve-3d\" data-jc-track=\"5\" data-jc-duration=\"4.5\" data-jc-start=\"9.5\" data-jc-name=\"Flow metric 3 ROUTES\" data-jc-kind=\"group\" data-jc-clip=\"\" id=\"group-3\"><div style=\"left:0px;top:0px;width:270px;height:78px;background:#11141CDD;border-radius:39px\" data-jc-track=\"5\" data-jc-duration=\"4.5\" data-jc-start=\"9.5\" data-jc-name=\"Metric card 3 ROUTES\" data-jc-kind=\"shape\" data-jc-clip=\"\" id=\"shape-3\"></div><div style=\"left:0px;top:0px;width:270px;height:78px;color:#FFB547;font-family:Inter;font-size:22px;font-weight:750;text-align:center;white-space:normal;background:transparent;display:grid;align-content:center\" data-jc-track=\"6\" data-jc-duration=\"4.38\" data-jc-start=\"9.62\" data-jc-name=\"Metric 3 ROUTES\" data-jc-kind=\"text\" data-jc-clip=\"\" id=\"text-3\">3 ROUTES</div></div><video id=\"s49-3-media\" data-jc-clip=\"\" data-jc-name=\"03 · Redistribution volumetric 3D\" data-jc-kind=\"video\" data-jc-start=\"9.5\" data-jc-duration=\"4.5\" data-jc-track=\"12\" data-jc-media-start=\"0.4\" data-jc-media-end=\"4.9\" data-jc-muted=\"true\" playsinline muted src=\"https://jsoncut.com/showcase/examples/liquidity-flow/assets/049-liquidity-glass-loop.mp4\" style=\"left:0;top:0;width:1080px;height:1080px;object-fit:cover;filter:contrast(1.12) saturate(.86);transform-origin:center\" data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;s49-3-media-scale&quot;,&quot;property&quot;:&quot;scale&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;s49-3-media-scale-0&quot;,&quot;time&quot;:0,&quot;value&quot;:1.03,&quot;easing&quot;:&quot;linear&quot;},{&quot;id&quot;:&quot;s49-3-media-scale-1&quot;,&quot;time&quot;:4.5,&quot;value&quot;:1.1,&quot;easing&quot;:&quot;linear&quot;}]}]}\"></video>\n <div id=\"s49-3-shade\" data-jc-clip=\"\" data-jc-name=\"Gallery vignette\" data-jc-kind=\"shape\" data-jc-start=\"9.5\" data-jc-duration=\"4.5\" data-jc-track=\"13\" style=\"left:0;top:0;width:1080px;height:1080px;background:#050708CC\"></div>\n <div id=\"s49-3-index\" data-jc-clip=\"\" data-jc-name=\"Sequence index\" data-jc-kind=\"text\" data-jc-start=\"9.7\" data-jc-duration=\"4.3\" data-jc-track=\"14\" style=\"left:72px;top:72px;width:180px;height:42px;color:#F4B64C;font-family:Inter;font-size:22px;font-weight:700;letter-spacing:.12em;text-align:left;display:grid;align-content:center\">03 / FLOW</div>\n <div id=\"s49-3-label\" data-jc-clip=\"\" data-jc-name=\"ROUTES REBALANCE.\" data-jc-kind=\"text\" data-jc-start=\"9.8\" data-jc-duration=\"4.2\" data-jc-track=\"15\" style=\"left:72px;top:805px;width:936px;height:104px;color:#F4F7F6;font-family:Inter;font-size:64px;font-weight:700;letter-spacing:-.035em;text-align:left;white-space:normal;display:grid;align-content:end\">ROUTES REBALANCE.</div>\n <div id=\"s49-3-sub\" data-jc-clip=\"\" data-jc-name=\"Capacity moves toward the point of need.\" data-jc-kind=\"text\" data-jc-start=\"9.95\" data-jc-duration=\"4.05\" data-jc-track=\"16\" style=\"left:72px;top:920px;width:880px;height:62px;color:#B8C7C8;font-family:Inter;font-size:26px;font-weight:500;letter-spacing:.01em;text-align:left;white-space:normal;display:grid;align-content:start\">Capacity moves toward the point of need.</div>\n </section><section id=\"s49-4\" data-jc-clip=\"\" data-jc-name=\"04 · Balanced reserve\" data-jc-kind=\"scene\" data-jc-start=\"14\" data-jc-duration=\"4\" data-jc-track=\"1\" data-jc-transition=\"cross-dissolve\" data-jc-transition-duration=\"0.45\" data-jc-transition-easing=\"ease-in-out\" style=\"left:0;top:0;width:1080px;height:1080px;overflow:hidden;background:#050708\">\n <div data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-track&quot;,&quot;property&quot;:&quot;opacity&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-opacity-start&quot;,&quot;time&quot;:0,&quot;value&quot;:0,&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-opacity-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:1,&quot;easing&quot;:&quot;ease-in-out&quot;}]},{&quot;id&quot;:&quot;preset-entrance-scale-track&quot;,&quot;property&quot;:&quot;scale&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;preset-entrance-scale-start&quot;,&quot;time&quot;:0,&quot;value&quot;:0.28,&quot;easing&quot;:&quot;ease-in-out&quot;},{&quot;id&quot;:&quot;preset-entrance-scale-end&quot;,&quot;time&quot;:0.8,&quot;value&quot;:1,&quot;easing&quot;:&quot;ease-in-out&quot;}]}]}\" style=\"left:738px;top:72px;width:270px;height:78px;transform-style:preserve-3d\" data-jc-track=\"5\" data-jc-duration=\"4\" data-jc-start=\"14\" data-jc-name=\"Flow metric 28% RESERVE\" data-jc-kind=\"group\" data-jc-clip=\"\" id=\"group-4\"><div style=\"left:0px;top:0px;width:270px;height:78px;background:#11141CDD;border-radius:39px\" data-jc-track=\"5\" data-jc-duration=\"4\" data-jc-start=\"14\" data-jc-name=\"Metric card 28% RESERVE\" data-jc-kind=\"shape\" data-jc-clip=\"\" id=\"shape-4\"></div><div style=\"left:0px;top:0px;width:270px;height:78px;color:#FFB547;font-family:Inter;font-size:22px;font-weight:750;text-align:center;white-space:normal;background:transparent;display:grid;align-content:center\" data-jc-track=\"6\" data-jc-duration=\"3.88\" data-jc-start=\"14.12\" data-jc-name=\"Metric 28% RESERVE\" data-jc-kind=\"text\" data-jc-clip=\"\" id=\"text-4\">28% RESERVE</div></div><video id=\"s49-4-media\" data-jc-clip=\"\" data-jc-name=\"04 · Balanced reserve volumetric 3D\" data-jc-kind=\"video\" data-jc-start=\"14\" data-jc-duration=\"4\" data-jc-track=\"17\" data-jc-media-start=\"1\" data-jc-media-end=\"5\" data-jc-muted=\"true\" playsinline muted src=\"https://jsoncut.com/showcase/examples/liquidity-flow/assets/049-liquidity-glass-loop.mp4\" style=\"left:0;top:0;width:1080px;height:1080px;object-fit:cover;filter:contrast(1.12) saturate(.86);transform-origin:center\" data-jc-animation=\"{&quot;tracks&quot;:[{&quot;id&quot;:&quot;s49-4-media-scale&quot;,&quot;property&quot;:&quot;scale&quot;,&quot;keyframes&quot;:[{&quot;id&quot;:&quot;s49-4-media-scale-0&quot;,&quot;time&quot;:0,&quot;value&quot;:1.03,&quot;easing&quot;:&quot;linear&quot;},{&quot;id&quot;:&quot;s49-4-media-scale-1&quot;,&quot;time&quot;:4,&quot;value&quot;:1.1,&quot;easing&quot;:&quot;linear&quot;}]}]}\"></video>\n <div id=\"s49-4-shade\" data-jc-clip=\"\" data-jc-name=\"Gallery vignette\" data-jc-kind=\"shape\" data-jc-start=\"14\" data-jc-duration=\"4\" data-jc-track=\"18\" style=\"left:0;top:0;width:1080px;height:1080px;background:#050708CC\"></div>\n <div id=\"s49-4-index\" data-jc-clip=\"\" data-jc-name=\"Sequence index\" data-jc-kind=\"text\" data-jc-start=\"14.2\" data-jc-duration=\"3.8\" data-jc-track=\"19\" style=\"left:72px;top:72px;width:180px;height:42px;color:#F4B64C;font-family:Inter;font-size:22px;font-weight:700;letter-spacing:.12em;text-align:left;display:grid;align-content:center\">04 / FLOW</div>\n <div id=\"s49-4-label\" data-jc-clip=\"\" data-jc-name=\"LIQUIDITY, IN BALANCE.\" data-jc-kind=\"text\" data-jc-start=\"14.3\" data-jc-duration=\"3.7\" data-jc-track=\"20\" style=\"left:72px;top:805px;width:936px;height:104px;color:#F4F7F6;font-family:Inter;font-size:64px;font-weight:700;letter-spacing:-.035em;text-align:left;white-space:normal;display:grid;align-content:end\">LIQUIDITY, IN BALANCE.</div>\n <div id=\"s49-4-sub\" data-jc-clip=\"\" data-jc-name=\"A spatial study in adaptive flow.\" data-jc-kind=\"text\" data-jc-start=\"14.45\" data-jc-duration=\"3.55\" data-jc-track=\"21\" style=\"left:72px;top:920px;width:880px;height:62px;color:#B8C7C8;font-family:Inter;font-size:26px;font-weight:500;letter-spacing:.01em;text-align:left;white-space:normal;display:grid;align-content:start\">A spatial study in adaptive flow.</div>\n </section>",
  "name": "049 — Liquidity Flow",
  "width": 1080,
  "format": "jsoncut-html",
  "height": 1080,
  "values": {},
  "version": 1,
  "duration": 18,
  "safeArea": {
    "top": 60,
    "left": 60,
    "right": 60,
    "bottom": 60
  },
  "variables": [],
  "customBlocks": [],
  "aspectVariants": [],
  "compositionKind": "video",
  "canvasBackground": "#050708",
  "editabilityTarget": "layered"
}
