The Happiness Index

The Happiness Index is a quiet strategy experience where every rational decision makes the city more orderly, more efficient, and more empty—until your logic becomes the true source of fear.

Comment

🏙️ The Happiness Index

A governance simulation where success slowly removes what makes a city human

💡 Inspiration

Modern systems are incredibly good at optimizing what can be measured:

  • productivity
  • safety
  • efficiency
  • reported happiness

But what about what cannot be measured?

What happens when a city becomes perfect on paper?

The Happiness Index was inspired by:

  • real-world policy dashboards
  • algorithmic governance
  • optimization systems in corporations and governments
  • dystopian fiction where control is subtle, not violent

We wanted to turn this into a playable question:

Can you build a perfect society… without destroying what makes it human?

🎮 What the Project Does

You play as a Central City Optimization AI.

Each turn:

  1. You analyze problems (incidents)
  2. You choose policies
  3. The system updates metrics
  4. The city visibly changes

📊 Visible Metrics

  • Happiness Index
  • Productivity
  • Safety
  • Stress
  • Public Trust

🧬 Hidden Values

  • Freedom
  • Hope
  • Creativity
  • Social Vitality

These are not shown directly, but they drive everything:

  • incident generation
  • city atmosphere
  • ending outcomes

🔁 Core System Loop

Incident → Policy Decision → System Update → Visual Feedback → Next Turn

Where:

  • PolicyEffects improve visible metrics
  • IncidentPressure applies recurring damage
  • DelayedEffects create long-term consequences

🧠 Key Design Idea

The best short-term solutions often create the worst long-term outcomes.

Examples:

  • Surveillance increases safety → but reduces freedom
  • Mood stabilizers reduce stress → but destroy hope
  • Optimization improves productivity → but removes vitality

🌆 City Visualization

The city is not just decoration — it is a live reflection of the system.

The city reacts to:

System Visual Effect
Social Vitality ↓ empty streets, dead commons
Freedom ↓ surveillance grid, rigid movement
Hope ↓ darker lighting, fog
Creativity ↓ uniform buildings
Stress ↑ smoke, warning signals

🏞️ Central Commons (Key Feature)

The heart of the city:

  • High vitality → crowd, fountain, trees alive
  • Medium → fewer people, passive behavior
  • Low → empty, silent, lifeless

This is where players feel the consequences.

⚙️ How We Built It

🧱 Tech Stack

  • Frontend: Next.js + React
  • State Management: Zustand
  • Styling: Tailwind CSS
  • Animation: Framer Motion
  • Data Layer: TypeScript configs
  • Deployment: Vercel

🧩 Architecture

We built the game as a system-first simulation:

  • turnEngine.ts → runs the simulation
  • stageEngine.ts → controls atmosphere decay
  • visualMapping.ts → converts state → visuals
  • gameStore.ts → holds all state

🧠 Key Engineering Decision

We did NOT build a full 3D engine.

Instead:

  • used a layered city image
  • added SVG overlays
  • drove everything through state → visual mapping

This made the system:

  • faster to build
  • easier to debug
  • more scalable

🔗 Policy ↔ Incident System

Every system is connected:

  • Each policy resolves or worsens incidents
  • Each incident reacts to hidden values
  • Repeated decisions reshape future probability

Example:

Overtime → Burnout ↑ → Stress ↑ → New incidents ↑

📉 Decay System

The city evolves through 4 stages:

  1. Managed Normalcy
  2. Regulated Order
  3. Efficient Silence
  4. Quiet Utopia

🧪 What We Learned

1. Systems > Content

Adding more policies didn’t matter until:

  • they interacted meaningfully
  • they created tradeoffs

2. Hidden values are everything

Players don’t see them directly, but they:

  • shape difficulty
  • drive emotional experience
  • determine endings

3. Visual feedback must be immediate

Players understand systems best when:

  • they see changes instantly
  • the city reflects decisions clearly

4. Balance is harder than building

We had to:

  • tune policy effects
  • adjust incident weights
  • calibrate escalation
  • rebalance hidden value decay

⚠️ Challenges We Faced

1. Preventing “dominant strategy”

We had to ensure:

  • no single policy solves everything
  • control policies feel powerful but dangerous

2. Making hidden damage real

If hidden values didn’t matter:

  • players ignored them

So we tied them to:

  • incidents
  • atmosphere
  • endings

3. Avoiding obvious “evil choices”

The system never says:

“This is bad”

Instead it says:

“This works”

That ambiguity was difficult to design.

4. Scaling from MVP to expanded system

Original scope:

  • 16 policies
  • 14 incidents

Expanded system:

  • 30 policies
  • 24 incidents

We had to:

  • preserve balance bands
  • maintain interaction density
  • avoid content bloat

🧠 Final Experience

By the end of the game, players often reach:

  • high Happiness
  • high Productivity
  • high Safety

But…

  • no people in the streets
  • no culture
  • no spontaneity

🧩 Ending Philosophy

“The Index is complete. The city is calm. The system works.”

But something is missing.

🚀 What’s Next

  • richer city animations
  • more incident variations
  • deeper district behavior
  • post-run analysis dashboard

🏁 Why This Project Matters

This is not just a game.

It is a simulation of a mindset:

optimizing what we can measure at the cost of what we cannot

Built With

  • framer-motion
  • howler/web-audio-api
  • next.js
  • react
  • tailwind-css
  • typescript
  • vercel
  • zustand
Share this project:

Updates