demos/reduced-motion/index.html

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Reduced motion</title>

  <!-- Calcite import -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>

  <!-- ArcGIS Maps SDK for JavaScript imports -->
  <script src="https://js.arcgis.com/4.32/"></script>
  <link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
  <script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>

  <!-- Demo imports -->
  <script src="./app.js" defer></script>
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <calcite-shell content-behind>
    <calcite-navigation slot="header" id="nav">
      <calcite-navigation-logo href="#" icon="accessibility" alt="Application logo" slot="logo"
        heading="2025 Esri Developer & Technology Summit - Reduced Motion"
        description="Reduced Motion"></calcite-navigation-logo>
      <calcite-label slot="content-end" layout="inline">
        Disable animation
        <calcite-switch id="animationControl"></calcite-switch>
      </calcite-label>
    </calcite-navigation>

    <arcgis-map id="map" item-id="03c4fa085ece410dadd9aa6e44130508">
      <arcgis-home position="top-left"></arcgis-home>
    </arcgis-map>
  </calcite-shell>

</body>

</html>