heygen-com__hyperframes/registry/examples/vscode-theme-visualizer/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <title>VS Code Theme Sequence</title>
    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
    <style>
      html,
      body {
        margin: 0;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: #000000;
      }

      #vscode-theme-sequence {
        position: relative;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: #000000;
      }
    </style>
  </head>
  <body>
    <div
      id="vscode-theme-sequence"
      data-composition-id="vscode-theme-sequence"
      data-start="0"
      data-width="1920"
      data-height="1080"
    >
      <div
        id="clip-light-2026"
        data-composition-id="vscode-light-2026"
        data-composition-src="compositions/light-2026.html"
        data-start="0"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-dark-2026"
        data-composition-id="vscode-dark-2026"
        data-composition-src="compositions/dark-2026.html"
        data-start="11"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-dark-plus"
        data-composition-id="vscode-dark-plus"
        data-composition-src="compositions/dark-plus.html"
        data-start="22"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-dark-modern"
        data-composition-id="vscode-dark-modern"
        data-composition-src="compositions/dark-modern.html"
        data-start="33"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-light-plus"
        data-composition-id="vscode-light-plus"
        data-composition-src="compositions/light-plus.html"
        data-start="44"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-light-modern"
        data-composition-id="vscode-light-modern"
        data-composition-src="compositions/light-modern.html"
        data-start="55"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-visual-studio-dark"
        data-composition-id="vscode-visual-studio-dark"
        data-composition-src="compositions/visual-studio-dark.html"
        data-start="66"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-visual-studio-light"
        data-composition-id="vscode-visual-studio-light"
        data-composition-src="compositions/visual-studio-light.html"
        data-start="77"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-high-contrast"
        data-composition-id="vscode-high-contrast"
        data-composition-src="compositions/high-contrast.html"
        data-start="88"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-high-contrast-light"
        data-composition-id="vscode-high-contrast-light"
        data-composition-src="compositions/high-contrast-light.html"
        data-start="99"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-solarized-light"
        data-composition-id="vscode-solarized-light"
        data-composition-src="compositions/solarized-light.html"
        data-start="110"
        data-duration="11"
        data-track-index="1"
      ></div>
      <div
        id="clip-monokai"
        data-composition-id="vscode-monokai"
        data-composition-src="compositions/monokai.html"
        data-start="121"
        data-duration="11"
        data-track-index="1"
      ></div>
      <script>
        hyperframesAnime.register(
          "vscode-theme-sequence",
          anime.createTimeline({ autoplay: false }),
          { labels: {} },
        );
      </script>
    </div>
  </body>
</html>