superhero.pw

<h1 class="font-display text-display-lg text-on-surface mb-6 animate-fade-in-up" style="animation-delay: 0.1s;">
  Write. Plan.<br>
  <span style="background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Produce.</span>
</h1>

<p class="font-body text-body-lg text-on-surface-variant max-w-2xl mb-10 animate-fade-in-up" style="animation-delay: 0.2s;">
  The focused workspace for comic series, episodic scripts, and long-form storytelling. From character bibles to page layouts — everything lives in one place.
</p>

<div class="flex flex-wrap gap-4 animate-fade-in-up" style="animation-delay: 0.3s;">
  {{ with .Params.cta_text }}
  <a href="{{ $.Params.cta_link | default "#" }}" class="btn-accent btn-lg">
    {{ . }}
  </a>
  {{ end }}
  {{ with .Params.secondary_cta_text }}
  <a href="{{ $.Params.secondary_cta_link | default "#" }}" class="btn-secondary btn-lg">
    {{ . }}
  </a>
  {{ end }}
</div>

{{/* App preview badge row */}}
<div class="flex items-center gap-6 mt-12 animate-fade-in-up" style="animation-delay: 0.4s;">
  <div class="flex items-center gap-2">
    <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: var(--gradient-accent);">
      <svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
    </div>
    <span class="font-display text-title-sm text-on-surface font-bold italic tracking-tight">superhero<span class="text-accent">.pw</span></span>
  </div>
</div>

{{/* ==================== FEATURES SECTION ==================== */}}

Features

Built for Storytellers

Everything you need to craft, organize, and produce your series — from first draft to final page.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {{/* Script Editor */}}
  <div class="card-gradient group">
    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background: rgba(255, 181, 156, 0.15);">
      <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
    </div>
    <h3 class="font-display text-title-lg text-on-surface mb-2">Script Editor</h3>
    <p class="font-body text-body-sm text-on-surface-variant mb-4">A distraction-free writing environment designed for dialogue-heavy creative workflows.</p>
    <div class="flex flex-wrap gap-2">
      <span class="chip chip-primary">Writing</span>
      <span class="chip chip-primary">Editor</span>
    </div>
  </div>

  {{/* Episode Manager */}}
  <div class="card-gradient group">
    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background: rgba(167, 200, 255, 0.15);">
      <svg class="w-6 h-6 text-secondary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
    </div>
    <h3 class="font-display text-title-lg text-on-surface mb-2">Episode Manager</h3>
    <p class="font-body text-body-sm text-on-surface-variant mb-4">Organize seasons, episodes, and scenes with drag-and-drop ease. Track draft progress at a glance.</p>
    <div class="flex flex-wrap gap-2">
      <span class="chip chip-secondary">Planning</span>
      <span class="chip chip-secondary">Structure</span>
    </div>
  </div>

  {{/* Character Library */}}
  <div class="card-gradient group">
    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background: rgba(205, 189, 255, 0.15);">
      <svg class="w-6 h-6 text-tertiary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
    </div>
    <h3 class="font-display text-title-lg text-on-surface mb-2">Character Library</h3>
    <p class="font-body text-body-sm text-on-surface-variant mb-4">Deep character bibles with traits, arcs, and relationship mapping. Reference any character while you write.</p>
    <div class="flex flex-wrap gap-2">
      <span class="chip">Characters</span>
      <span class="chip">Bible</span>
    </div>
  </div>

  {{/* Series Timeline */}}
  <div class="card-gradient group">
    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background: rgba(161, 18, 255, 0.15);">
      <svg class="w-6 h-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
    </div>
    <h3 class="font-display text-title-lg text-on-surface mb-2">Series Timeline</h3>
    <p class="font-body text-body-sm text-on-surface-variant mb-4">Track story events alongside production milestones on a vertical timeline. See character arcs and beats.</p>
    <div class="flex flex-wrap gap-2">
      <span class="chip chip-accent">Timeline</span>
      <span class="chip chip-accent">Milestones</span>
    </div>
  </div>

  {{/* Notes & Scraps */}}
  <div class="card-gradient group">
    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background: rgba(255, 181, 156, 0.15);">
      <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
    </div>
    <h3 class="font-display text-title-lg text-on-surface mb-2">Notes & Scraps</h3>
    <p class="font-body text-body-sm text-on-surface-variant mb-4">Capture fragments — dialogue snippets, visual references, and non-linear ideas. Everything finds its place.</p>
    <div class="flex flex-wrap gap-2">
      <span class="chip chip-primary">Notes</span>
      <span class="chip chip-primary">Creative</span>
    </div>
  </div>

  {{/* Analytics Dashboard */}}
  <div class="card-gradient group">
    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background: rgba(0, 203, 236, 0.15);">
      <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="#00CBEC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
    </div>
    <h3 class="font-display text-title-lg text-on-surface mb-2">Analytics Dashboard</h3>
    <p class="font-body text-body-sm text-on-surface-variant mb-4">Monitor writing velocity, character presence, narrative balance, and production milestones at a glance.</p>
    <div class="flex flex-wrap gap-2">
      <span class="chip chip-secondary">Analytics</span>
      <span class="chip chip-secondary">Progress</span>
    </div>
  </div>
</div>

{{/* ==================== APP SHOWCASE SECTION ==================== */}}

The Workspace

Designed for the Long Arc

Superhero.pw treats creative production like a curated gallery — not an accountant's spreadsheet. Deep tonal surfaces let your content breathe. Sunset Orange and purple accents guide your eye to what matters. Every pixel is intentional.

No lines, only layers — tonal depth creates natural hierarchy
Focus Rail navigation — slim, surgical, zero distraction
Editorial typography — Manrope, Inter, and Space Grotesk each have a role
Story-first — every feature serves your narrative

    <div class="mt-10">
      <a href="/features/" class="btn-primary">Explore Features →</a>
    </div>
  </div>

  {{/* App-like card preview */}}
  <div class="relative">
    {{/* Decorative elements like the app */}}
    <div class="absolute -top-4 -right-4 w-32 h-32 rounded-full" style="background: rgba(161, 18, 255, 0.1); filter: blur(60px);"></div>
    <div class="absolute -bottom-4 -left-4 w-24 h-24 rounded-full" style="background: rgba(0, 203, 236, 0.08); filter: blur(40px);"></div>

    <div class="card-glass relative overflow-hidden" style="border: 1px solid rgba(68, 71, 72, 0.15);">
      {{/* Mock dashboard header */}}
      <div class="flex items-center gap-3 mb-6 pb-4" style="border-bottom: 1px solid rgba(68, 71, 72, 0.15);">
        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: var(--gradient-accent);">
          <svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
        </div>
        <span class="font-display text-title-sm text-on-surface font-bold italic tracking-tight">superhero<span class="text-accent">.pw</span></span>
        <span class="chip chip-accent text-[0.55rem] ml-auto">Pro</span>
      </div>

      {{/* Mock project cards */}}
      <div class="space-y-3">
        <div class="flex items-center gap-3 p-3 rounded-lg" style="background: var(--color-surface-container-high);">
          <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: rgba(167, 200, 255, 0.15);">
            <svg class="w-5 h-5 text-secondary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/></svg>
          </div>
          <div class="flex-1">
            <p class="font-display text-title-sm text-on-surface font-semibold">The Obsidian Gate</p>
            <p class="font-mono text-label-sm text-outline">Season 2 · 8 episodes</p>
          </div>
          <div class="progress-track w-16"><div class="progress-fill" style="width: 65%;"></div></div>
        </div>

        <div class="flex items-center gap-3 p-3 rounded-lg" style="background: var(--color-surface-container-high);">
          <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: rgba(205, 189, 255, 0.15);">
            <svg class="w-5 h-5 text-tertiary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          </div>
          <div class="flex-1">
            <p class="font-display text-title-sm text-on-surface font-semibold">Character Bible</p>
            <p class="font-mono text-label-sm text-outline">12 characters · 4 arcs</p>
          </div>
          <div class="progress-track w-16"><div class="progress-fill" style="width: 40%;"></div></div>
        </div>

        <div class="flex items-center gap-3 p-3 rounded-lg" style="background: var(--color-surface-container-high);">
          <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: rgba(255, 181, 156, 0.15);">
            <svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          </div>
          <div class="flex-1">
            <p class="font-display text-title-sm text-on-surface font-semibold">Ep 08 — Draft</p>
            <p class="font-mono text-label-sm text-outline">3 scenes remaining</p>
          </div>
          <div class="progress-track w-16"><div class="progress-fill" style="width: 82%;"></div></div>
        </div>
      </div>

      {{/* Mock analytics */}}
      <div class="mt-6 pt-4" style="border-top: 1px solid rgba(68, 71, 72, 0.15);">
        <div class="flex items-center justify-between mb-3">
          <p class="font-mono text-label-md text-on-surface-variant uppercase tracking-widest">Writing Velocity</p>
          <span class="font-mono text-label-sm text-primary">+12%</span>
        </div>
        <div class="flex items-end gap-1 h-8">
          <div class="flex-1 rounded-sm" style="height: 40%; background: var(--color-surface-container-highest);"></div>
          <div class="flex-1 rounded-sm" style="height: 60%; background: var(--color-surface-container-highest);"></div>
          <div class="flex-1 rounded-sm" style="height: 45%; background: var(--color-surface-container-highest);"></div>
          <div class="flex-1 rounded-sm" style="height: 70%; background: var(--color-surface-container-highest);"></div>
          <div class="flex-1 rounded-sm" style="height: 55%; background: var(--color-surface-container-highest);"></div>
          <div class="flex-1 rounded-sm" style="height: 80%; background: var(--color-surface-container-highest);"></div>
          <div class="flex-1 rounded-sm" style="height: 100%; background: var(--gradient-accent); opacity: 0.8;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Start Today

Ready to Build Your Universe?

Join storytellers who plan, write, and produce their series in one focused workspace. Free to start, powerful enough for the whole arc.

Get Started Free See Pricing