gaming.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Game stream clips with webcam and game layouts | Clips Kitty</title>
    <meta
      name="description"
      content="Turn game streams and reaction videos into vertical clips with the streamer's webcam and the game together, in eleven layouts. Free, open source, and it runs on your own Windows PC."
    />
    <link rel="canonical" href="https://colingpt9.github.io/clips-studio/gaming.html" />
    <link rel="icon" href="assets/mascot.png" />
    <link rel="stylesheet" href="styles.css" />
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="Clips Kitty" />
    <meta property="og:url" content="https://colingpt9.github.io/clips-studio/gaming.html" />
    <meta property="og:title" content="Game stream clips with the webcam and the game together" />
    <meta
      property="og:description"
      content="Eleven layouts, picked on the stream's own frames, and clip picking that counts in-game moments and the reactions to them. Free and open source."
    />
    <meta property="og:image" content="https://colingpt9.github.io/clips-studio/assets/mascot.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@graph": [
          {
            "@type": "WebPage",
            "name": "Game stream clips with the webcam and the game together",
            "url": "https://colingpt9.github.io/clips-studio/gaming.html",
            "description": "Turn game streams and reaction videos into vertical clips with the streamer's webcam and the game together, in eleven layouts. Free, open source, and it runs on your own Windows PC.",
            "inLanguage": "en",
            "datePublished": "2026-10-01",
            "dateModified": "2026-10-01",
            "about": {
              "@type": "SoftwareApplication",
              "name": "Clips Kitty",
              "applicationCategory": "MultimediaApplication",
              "operatingSystem": "Windows 10, Windows 11",
              "license": "https://www.gnu.org/licenses/agpl-3.0.html",
              "isAccessibleForFree": true,
              "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
            }
          },
          {
            "@type": "BreadcrumbList",
            "itemListElement": [
              {
                "@type": "ListItem",
                "position": 1,
                "name": "Clips Kitty",
                "item": "https://colingpt9.github.io/clips-studio/"
              },
              {
                "@type": "ListItem",
                "position": 2,
                "name": "Game stream clips",
                "item": "https://colingpt9.github.io/clips-studio/gaming.html"
              }
            ]
          },
          {
            "@type": "FAQPage",
            "mainEntity": [
              {
                "@type": "Question",
                "name": "Can Clips Kitty turn a game stream into Shorts?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "Yes. Tick Gaming / Reaction and pick a layout on the stream's own frames: the streamer's webcam and the game go together in a 9:16 clip, in one of eleven layouts. It works from a Twitch or Kick VOD, a YouTube link or a file on your PC."
                }
              },
              {
                "@type": "Question",
                "name": "How does it pick the moments in a game stream?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "It judges what is said as on any stream, and counts in-game moments too: what a highlight is in that kind of game, chat's reactions on Twitch VODs and YouTube live replays, and sudden jumps in the streamer's voice. Menus, queues and loading screens score low."
                }
              },
              {
                "@type": "Question",
                "name": "Does it work for reaction videos?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "Yes. The video being reacted to takes the game's place, and the people in it are never taken for the streamer. Re-uploading someone else's footage is still a copyright question worth settling yourself."
                }
              },
              {
                "@type": "Question",
                "name": "Does it support VTubers?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "No. The framing looks for a real person on camera, and an avatar is never taken for the streamer, so a VTuber stream gets the game on its own."
                }
              },
              {
                "@type": "Question",
                "name": "What if my stream is already vertical?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "Tick Vertical Live and set its content to Gaming / reaction. The stream keeps its own 9:16 layout, and its moments are found the gaming way."
                }
              },
              {
                "@type": "Question",
                "name": "Is it free?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "Yes. Clips Kitty is free and open source under AGPL-3.0, with no paid tier, no watermark and no clip cap. It runs on your own Windows PC."
                }
              }
            ]
          }
        ]
      }
    </script>
  </head>
  <body>
    <header class="site">
      <div class="wrap">
        <a class="brand" href="index.html">
          <img src="assets/mascot.png" alt="" />
          <span>
            <span class="name">Clips <span>Kitty</span></span>
            <span class="tagline">local-first AI clipping</span>
          </span>
        </a>
        <nav class="site" aria-label="Main">
          <a href="index.html">Home</a>
          <a href="twitch.html">Twitch</a>
          <a href="kick.html">Kick</a>
          <a href="youtube.html">YouTube</a>
          <a href="gaming.html" aria-current="page">Gaming</a>
          <a href="sports.html">Sports</a>
          <a href="local-vs-cloud.html">Local vs cloud</a>
          <a href="alternatives.html">Compare</a>
          <a href="opus-clip-alternative.html">vs Opus Clip</a>
          <a href="descript-alternative.html">vs Descript</a>
          <a href="roadmap.html">Roadmap</a>
          <a href="changelog.html">Changelog</a>
          <a href="developers.html">Developers</a>
          <a href="https://github.com/ColinGPT9/clips-studio" target="_blank" rel="noopener noreferrer">GitHub</a>
          <a class="donate" href="https://paypal.me/clipsstudio" target="_blank" rel="noopener noreferrer">Donate</a>
        </nav>
      </div>
    </header>

    <main>
      <div class="hero">
        <div class="wrap">
          <span class="eyebrow">Gaming / Reaction</span>
          <h1>Game stream clips with the webcam and the game together</h1>
          <p class="lead">
            Cropping a game stream to 9:16 the usual way follows the biggest face, and on a game
            stream that can be a game character, a portrait, or the person in the video being
            reacted to. Gaming / Reaction lays out the streamer's webcam and the game together
            instead, in the layout you choose.
          </p>
          <p class="lead">
            It also picks the moments the way a game stream needs: a kill streak, a boss going
            down or a goal counts, and so does the reaction to it, even when little is said.
          </p>
        </div>
      </div>

      <section id="support">
        <div class="wrap">
          <div class="support">
            <div class="body">
              <p class="title">Clips Kitty is free &amp; open source ❤️</p>
              <p>
                It runs entirely on your PC with no fees. Please consider donating to help
                cover development costs and keep it free for everyone.
              </p>
            </div>
            <a class="btn btn-accent" href="https://paypal.me/clipsstudio" target="_blank" rel="noopener noreferrer">Donate to Clips Kitty</a>
          </div>
        </div>
      </section>

      <section>
        <div class="wrap">
          <h2>Eleven layouts</h2>
          <p class="section-lead">
            You pick the layout on cards that show the stream's own frame in each one, so you see
            the result before anything is processed.
          </p>
          <div class="table-scroll">
            <table>
              <thead>
                <tr>
                  <th>Layout</th>
                  <th>What it is</th>
                </tr>
              </thead>
              <tbody>
                <tr><td><strong>Split</strong></td><td>Webcam band on top, the game fills the rest. You set the webcam's share.</td></tr>
                <tr><td><strong>Basecam</strong></td><td>Split with the game on top and the webcam at the bottom.</td></tr>
                <tr><td><strong>Half</strong></td><td>Webcam and game, 50/50.</td></tr>
                <tr><td><strong>Fullscreen</strong></td><td>The game cropped to fill the clip, no webcam.</td></tr>
                <tr><td><strong>Blurred</strong></td><td>The whole game in the middle, on a blurred copy of itself.</td></tr>
                <tr><td><strong>Small facecam</strong></td><td>The game fills the clip with a small webcam near the top, moved and resized on the preview.</td></tr>
                <tr><td><strong>Circle facecam</strong></td><td>The same with a round webcam.</td></tr>
                <tr><td><strong>Game UI</strong></td><td>Webcam on top, the game below, and a piece of the game's interface (a scoreboard, a map, a timer) as a layer you place.</td></tr>
                <tr><td><strong>Mosaic</strong></td><td>Webcam and a game UI panel side by side on top, the game below.</td></tr>
                <tr><td><strong>Dual facecam</strong></td><td>The game fills the clip, with two round webcams near the top for duo streams.</td></tr>
                <tr><td><strong>Duo split</strong></td><td>Two webcams side by side on top, the game below.</td></tr>
              </tbody>
            </table>
          </div>
          <p class="note">
            The game is either zoomed to fill its part of the clip or shown whole, with no black
            bars, and the streamer's face is kept clear of the platform's top bar. A layout can
            be remembered for a creator, so their next videos, and a watched channel's, start
            from it, and any one clip's layout can be changed later in the clip editor.
          </p>
        </div>
      </section>

      <section>
        <div class="wrap">
          <h2>How it finds the moments in a game stream</h2>
          <p class="section-lead">
            Standard clip picking judges talk: hooks, opinions, quotable lines. On a game stream
            the moment is usually something that happened in the game and the reaction to it.
          </p>
          <ul class="ticks">
            <li>
              <strong>The game.</strong> Twitch says which game is played over which part of a
              stream, Kick gives its category, and a YouTube video's title and tags often name it.
              About 150 games are mapped to a kind of game, with what a highlight is in each.
            </li>
            <li>
              <strong>Chat's reactions.</strong> On Twitch VODs and YouTube live replays, a burst
              of messages far above the stream's own rate marks a moment, and what chat says names
              it: hype, laughing, surprise, a fail, or "clip it".
            </li>
            <li>
              <strong>The streamer's voice.</strong> A sudden shout, laugh or scream, measured
              against their own usual talking rather than the game's noise.
            </li>
            <li>
              <strong>The AI is told.</strong> It knows it is reading a gaming or reaction
              stream and which game, judges what is said as on any stream, and scores menus,
              queues, loading screens and donation readouts low.
            </li>
            <li>
              <strong>Characters aren't the streamer.</strong> People and characters in the game,
              or in a video being reacted to, are never taken for the person streaming.
            </li>
          </ul>
        </div>
      </section>

      <section>
        <div class="wrap">
          <h2>Streams that are already vertical</h2>
          <p class="section-lead">
            A live streamed 9:16 already has its layout. Tick <strong>Vertical Live</strong> and
            set its content to <strong>Gaming / reaction</strong>: the stream keeps its own
            layout, and the moments are found the gaming way.
          </p>
        </div>
      </section>

      <section>
        <div class="wrap">
          <h2>Known limits</h2>
          <ul class="ticks">
            <li class="weak">
              <strong>VTubers aren't supported.</strong> The framing looks for a real person on
              camera; with an avatar, the game fills the screen instead.
            </li>
            <li class="weak">
              <strong>One layout per clip.</strong> A clip that moves between the game and a
              full-screen camera keeps the layout most of the clip shows.
            </li>
            <li class="weak">
              <strong>Some boxes are drawn by hand.</strong> The game UI box and a second webcam
              are drawn on the preview; nothing looks for them on its own.
            </li>
            <li class="weak">
              <strong>Separate recordings aren't supported yet.</strong> The game and the webcam
              have to be in the same video.
            </li>
          </ul>
        </div>
      </section>

      <section>
        <div class="wrap">
          <h2>Questions</h2>

          <h3>Can Clips Kitty turn a game stream into Shorts?</h3>
          <p>
            Yes. Tick Gaming / Reaction and pick a layout on the stream's own frames: the
            streamer's webcam and the game go together in a 9:16 clip, in one of eleven layouts.
            It works from a Twitch or Kick VOD, a YouTube link or a file on your PC.
          </p>

          <h3>How does it pick the moments in a game stream?</h3>
          <p>
            It judges what is said as on any stream, and counts in-game moments too: what a
            highlight is in that kind of game, chat's reactions on Twitch VODs and YouTube live
            replays, and sudden jumps in the streamer's voice. Menus, queues and loading screens
            score low.
          </p>

          <h3>Does it work for reaction videos?</h3>
          <p>
            Yes. The video being reacted to takes the game's place, and the people in it are
            never taken for the streamer. Re-uploading someone else's footage is still a
            copyright question worth settling yourself.
          </p>

          <h3>Does it support VTubers?</h3>
          <p>
            No. The framing looks for a real person on camera, and an avatar is never taken for
            the streamer, so a VTuber stream gets the game on its own.
          </p>

          <h3>What if my stream is already vertical?</h3>
          <p>
            Tick Vertical Live and set its content to Gaming / reaction. The stream keeps its own
            9:16 layout, and its moments are found the gaming way.
          </p>

          <h3>Is it free?</h3>
          <p>
            Yes. Clips Kitty is free and open source under AGPL-3.0, with no paid tier, no
            watermark and no clip cap. It runs on your own Windows PC.
          </p>
        </div>
      </section>

      <section>
        <div class="wrap">
          <h2>Try it on one stream</h2>
          <p class="section-lead">
            Run one VOD through it, pick a layout, and see whether the moments it picks are the
            ones your viewers would clip.
          </p>
          <div class="cta-row">
            <a class="btn btn-accent" href="https://github.com/ColinGPT9/clips-studio/releases/download/v2.0.0/ClipsKitty-Web-Setup-2.0.0.exe" target="_blank" rel="noopener noreferrer">Download for Windows</a>
            <a class="btn btn-ghost" href="https://apps.microsoft.com/detail/9NB6XT7DSQZZ" target="_blank" rel="noopener noreferrer">Get it from Microsoft Store</a>
            <a class="btn btn-ghost" href="twitch.html">Clipping Twitch</a>
            <a class="btn btn-ghost" href="index.html">Back to the overview</a>
          </div>
        </div>
      </section>
    </main>

    <footer class="site">
      <div class="wrap cols">
        <span>Free and open source.</span>
        <nav aria-label="Footer">
          <a href="index.html">Home</a>
          <a href="roadmap.html">Roadmap</a>
          <a href="changelog.html">Changelog</a>
          <a href="developers.html">Build a plugin</a>
          <a href="privacy.html">Privacy</a>
          <a href="https://github.com/ColinGPT9/clips-studio" target="_blank" rel="noopener noreferrer">★ Star it</a>
          <a href="https://github.com/ColinGPT9/clips-studio/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contribute</a>
          <a href="https://github.com/ColinGPT9/clips-studio/issues" target="_blank" rel="noopener noreferrer">Issues</a>
          <a href="https://paypal.me/clipsstudio" target="_blank" rel="noopener noreferrer">Donate</a>
        </nav>
      </div>
    </footer>
    <script src="analytics.js"></script>
    <script src="donate.js"></script>
  </body>
</html>