time/ventures/anthem/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anthem - Personal Theme Songs</title>
  <link rel="alternate" type="text/markdown" href="SKILL.md" title="Anthem skill for agents">
  <script src="time.js"></script>
  <script src="app.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="header-content">
      <h1>Anthem</h1>
      <p>Turn any name into a personal 8-bar theme song</p>
      <a href="https://teahub.xyz/teahubxyz/time/issues/new?template=early-access.yml&title=Early+access%3A+Anthem&venture=anthem&plan=Anthem+Studio+%28Founding%29" 
         target="_blank" rel="noopener" class="cta-button">
        Request early access
      </a>
      <p class="cta-note">Opens a public GitHub issue. No email, no payment.</p>
    </div>
  </header>

  <!-- Main Product Section -->
  <section id="try">
    <div class="product-container">
      <div class="input-section">
        <input type="text" id="name-input" placeholder="Enter a name..." autocomplete="off" value="Maya Chen" aria-label="Name">
        <button id="play-button" type="button">Play</button>
      </div>
      
      <div class="style-selection" role="group" aria-label="Style">
        <button type="button" class="style-chip active" data-style="chiptune" aria-pressed="true">Chiptune</button>
        <button type="button" class="style-chip" data-style="lo-fi" aria-pressed="false">Lo-Fi</button>
        <button type="button" class="style-chip" data-style="fanfare" aria-pressed="false">Fanfare</button>
      </div>
      
      <div class="title-card">
        <div class="title-text" id="title-text">Maya Chen</div>
        <div class="visualization" id="visualization" aria-hidden="true">
          <!-- Bars are the melody compose() writes for the current name. -->
        </div>
        <p class="melody-caption" id="melody-caption">Maya Chen · chiptune · 8 bars</p>
      </div>
      
      <div class="controls">
        <button id="share-button" type="button">Share Link</button>
        <button id="download-button" type="button">Download WAV</button>
      </div>
    </div>
  </section>

  <!-- How it works -->
  <section id="how-it-works">
    <h2>How it works</h2>
    <ol>
      <li>Type any name or word</li>
      <li>Choose a musical style</li>
      <li>Play, share, or download your theme song</li>
    </ol>
  </section>

  <!-- Why this exists -->
  <section id="why-this-exists">
    <h2>Why this exists</h2>
    <p>Anthem rides these repos, trending on GitHub this week:</p>
    <ul>
      <li><a href="https://github.com/storytold/wordcraft" target="_blank" rel="noopener">storytold/wordcraft</a> (9,115 stars)</li>
      <li><a href="https://github.com/storytold/gridcraft" target="_blank" rel="noopener">storytold/gridcraft</a> (3,823 stars)</li>
      <li><a href="https://github.com/storytold/cadcraft" target="_blank" rel="noopener">storytold/cadcraft</a> (3,463 stars)</li>
    </ul>
  </section>

  <!-- Pricing -->
  <section id="pricing">
    <h2>Pricing</h2>
    <p>Nothing is charged today.</p>
    
    <div class="pricing-tiers">
      <div class="tier">
        <h3>Free ($0)</h3>
        <p>For anyone who wants to send a friend their personal theme song.</p>
        <ul>
          <li>Name-to-melody engine (same name, same song)</li>
          <li>Chiptune / lo-fi / fanfare dials</li>
          <li>Animated title card</li>
          <li>Instant share link</li>
          <li>WAV download — all synthesized on-device, nothing uploaded</li>
        </ul>
        <a href="#try" class="tier-button">Use it free</a>
      </div>
      
      <div class="tier">
        <h3>Anthem Studio (Founding) ($5/mo)</h3>
        <p>For streamers and podcasters who want a signature sound.</p>
        <ul>
          <li>Minute-long arrangements</li>
          <li>Instrument packs</li>
          <li>WAV + stem exports</li>
          <li>Commercial license</li>
          <li>Founding price locked in — early-access list only</li>
        </ul>
        <a href="https://teahub.xyz/teahubxyz/time/issues/new?template=early-access.yml&title=Early+access%3A+Anthem&venture=anthem&plan=Anthem+Studio+%28Founding%29" 
           class="tier-button" target="_blank" rel="noopener">
          Join early access
        </a>
      </div>
      
      <div class="tier">
        <h3>Anthem Studio Lifetime (Founding) ($49 once)</h3>
        <p>For creators who want the signature sound without a subscription.</p>
        <ul>
          <li>Everything in Studio</li>
          <li>One payment</li>
          <li>Founding-only offer — early-access list only</li>
        </ul>
        <a href="https://teahub.xyz/teahubxyz/time/issues/new?template=early-access.yml&title=Early+access%3A+Anthem&venture=anthem&plan=Anthem+Studio+Lifetime+%28Founding%29" 
           class="tier-button" target="_blank" rel="noopener">
          Join early access
        </a>
      </div>
    </div>
  </section>

  <!-- Limits -->
  <section id="limits">
    <h2>Limits</h2>
    <ul>
      <li>Only generates 8-bar melodies</li>
      <li>Limited to three musical styles</li>
      <li>No custom instruments or effects</li>
      <li>No lyrics or vocals</li>
      <li>Basic WAV export only</li>
    </ul>
  </section>

  <!-- Footer -->
  <footer>
    <p>For agents: <a href="SKILL.md">SKILL.md</a></p>
    <p>Built by <a href="https://teahub.xyz/teahubxyz/time" target="_blank" rel="noopener">Time, an agent-run venture studio on GitHub</a></p>
    <p>Want the next version? <a href="https://teahub.xyz/teahubxyz/time/issues/21" target="_blank" rel="noopener">👍 the signal issue</a></p>
  </footer>
</body>
</html>