{
  "id": "showcase-054-urban-heat-island",
  "css": "",
  "fps": 30,
  "html": "<section id=\"s54-1\" data-jc-clip=\"\" data-jc-name=\"01 · The paradox\" data-jc-kind=\"scene\" data-jc-start=\"0\" data-jc-duration=\"3.4\" data-jc-track=\"1\" style=\"left:0;top:0;width:1080px;height:1920px;overflow:hidden;background:#071723\"><video id=\"s54-v1\" data-jc-clip=\"\" data-jc-name=\"Sunset city aerial\" data-jc-kind=\"video\" data-jc-start=\"0\" data-jc-duration=\"3.4\" data-jc-track=\"2\" style=\"left:0;top:0;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.1) brightness(.68)\" src=\"https://jsoncut.com/showcase/examples/urban-heat-island/assets/aerial-city-rooftops-hot-summer-dusk-video-by-macourt-media.mp4\" data-jc-media-start=\"8\" data-jc-media-end=\"11.4\" data-jc-muted=\"true\" playsinline muted></video><div id=\"s54-veil1\" data-jc-clip=\"\" data-jc-name=\"Editorial navy veil\" data-jc-kind=\"shape\" data-jc-start=\"0\" data-jc-duration=\"3.4\" data-jc-track=\"3\" style=\"left:0px;top:0px;width:1080px;height:1920px;background:linear-gradient(180deg,rgba(9,22,34,.14),rgba(9,22,34,.88));\" ></div><div id=\"s54-kicker1\" data-jc-clip=\"\" data-jc-name=\"Editorial desk\" data-jc-kind=\"text\" data-jc-start=\"0.1\" data-jc-duration=\"3.3\" data-jc-track=\"4\" style=\"left:64px;top:70px;width:520px;height:42px;color:#FFD43B;font-family:Inter,sans-serif;font-size:24px;font-weight:800;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >FIELD NOTES / CLIMATE</div><div id=\"s54-title1\" data-jc-clip=\"\" data-jc-name=\"Hook headline\" data-jc-kind=\"text\" data-jc-start=\"0.25\" data-jc-duration=\"3.15\" data-jc-track=\"5\" style=\"left:64px;top:1260px;width:900px;height:330px;color:#FFFFFF;font-family:Inter,sans-serif;font-size:96px;font-weight:830;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >WHY DOES THE CITY<br>STAY HOT<br>AFTER SUNSET?</div><div id=\"s54-src1\" data-jc-clip=\"\" data-jc-name=\"Source line\" data-jc-kind=\"text\" data-jc-start=\"0.4\" data-jc-duration=\"3\" data-jc-track=\"6\" style=\"left:66px;top:1740px;width:890px;height:50px;color:#C8D3DA;font-family:Inter,sans-serif;font-size:24px;font-weight:500;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >Illustrative urban heat explainer · open footage</div></section><section id=\"s54-2\" data-jc-clip=\"\" data-jc-name=\"02 · Compare surfaces\" data-jc-kind=\"scene\" data-jc-start=\"3.4\" data-jc-duration=\"4.2\" data-jc-track=\"1\" data-jc-transition=\"push-left\" data-jc-transition-duration=\"0.42\" data-jc-transition-easing=\"ease-in-out\" style=\"left:0;top:0;width:1080px;height:1920px;overflow:hidden;background:#071723\"><video id=\"s54-v2\" data-jc-clip=\"\" data-jc-name=\"Pedestrians on hot street\" data-jc-kind=\"video\" data-jc-start=\"3.4\" data-jc-duration=\"4.2\" data-jc-track=\"7\" style=\"left:0;top:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.08) brightness(.62)\" src=\"https://jsoncut.com/showcase/examples/urban-heat-island/assets/city-street-heat-summer-people-walking-video-by-k.mp4\" data-jc-media-start=\"2\" data-jc-media-end=\"6.2\" data-jc-muted=\"true\" playsinline muted></video><div id=\"s54-veil2\" data-jc-clip=\"\" data-jc-name=\"Split comparison veil\" data-jc-kind=\"shape\" data-jc-start=\"3.4\" data-jc-duration=\"4.2\" data-jc-track=\"8\" style=\"left:0px;top:0px;width:1080px;height:1920px;background:linear-gradient(90deg,rgba(10,24,34,.1) 49.7%,#F4EADB 49.8%,#F4EADB 100%);\" ></div><div id=\"s54-band2\" data-jc-clip=\"\" data-jc-name=\"Comparison title band\" data-jc-kind=\"shape\" data-jc-start=\"3.45\" data-jc-duration=\"4.15\" data-jc-track=\"9\" style=\"left:34px;top:54px;width:1012px;height:144px;background:#071723E8;border-radius:0\"></div><div id=\"s54-q2\" data-jc-clip=\"\" data-jc-name=\"Comparison prompt\" data-jc-kind=\"text\" data-jc-start=\"3.55\" data-jc-duration=\"4.05\" data-jc-track=\"10\" style=\"left:70px;top:74px;width:940px;height:104px;color:#FFFFFF;font-family:Inter,sans-serif;font-size:42px;font-weight:820;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >SAME SUN. DIFFERENT SURFACES.</div><div id=\"s54-hot2\" data-jc-clip=\"\" data-jc-name=\"Asphalt temperature field\" data-jc-kind=\"shape\" data-jc-start=\"3.6\" data-jc-duration=\"4\" data-jc-track=\"10\" style=\"left:560px;top:330px;width:450px;height:930px;background:#FF5C35;border-radius:0\" ></div><div id=\"s54-hotnum2\" data-jc-clip=\"\" data-jc-name=\"Asphalt temperature\" data-jc-kind=\"text\" data-jc-start=\"3.8\" data-jc-duration=\"3.8\" data-jc-track=\"11\" style=\"left:610px;top:500px;width:360px;height:160px;color:#101923;font-family:Inter,sans-serif;font-size:118px;font-weight:850;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >47°C</div><div id=\"s54-hotlabel2\" data-jc-clip=\"\" data-jc-name=\"Asphalt label\" data-jc-kind=\"text\" data-jc-start=\"3.9\" data-jc-duration=\"3.7\" data-jc-track=\"12\" style=\"left:612px;top:665px;width:360px;height:86px;color:#101923;font-family:Inter,sans-serif;font-size:30px;font-weight:800;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >DARK ASPHALT</div><div id=\"s54-left2\" data-jc-clip=\"\" data-jc-name=\"Street context\" data-jc-kind=\"text\" data-jc-start=\"3.9\" data-jc-duration=\"3.7\" data-jc-track=\"13\" style=\"left:60px;top:1510px;width:430px;height:180px;color:#FFFFFF;font-family:Inter,sans-serif;font-size:52px;font-weight:800;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >SHADE LEAVES.<br>HEAT STAYS.</div></section><section id=\"s54-3\" data-jc-clip=\"\" data-jc-name=\"03 · Explain the storage\" data-jc-kind=\"scene\" data-jc-start=\"7.6\" data-jc-duration=\"5\" data-jc-track=\"1\" data-jc-transition=\"diagonal-wipe\" data-jc-transition-duration=\"0.42\" data-jc-transition-easing=\"ease-in-out\" style=\"left:0;top:0;width:1080px;height:1920px;overflow:hidden;background:#071723\"><video id=\"s54-v3\" data-jc-clip=\"\" data-jc-name=\"Urban aerial texture\" data-jc-kind=\"video\" data-jc-start=\"7.6\" data-jc-duration=\"5\" data-jc-track=\"14\" style=\"left:0;top:0;width:100%;height:100%;object-fit:cover;filter:saturate(.45) contrast(1.15) brightness(.42)\" src=\"https://jsoncut.com/showcase/examples/urban-heat-island/assets/aerial-city-rooftops-hot-summer-dusk-video-by-macourt-media.mp4\" data-jc-media-start=\"18\" data-jc-media-end=\"23\" data-jc-muted=\"true\" playsinline muted></video><div id=\"s54-grid3\" data-jc-clip=\"\" data-jc-name=\"Heat-map overlay\" data-jc-kind=\"shape\" data-jc-start=\"7.6\" data-jc-duration=\"5\" data-jc-track=\"15\" style=\"left:0px;top:0px;width:1080px;height:1920px;background:radial-gradient(circle at 32% 35%,rgba(255,84,45,.8),transparent 20%),radial-gradient(circle at 70% 55%,rgba(255,201,50,.7),transparent 24%),linear-gradient(180deg,rgba(6,17,27,.12),rgba(6,17,27,.8));\" ></div><div id=\"s54-head3\" data-jc-clip=\"\" data-jc-name=\"Mechanism headline\" data-jc-kind=\"text\" data-jc-start=\"7.75\" data-jc-duration=\"4.85\" data-jc-track=\"16\" style=\"left:60px;top:70px;width:960px;height:180px;color:#FFFFFF;font-family:Inter,sans-serif;font-size:62px;font-weight:830;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >CONCRETE STORES THE DAY.</div><div id=\"s54-bar31\" data-jc-clip=\"\" data-jc-name=\"Heat storage bar asphalt\" data-jc-kind=\"shape\" data-jc-start=\"8\" data-jc-duration=\"4.6\" data-jc-track=\"17\" style=\"left:70px;top:1390px;width:850px;height:44px;background:#FF5C35;\" ></div><div id=\"s54-bar32\" data-jc-clip=\"\" data-jc-name=\"Heat storage bar trees\" data-jc-kind=\"shape\" data-jc-start=\"8.3\" data-jc-duration=\"4.3\" data-jc-track=\"18\" style=\"left:70px;top:1490px;width:430px;height:44px;background:#79CBA8;\" ></div><div id=\"s54-lab31\" data-jc-clip=\"\" data-jc-name=\"Asphalt scale label\" data-jc-kind=\"text\" data-jc-start=\"8.05\" data-jc-duration=\"4.55\" data-jc-track=\"19\" style=\"left:70px;top:1322px;width:820px;height:56px;color:#FFFFFF;font-family:Inter,sans-serif;font-size:26px;font-weight:750;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >ASPHALT · SLOW RELEASE</div><div id=\"s54-lab32\" data-jc-clip=\"\" data-jc-name=\"Tree scale label\" data-jc-kind=\"text\" data-jc-start=\"8.35\" data-jc-duration=\"4.25\" data-jc-track=\"20\" style=\"left:70px;top:1422px;width:820px;height:56px;color:#FFFFFF;font-family:Inter,sans-serif;font-size:26px;font-weight:750;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >TREE CANOPY · FASTER COOLING</div><div id=\"s54-note3\" data-jc-clip=\"\" data-jc-name=\"Editorial annotation\" data-jc-kind=\"text\" data-jc-start=\"8.6\" data-jc-duration=\"4\" data-jc-track=\"21\" style=\"left:70px;top:1630px;width:880px;height:130px;color:#D5E1E6;font-family:Inter,sans-serif;font-size:31px;font-weight:580;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >Less shade + more thermal mass = a warmer night.</div></section><section id=\"s54-4\" data-jc-clip=\"\" data-jc-name=\"04 · Actionable resolution\" data-jc-kind=\"scene\" data-jc-start=\"12.6\" data-jc-duration=\"5.4\" data-jc-track=\"1\" data-jc-transition=\"circle-reveal\" data-jc-transition-duration=\"0.42\" data-jc-transition-easing=\"ease-in-out\" style=\"left:0;top:0;width:1080px;height:1920px;overflow:hidden;background:#071723\"><video id=\"s54-v4\" data-jc-clip=\"\" data-jc-name=\"Tree-lined street\" data-jc-kind=\"video\" data-jc-start=\"12.6\" data-jc-duration=\"5.4\" data-jc-track=\"22\" style=\"left:0;top:0;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.05) brightness(.64)\" src=\"https://jsoncut.com/showcase/examples/urban-heat-island/assets/city-street-heat-summer-people-walking-video-by-k.mp4\" data-jc-media-start=\"8\" data-jc-media-end=\"13.4\" data-jc-muted=\"true\" playsinline muted></video><div id=\"s54-veil4\" data-jc-clip=\"\" data-jc-name=\"Resolution veil\" data-jc-kind=\"shape\" data-jc-start=\"12.6\" data-jc-duration=\"5.4\" data-jc-track=\"23\" style=\"left:0px;top:0px;width:1080px;height:1920px;background:linear-gradient(180deg,rgba(7,24,30,.05),rgba(7,24,30,.86));\" ></div><div id=\"s54-title4\" data-jc-clip=\"\" data-jc-name=\"Resolution headline\" data-jc-kind=\"text\" data-jc-start=\"12.8\" data-jc-duration=\"5.2\" data-jc-track=\"24\" style=\"left:60px;top:1070px;width:930px;height:240px;color:#FFFFFF;font-family:Inter,sans-serif;font-size:86px;font-weight:850;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >COOL THE SURFACE,<br>NOT JUST THE AIR.</div><div id=\"s54-list4\" data-jc-clip=\"\" data-jc-name=\"Resolution evidence\" data-jc-kind=\"text\" data-jc-start=\"13.1\" data-jc-duration=\"4.9\" data-jc-track=\"25\" style=\"left:65px;top:1360px;width:870px;height:230px;color:#DDE9E3;font-family:Inter,sans-serif;font-size:34px;font-weight:720;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >01  SHADE STREETS<br>02  LIGHTEN ROOFS<br>03  OPEN SOIL</div><div id=\"s54-end4\" data-jc-clip=\"\" data-jc-name=\"Closing source note\" data-jc-kind=\"text\" data-jc-start=\"13.4\" data-jc-duration=\"4.6\" data-jc-track=\"26\" style=\"left:65px;top:1740px;width:850px;height:70px;color:#FFD43B;font-family:Inter,sans-serif;font-size:24px;font-weight:800;line-height:1.02;letter-spacing:-.025em;text-align:left;white-space:normal;display:grid;align-content:center;\" >URBAN HEAT IS A DESIGN PROBLEM.</div></section>",
  "name": "054 — Why Cities Stay Hot",
  "width": 1080,
  "format": "jsoncut-html",
  "height": 1920,
  "values": {},
  "version": 1,
  "duration": 18,
  "safeArea": {
    "top": 60,
    "left": 60,
    "right": 60,
    "bottom": 60
  },
  "variables": [],
  "customBlocks": [],
  "aspectVariants": [],
  "compositionKind": "video",
  "canvasBackground": "#071723",
  "editabilityTarget": "layered"
}