04 — Experience & Community

“Beam is geen tool. Beam is een plek.”

Beam bouwt niet alleen websites. Beam bouwt een wereld waarin ondernemers elkaar vinden, samenwerken, en samen groeien. Een wereld die aanvoelt als een game — niet omdat het frivool is, maar omdat de beste games ter wereld hebben begrepen hoe je mensen laat voelen dat ze vooruitgaan.

Geïnspireerd door Nintendo (Mario, Zelda, Animal Crossing), Pokémon’s verzamelplezier, en de warme werelden van De Sims en World of Warcraft.

1. Filosofie: Abundance Mindset

Er is Genoeg voor Iedereen

De meeste platforms creëren onbewust competitie. SEO rankings, “top rated” badges — mechanismen die zeggen: er is een winnaar en een verliezer.

Beam draait dit om:

Collega’s, geen concurrenten. Twee yoga docenten in dezelfde stad zijn geen bedreiging — ze bedienen andere mensen.
Samenwerken, niet vergelijken. Een fotograaf en een trouwlocatie zijn natuurlijke partners.
Zichtbaarheid voor iedereen. Geen algoritme dat de ene boven de andere plaatst.

De Sims Neighborhood, niet de App Store

In De Sims bezoek je de buren niet om ze te beoordelen — je bezoekt ze omdat het leuk is. Je leert ze kennen. Soms ontstaat er iets moois.

De Beam community werkt zo. Je “buurt” zijn andere Beam-gebruikers in jouw niche of regio. Je ziet hun sites, hun stijl, hun aanbod. Niet als concurrentie-analyse, maar als inspiratie en connectie.

2. Pijler 1: The Feel

Zie 05-interaction-design.md voor de volledige technische uitwerking van geluiden, animaties en Nintendo Juice.

Waarom gevoel ertoe doet

De reden dat mensen Mario Kart spelen terwijl er “betere” racegames bestaan, is niet de techniek — het is het gevoel. Beam moet hetzelfde doen voor website bouwen. Het moet lekker voelen om een block te plaatsen, een pagina te publiceren, een kleur te kiezen.

Kern van The Feel:

Micro-geluiden die feedback geven zonder opdringerig te zijn
Micro-animaties die elke interactie bevestigen
Custom cursors per gilde (optioneel)
Ambient muziek per gilde (opt-in)
Nintendo Juice: minimaal twee feedback-signalen per gebruikersactie

3. Pijler 2: The Journey

Waarom Progressie Werkt

In World of Warcraft speel je niet 10.000 uur omdat iemand je dwingt. Je speelt omdat elke sessie voortgang voelt. Beam gebruikt dezelfde psychologie — niet om te manipuleren, maar om te helpen. Een ondernemer die een website bouwt, is op een reis. Die reis verdient erkenning.

3.1 De Beam Codex — Verzameldopamine

Pokémon begrepen iets fundamenteels: mensen houden ervan om dingen te ontdekken en te catalogiseren. De Pokédex — een boek vol silhouetten van wezens die je nog niet hebt gevonden — is een van de meest motiverende interfaces ooit ontworpen.

Beam past dit toe met de Beam Codex (zie 03-expansion-system.md §8). De ervaring gaat verder dan de Codex:

Ontdekking triggert vreugde — een nieuw block voor het eerst gebruiken = Pokémon vangen
Collectie groeit zichtbaar — je Codex vult zich, je voortgangspercentage stijgt
Geheimen belonen verkenning — synergie blocks verschijnen pas als je combineert
Niet alles is zichtbaar — locked blocks tonen silhouetten, wekken nieuwsgierigheid

3.2 Het Journey Systeem

Geen punten of levels in de traditionele zin. In plaats daarvan: een persoonlijk verhaal dat groeit. Vijf hoofdstukken, platform-breed (onafhankelijk van welke addons actief zijn):

Jouw Beam Reis
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Hoofdstuk 1: De Basis                    ✓ voltooid
  ✓ Account aangemaakt
  ✓ Eerste pagina gebouwd
  ✓ Site gepersonaliseerd (kleuren, logo)

Hoofdstuk 2: Jouw Verhaal                ✓ voltooid
  ✓ Over-pagina geschreven
  ✓ Eerste afbeeldingen geüpload
  ✓ Contact pagina gemaakt

Hoofdstuk 3: De Wereld In                ◐ bezig
  ✓ Site gepubliceerd
  ✓ Eigen domein gekoppeld
  ○ Eerste bezoeker ontvangen

Hoofdstuk 4: Groei                       ○ locked
  ○ Eerste addon geactiveerd
  ○ 10 blog posts geschreven
  ○ 5 reviews ontvangen

Hoofdstuk 5: Meesterschap                ○ locked
  ○ Custom archief pagina ontworpen
  ○ Pattern library opgebouwd
  ○ Eerste samenwerkingsverband
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Elk hoofdstuk is geen checklist — het is een narratief. De taal is warm en moedigend:

“Je site is live! Ergens in de wereld kan iemand jou nu vinden. Dat is niet niks.”

Noot over progressiesystemen: Naast de Journey bestaan ook Vertical Pack Milestones (niche-specifieke voortgangsstappen per addon — zie 03-expansion-system.md). Ze zijn aanvullend: Journey = persoonlijk platform-breed verhaal, Milestones = functionele voortgang per use case.

3.3 Achievements

Achievements zijn geen verzamelobjecten — het zijn momenten van erkenning. Ze verschijnen subtiel, voelen warm, en herinneren de gebruiker eraan hoe ver ze al zijn gekomen.

Universele Achievements

Achievement	Trigger	Bericht
Eerste Straal	Eerste pagina aangemaakt	”Elke reis begint met één pagina.”
Kleurenkenner	Eerste keer kleuren aangepast	”Jouw merk begint vorm te krijgen.”
Beeldspraak	Eerste 10 afbeeldingen geüpload	”Een beeld zegt meer dan duizend woorden.”
De Wereld In	Site gepubliceerd	”Jouw plek op het internet is live.”
Eigen Adres	Custom domein gekoppeld	”Het staat op de gevel.”
Bouwmeester	50 blocks geplaatst	”Je begint het bouwen onder de knie te krijgen.”
Patroonmaker	Eerste pattern aangemaakt	”Slim. Eén keer bouwen, overal gebruiken.”
Nachtbraker	Gewerkt na middernacht	”De beste ideeën komen laat.”
Perfectionist	10× dezelfde block bewerkt	”Het verschil zit in de details.”
Tijdreiziger	50× undo in één sessie	”Elk meesterwerk heeft schetsen nodig.”

Gilde-Specifieke Achievements

⚕️ Healers:

Achievement	Trigger	Bericht
Eerste Sessie	Eerste booking aangemaakt	”Iemand kiest voor jou. Dat is bijzonder.”
Volle Agenda	10 bookings in één week	”Je agenda vult zich. Vertrouw het proces.”
Wijsheid Delen	10 blog posts over wellness	”Kennis vermenigvuldigt als je het deelt.”
Healing Circle	3 andere Healers gevolgd	”Samen helen we meer dan alleen.”

🎨 Creators:

Achievement	Trigger	Bericht
Eerste Expositie	Portfolio met 5+ werken	”Je werk verdient gezien te worden.”
Process Revealed	Blog post over werkproces	”Mensen houden van het verhaal achter het werk.”
Collector’s Edition	50 items in portfolio	”Een indrukwekkend oeuvre in wording.”
Creative Circle	3 andere Creators gevolgd	”Creativiteit groeit in gezelschap.”

🏪 Merchants:

Achievement	Trigger	Bericht
Eerste Verkoop	Eerste order	”Iemand gelooft in wat je maakt.”
Storyteller	Blog post over een product	”Het verhaal maakt het product.”
Trusted	10 reviews ontvangen	”Vertrouwen bouw je met elke review.”
Merchant Circle	3 andere Merchants gevolgd	”De markt is groot genoeg voor iedereen.”

📚 Scholars:

Achievement	Trigger	Bericht
Eerste Les	Eerste kennisbank artikel	”Expertise is waardevol als het gedeeld wordt.”
Autoriteit	25 artikelen gepubliceerd	”Je wordt een stem in je vakgebied.”
Scholar Circle	3 andere Scholars gevolgd	”Kennis groeit in dialoog.”

🍽️ Hosts:

Achievement	Trigger	Bericht
Eerste Reservering	Eerste booking	”Er wordt een tafel gedekt.”
Sfeermaker	20+ afbeeldingen in galerij	”Sfeer voel je al voor je binnenstapt.”
Seizoenskok	Seasonal content gepubliceerd	”Mee bewegen met de seizoenen.”
Host Circle	3 andere Hosts gevolgd	”Gastvrijheid kent geen grenzen.”

🔧 Builders:

Achievement	Trigger	Bericht
Eerste Project	Eerste case study	”Goed werk spreekt voor zich.”
Voor & Na	10 projecten in portfolio	”Een track record in de maak.”
Vakman	Blog over vakkennis	”Expertise delen maakt je sterker.”
Builder Circle	3 andere Builders gevolgd	”Samen bouwen we betere dingen.”

3.4 Achievement Presentatie

Achievements verschijnen als een warme toast notificatie:

┌──────────────────────────────────────┐
│  ✦  De Wereld In                     │
│                                      │
│  Jouw plek op het internet is live.  │
│  Je site kan nu gevonden worden.     │
│                                      │
│  [Bekijk je profiel →]               │
└──────────────────────────────────────┘

Verschijnt rechtsonder, schuift in
Subtiel geluidje (achievement chime)
Zachte glow animatie
Verdwijnt na 6 seconden, of bij klik
Terug te vinden op het Beam profiel

4. Pijler 3: The World

De Drie Lagen van The World

┌─────────────────────────────────────┐
│  Laag 3: De Beam Directory          │
│  Ontdekking — publiek vindbaar      │
│  "Vind een yoga docent bij jou      │
│   in de buurt"                      │
├─────────────────────────────────────┤
│  Laag 2: De Community               │
│  Connectie — onderling zichtbaar    │
│  "Bekijk sites van collega's,       │
│   stuur een bericht"                │
├─────────────────────────────────────┤
│  Laag 1: Het Profiel                │
│  Identiteit — wie ben je op Beam?   │
│  "Jouw gilde, reis, en site"        │
└─────────────────────────────────────┘

Animal Crossing als Blauwdruk

Animal Crossing	Beam
Je eiland inrichten	Je site bouwen
Eilanden van vrienden bezoeken	Sites van connecties bekijken
Museum vullen met vondsten	Codex vullen met blocks
Fossiel/vis doneren	Patronen delen met collega’s
Seizoensgebonden events	Seasonal set releases
Nook Miles (taken → beloningen)	Journey milestones
Dream Suite (willekeurig eiland bezoeken)	Directory (willekeurig site ontdekken)

Het kerngevoel: een eigen plekje in een gedeelde wereld.

5. Het Beam Profiel

Elke Beam-gebruiker heeft een profiel. Niet als social media — als professionele identiteit binnen het ecosysteem.

┌──────────────────────────────────────────────────┐
│  [Avatar]  Studio Zenna                          │
│            Yoga & Meditatie · Utrecht             │
│                                                  │
│  ⚕️ Healer · 🧭 Guide                            │
│  Lid sinds maart 2026                            │
│                                                  │
│  🌐 studiozenna.nl           [Bezoek site →]     │
│                                                  │
│  Over                                            │
│  Yoga voor iedereen. Van rustige yin tot          │
│  dynamische vinyasa.                              │
│                                                  │
│  Reis: Hoofdstuk 4 · 23 achievements             │
│  ✦ De Wereld In  ✦ Volle Agenda                  │
│  ✦ Healing Circle                                │
│                                                  │
│  Connecties                                      │
│  [Avatar] Yoga met Lotte · Den Haag              │
│  [Avatar] Fotografie Eva · Utrecht               │
│                                                  │
│  Open voor samenwerking                    [Ja]  │
│  Zoekt: fotograaf, content schrijver             │
└──────────────────────────────────────────────────┘

Profiel Zichtbaarheid

Element	Zichtbaar voor
Naam, locatie, gilde, class	Alle Beam-gebruikers
Site link	Publiek
Bio	Alle Beam-gebruikers
Achievements	Optioneel — gebruiker kiest welke
Connecties	Optioneel
”Open voor samenwerking”	Alle Beam-gebruikers
Reis/hoofdstuk	Alleen zelf (privé)

6. De Beam Directory

Treatwell × Dribbble × Beam

De Beam Directory is geen zoekresultaten-pagina. Het is een curated discovery platform — een plek waar je rondbladert, geïnspireerd raakt, en de juiste persoon vindt.

Bezoeker zoekt: "yoga docent utrecht"
  ↓
Beam Directory toont:
  ┌─────────────────────────────────────────┐
  │  Yoga in Utrecht                        │
  │                                         │
  │  ┌──────────┐  ┌──────────┐             │
  │  │[Screenshot│  │[Screenshot│           │
  │  │  site]   │  │  site]   │             │
  │  │          │  │          │             │
  │  │ Studio   │  │ Yoga met │             │
  │  │ Zenna    │  │ Lotte    │             │
  │  │ [→ Site] │  │ [→ Site] │             │
  │  └──────────┘  └──────────┘             │
  └─────────────────────────────────────────┘

Directory Features

Geen ranking, geen scores. Volgorde is wisselend (round-robin) zodat iedereen gelijke zichtbaarheid krijgt.

Filtering op:

Locatie (stad, regio, of “online”)
Gilde
Niche / specialisatie
“Open voor samenwerking”
Vrije tags

Site Preview:

Automated screenshot van de homepage (periodic refresh via Cloudflare Browser Rendering API — zie OQ-8)
3–4 highlight woorden (door gebruiker gekozen of auto-extracted)
Direct link naar de live site

Wie Ziet de Directory?

Doelgroep	Wat ze zoeken
Consumenten	Een dienstverlener (“yoga docent Utrecht”)
Ondernemers	Een samenwerkingspartner
Beam-gebruikers	Inspiratie en collega’s

Opt-in en Controle

De Directory is opt-in. Niemand wordt zonder toestemming getoond:

Bij onboarding: “Wil je zichtbaar zijn in de Beam Directory?”
Wat wordt getoond: naam, locatie, site screenshot, niche
Wat NIET wordt getoond: email, telefoon, omzet, analytics
Altijd uitschakelbaar

Quality Gate: Alleen sites die “compleet” zijn (bepaalde milestones behaald) verschijnen in de Directory. Geen lege pagina’s, geen lorem ipsum, geen broken images.

7. Samenwerking & Connecties

Het Connectiesysteem

Geïnspireerd door LinkedIn’s connecties maar zonder de cold outreach spam. Connecties op Beam zijn betekenisvol — je connecteert omdat je samenwerking ziet.

Yoga docent Anna bekijkt de Directory
  ↓
Ziet: "Fotografie Eva · Utrecht · Open voor samenwerking"
  ↓
Klikt: [Connectie verzoek]
  ↓
Schrijft kort bericht:
  "Hoi Eva, ik zoek een fotograaf voor mijn yoga studio website."
  ↓
Eva accepteert → ze zijn nu verbonden

Samenwerkingsvormen

Type	Beschrijving
Cross-promotie	Elkaars site/dienst aanbevelen
Gastcontent	Content delen of samen maken
Verwijzing	Klanten naar collega sturen
Bundel	Samen een aanbod maken
Mentoring	Ervaren gebruiker helpt nieuwe

Berichten

Eenvoudig berichtensysteem:

Tekst berichten (max 2000 tekens)
Links delen (naar eigen site, specifieke pagina)
Geen bestanden, geen afbeeldingen
Notificatie in dashboard + optioneel email

Gilde Hubs

Elke gilde heeft een Hub — een plek waar gilde-leden elkaar vinden:

⚕️ Healers Hub
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Welkom in de Healers Hub

Nieuw in de community:
  [Avatar] Massagepraktijk Saar · Haarlem
  [Avatar] Osteopaat de Jong · Eindhoven

Open voor samenwerking:
  [Avatar] Yogastudio Bloom · Amsterdam
    Zoekt: fotograaf, copywriter

Inspiratie:
  ✦ Site van de week: Studio Zenna
  ✦ Tip: "Hoe ik mijn bookings pagina optimaliseerde"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Cross-Gilde Connecties

De interessantste samenwerkingen ontstaan tussen gilden:

Natuurlijke partners:
  Healer    ←→ Creator     (fotograaf voor studio)
  Merchant  ←→ Storyteller (content marketing)
  Host      ←→ Creator     (food fotografie)
  Scholar   ←→ Builder     (consultant + implementatie)

Het systeem suggereert:
  "Als yoga docent werk je vaak samen met fotografen.
   Er zijn 3 fotografen in jouw regio die open staan
   voor samenwerking."

8. Curated Quality

Het Beam Belofte

Elke site die op Beam gebouwd is, ziet er professioneel uit. Niet omdat gebruikers designers zijn, maar omdat het systeem slecht design onmogelijk maakt.

Constrained Design System:

Kleurkeuzes zijn altijd harmonisch (automatische contrast checks)
Typography scale is vast (geen 47px op mobile)
Spacing is systematisch
Responsive is ingebakken

Curated Blocks:

Elk block is door designers gemaakt en getest
Kleuropties zijn beperkt tot het actieve kleurpalet
Afbeeldingen worden automatisch gecropped op juiste ratio

Waarom dit werkt voor de Community: Als elke Beam site er goed uitziet → gebruikers zijn trots → delen hem vaker → de Directory oogt professioneel → “Built with Beam” is een kwaliteitskeurmerk.

9. Technische Architectuur

Database Schemas

Zie 08-brand-json-spec.md voor de complete SQL met RLS en indexes.

Tabellen:

user_achievements — behaalde achievements per gebruiker
site_journey — Journey hoofdstuk + milestones per site
beam_events — event bus voor achievement triggers
beam_profiles — publieke gebruikersprofielen
connections — verbindingen (status: pending/accepted/declined)
messages — directe berichten (alleen tussen verbonden gebruikers, max 2000 tekens)
directory_listings — opt-in vermeldingen (screenshot R2 URL, highlights, niche)
user_preferences — audio, cursor, animatie-instellingen

Achievement Engine

interface ProgressionEngine {
  checkMilestone(event: BeamEvent): Promise<Achievement[]>
  getProgress(siteId: string): Promise<JourneyProgress>
  getAchievements(userId: string): Promise<Achievement[]>
}

interface BeamEvent {
  type: string                    // 'block:add', 'page:publish', 'booking:create'
  userId: string
  siteId: string
  metadata: Record<string, unknown>
  timestamp: Date
}

Achievement definities leven in code, niet in de database. Alleen unlocked achievements worden opgeslagen.

Audio Preferences

// Onderdeel van user_preferences tabel
{
  sound_enabled: boolean          // default: true
  sound_volume: number            // 0-100, default: 70
  music_enabled: boolean          // default: false (opt-in)
  music_volume: number            // 0-100, default: 40
  sound_profile: string           // 'default' of gilde ID
  cursor_style: string            // 'beam', 'gilde', 'system'
  reduced_motion: boolean         // Override voor animations
}

Dashboard Routes (nieuw)

/community                          -- Community overzicht
/community/profile                  -- Eigen profiel bewerken
/community/connections              -- Connecties beheren
/community/messages                 -- Berichten
/community/hub/:gilde               -- Gilde Hub
/directory                          -- Beam Directory (ook publiek)
/directory/:niche/:location?        -- Gefilterde Directory
/settings/experience                -- Sound, muziek, cursor, animaties
/journey                            -- Persoonlijke reis + achievements

API Routes (nieuw)

POST   /community/profile           -- Profiel bijwerken
GET    /community/connections        -- Eigen connecties
POST   /community/connections        -- Connectie verzoek
PUT    /community/connections/:id    -- Accept/decline
GET    /community/messages           -- Berichten ophalen
POST   /community/messages           -- Bericht sturen
GET    /community/hub/:gilde         -- Gilde Hub data
GET    /directory                    -- Directory listings
GET    /directory/suggestions        -- Samenwerkingssuggesties
POST   /events                       -- Beam event registreren
GET    /journey                      -- Reis progressie
GET    /achievements                 -- Behaalde achievements

10. Implementatie Roadmap

Fase 1: The Feel — Micro-interactions

De editor krijgt een ziel.

Sound engine (Web Audio API wrapper)
Basis geluidseffecten (10 geluiden)
Micro-animaties op block operaties (motion)
Sound settings in preferences
prefers-reduced-motion support

Fase 2: The Feel — Polish

Custom Beam cursor
Ambient muziek systeem
Gilde-specifieke geluidspakketten
Cursor themes per gilde

Fase 3: The Journey — Foundation

Beam events systeem (event bus + database)
Achievement engine
Journey progressie (hoofdstukken)
Achievement toast UI
Journey pagina in dashboard
15 universele achievements

Fase 4: The Journey — Depth

Gilde-specifieke achievements (5 per gilde × 6 = 30)
Milestones gekoppeld aan addons
Achievement showcase op profiel

Fase 5: The World — Identity

Beam profielen (bio, locatie, gilde, tags)
Profiel zichtbaarheid settings
“Open voor samenwerking” functionaliteit

Fase 6: The World — Connection

Connectie systeem
Berichten (direct messages)
Gilde Hubs
Cross-gilde samenwerkingssuggesties

Fase 7: The World — Discovery

Directory listings (opt-in)
Automated screenshot generatie
Directory zoek- en filterfunctionaliteit
Publieke Directory pagina (SEO-geoptimaliseerd)
Quality gate (completeness check)

Fase 8: The World — Growth

“Site van de week” per gilde
Seasonal community events
Cross-promotie tools