Devlog 23: Building Viral Mechanics - Psychology of Shareability

Tuggy's growth depends on people sharing matchups. Not through ads or SEO, but through inherent virality in the product itself.

Here's how I designed features that naturally encourage sharing.

The Viral Loop

Classic viral loop:

1. User creates matchup
2. Shares with friends
3. Friends vote and share
4. Their friends discover and share
5. Repeat

Each matchup is a mini viral campaign.

FOMO (Fear of Missing Out)

Live vote counts create urgency:

<div class="vote-count">
  {totalVotes.toLocaleString()} people have voted
</div>

"1,234 people voted" makes you want to join.

Trending battles:

<div class="trending-badge">
  🔥 Trending #3
</div>

Shows what's popular. People want to participate in popular things.

Recent activity feed:

<div class="activity">
  Anonymous #abc just voted (2s ago)
  @user123 just voted (5s ago)
</div>

Creates sense of live action happening right now.

Social Proof

Winner display:

{#if votesA > votesB}
  <div class="winning">
    🏆 {contestantA} is winning!
  </div>
{/if}

People want to see who's ahead.

Leaderboard prominence:

<div class="top-voter">
  Top voter: @user123 with 5,432 votes
</div>

Creates aspiration. "I could be #1..."

Vote milestones:

{#if totalVotes >= 10000}
  <div class="milestone">
    🎉 10K votes reached!
  </div>
{/if}

Celebrating milestones feels like being part of something big.

Low-Friction Sharing

One-click share:

<button on:click={shareToTwitter}>
  Share on X
</button>

No forms, no extra steps. Just click.

Pre-filled share text:

function shareToTwitter() {
  const text = encodeURIComponent(
    `${contestantA} vs ${contestantB} - who wins? I voted for ${mySide}! 🗳️`
  );
  window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`);
}

Makes sharing effortless.

Native share API:

if (navigator.share) {
  await navigator.share({
    title: matchup.title,
    text: `Vote: ${contestantA} vs ${contestantB}`,
    url: matchupUrl
  });
}

Uses platform's native share sheet on mobile.

Ownership & Investment

After voting, show your contribution:

<div class="your-impact">
  Your {yourVotes} votes make up {yourPercentage}% of the total!
</div>

Makes people feel invested. "I contributed to this!"

Username on leaderboard:

<div class="leaderboard-entry" class:is-you={entry.isYou}>
  #{entry.rank} {entry.name} - {entry.votes} votes
</div>

Seeing your name publicly creates pride. Want to share your rank.

Controversial/Polarizing Content

Controversy drives engagement:

Examples that work:

• "Emacs vs Vim"
• "Cats vs Dogs"
• "Tabs vs Spaces"
• "Pineapple on pizza: Yes vs No"

People have strong opinions and want to defend them.

Matchup suggestions:

<div class="suggestions">
  Create a battle:
  - Your favorite movie vs their favorite movie
  - Best programming language
  - Controversial food takes
</div>

Guide users toward polarizing topics.

Embedded Virality

Each matchup is a landing page:

Every matchup gets a URL:

• tuggy.io/cats-vs-dogs
• cats-vs-dogs.tuggy.io

Each URL is shareable. Each matchup is a mini marketing page.

Dynamic OG images:

Social previews show live vote counts. Creates curiosity:

"Hmm, 15,234 people voted on this. What's it about?"

I've covered the technical implementation in my post on generating dynamic OG images, which has been crucial for improving click-through rates on social shares.

Gamification Without Manipulation

Good gamification:

• Leaderboards (transparent ranking)
• Vote milestones (celebrate participation)
• Achievements (recognize engagement)

Bad gamification (I avoid):

• Loot boxes (exploitative)
• Pay-to-win (unfair)
• Artificial scarcity (manipulative)
• Dark patterns (deceptive)

I want virality through genuine fun, not manipulation.

Network Effects

The more matchups, the better:

More matchups = more landing pages = more discoverability.

The more voters, the better:

Higher vote counts = more social proof = more credibility.

Both create positive feedback loops.

Measuring Virality

K-factor (viral coefficient):

K = (invites sent per user) × (conversion rate)

If K > 1, exponential growth.
If K < 1, need other channels too.

My current K ≈ 0.6. Not exponential, but strong.

Share rate:

trackEvent('matchup_shared', {
  matchup_id: matchupId,
  platform: 'twitter' // or 'facebook', 'whatsapp', etc
});

// Calculate
shareRate = shares / totalVotes

Current: ~8% of voters share. Industry standard is 2-5%, so doing well.

Viral cycles:

How many "generations" of sharing?

1. Creator shares
2. 10 friends see it, 3 vote
3. Those 3 share with their networks
4. 20 more people see it...

Tracking this shows how far content spreads.

Takeaway

Virality isn't luck. It's designed.

FOMO and social proof are powerful but use them ethically. Don't manipulate.

Friction kills sharing. Every extra click halves share rate. Make it one-click.

People share when they feel invested. Showing their contribution creates ownership.

Controversial topics naturally drive engagement. Lean into debates, not drama.

Each piece of user-generated content is a viral asset. Every matchup is a landing page.

Network effects compound. Early growth is slow, then it accelerates.

Tuggy is built to spread organically. The game itself is the growth engine. These viral mechanics complement strong SEO optimization to create multiple growth channels.

That wraps up the technical devlog series. Next come the version updates!