Wahre Lebenswerte - Portal-Erlebnis Umsetzung

Projekt-Briefing für VS Code Session

1. Projekt-Kontext

Marke & Vision

Wahre Lebenswerte - Eine Marke für Menschen, die den “Weg ins Neue” gehen wollen. Die Website soll kein klassisches Scrollen sein, sondern ein immersives Erlebnis - inspiriert von Apple’s cinematischen Scroll-Erlebnissen, aber mit interaktivem Charakter.

Kernidee

Besucher “durchschreiten” ein Portal (Hero-Bild mit Torbogen) und erleben dann eine geführte oder selbstbestimmte Reise durch die Philosophie und Werte der Marke.

2. Das neue Hero-Bild

Datei: /images/wlw-landingpage-hero2.webp (oder neuer Pfad)

Beschreibung:

Vordergrund: Staubige Felsen, schmaler Pfad, links/rechts Abgrund (bedrohlich, ungemütlich)
Mittelgrund: Torbogen (weiter entfernt als vorher)
Hintergrund: Strahlend helles Licht, blühende Landschaften hinter dem Tor
Emotion: “Da will ich hin!” - Einladung trotz düsterem Vordergrund

Funktion:

Statisch beim Laden mit leichtem Zoom-In (nicht Fade-In)
Nach 2-3 Sekunden erscheinen Controls
Beim Start der Reise: Zoom in den Torbogen hinein (als würde man durchgehen)

3. Die drei Erlebnis-Modi

Modus 1: Meditativ & Achtsam (~2:30 Min)

Audio: 1.0x Geschwindigkeit
Pausen zwischen Sequenzen: 3-4 Sekunden
Scroll-Geschwindigkeit: ~40 Pixel/Sekunde (langsam)
Animationen: Ausführlich, smooth

Modus 2: Bewusst & Fokussiert (~1:30 Min)

Audio: 1.2x Geschwindigkeit (klingt noch natürlich)
Pausen zwischen Sequenzen: 1-2 Sekunden
Scroll-Geschwindigkeit: ~60 Pixel/Sekunde
Animationen: Kompakter, aber nicht hektisch

Modus 3: Freies Scrollen

Kein Audio
Manuelles Scrollen durch User
Minimale Scroll-Animationen (Intersection Observer basiert)
Klassisches Webseiten-Erlebnis

Modus-Wechsel (WICHTIG!)

User kann jederzeit durch manuelles Scrollen von Modus 1/2 zu Modus 3 wechseln
System erkennt manuelles Scrollen → Audio stoppt sanft (Fade-out 0.5s)
“🎧 Führung fortsetzen” Button erscheint (unauffällig am Rand)
User kann zurück zu Modus 1 oder 2 → Audio startet im aktuellen Abschnitt von vorne

4. Die 5-Akt-Struktur

AKT 0: Portal-Durchschreitung (15 Sek)

Technik: CSS Transform + Scale Animation

Hero-Bild (leichter Zoom-In beim Laden)
↓ (2-3 Sek warten)
Controls erscheinen: [Tor durchschreiten] + Modus-Wahl
↓ User klickt
Zoom-Animation ins Tor (scale 1 → 2.5, ~15 Sek)
↓ White Flash / Überblendung
Akt 1 beginnt

AKT 1: Der Ruf (20 Sek meditativ / 15 Sek dynamisch)

Content:

"Im ansteigenden Chaos, der Verwirrung und dem Niedergang 
der jetzigen Zeit steigen Fragen in uns auf…

- Was ist Wahrheit?
- Weshalb sind wir hier?
- Was bedeutet es, wirklich Mensch zu sein?"

Visuelle Idee:

Nebel/Unschärfe/abstrakte wirbelnde Formen (Chaos visualisiert)
Drei Fragen erscheinen nacheinander als Lichtpunkte
Fragen sammeln sich, formen einen Pfad nach vorne

Animation-Details:

Nebel: Sanfte Bewegung (CSS animation oder Canvas)
Fragen: Fade-in + leichtes Pulsieren
Stagger: Frage 1 → Pause 2s → Frage 2 → Pause 2s → Frage 3
Am Ende: Fragen verbinden sich zu Pfad

Grafik-Assets benötigt:

Nebel-Textur oder animiertes SVG
Frage-Elemente (als Text oder illustrierte Bubbles)

AKT 2: Der Kompass (15 Sek)

Content:

"Kann uns die Suche nach Antworten auf diese Fragen 
auf den WEG INS NEUE führen?

Als Stab und Stütze begleitet uns dabei der Begriff
WAHRE LEBENSWERTE"

Visuelle Idee:

Pfad aus Akt 1 führt zum Logo
Logo schwebt ein mit warmem Glow
Natur-Symbolik drumherum (Wurzeln, Ranken)
Optional: Wanderstab oder Baum-Visualisierung

Animation-Details:

Logo: Fade-in + sanftes Schweben (translate Y)
Glow-Effekt: CSS box-shadow mit Animation
Ranken wachsen von unten (SVG path animation oder CSS clip-path)

Grafik-Assets benötigt:

Logo (vorhanden: /images/WL Logo_transp.png)
Ranken/Wurzeln als SVG (illustriert)
Optional: Wanderstab-Illustration

AKT 3: Die Bedeutung (30 Sek meditativ / 20 Sek dynamisch)

Content:

"Was lösen die Worte WAHRE LEBENSWERTE in uns aus?

Begriffe, die noch verborgen wirken, aber jetzt lebendig werden wollen.
Werte, die stark mit den ursprünglichen Kräften der Natur verbunden sind
und unser Leben auf das Wesentliche zurückführen.

Auf der ganzen Welt finden sich Menschen zusammen,
die in ihrem Leben dem WEG INS NEUE folgen..."

Visuelle Idee:

Vier Elemente: Erde, Wasser, Luft, Feuer/Licht
Als abstrahierte, elegante Formen (illustrativ)
Tanzen/bewegen sich um zentralen Punkt (Mensch-Silhouette?)
Text erscheint: “Körper – Seele – Geist”
Verbindungslinien zwischen Elementen

Animation-Details:

Elemente erscheinen nacheinander (Stagger 0.5s)
Kreisförmige Bewegung (CSS animation: rotate + transform-origin)
Verbindungslinien: SVG path drawing
Mensch-Silhouette: Fade-in in der Mitte

Optional: Video-Rahmen

Kreis mit Loop: Zeitraffer Pflanzenwachstum oder fließendes Wasser
Stumm, ambient
Klick → Modal mit Ton

Grafik-Assets benötigt:

Vier Element-Illustrationen (abstrakt-naturalistisch)
Mensch-Silhouette (einfach, elegant)
Optional: Video-Datei für Rahmen

AKT 4: Der Weg (25 Sek meditativ / 18 Sek dynamisch)

Content:

"Unser Ziel ist es, Menschen zu begleiten, die dem Leben 
einen tieferen Sinn geben wollen.

Alles, was das Logo oder Siegel von WAHRE LEBENSWERTE trägt,
ist Ausdruck dieser Ausrichtung.

Der Weg führt von der Ernte der Zutaten über den Herstellungsprozess
bis hin zu Verkauf und Versand durch die Hände von Menschen,
die freudig und vertrauensvoll diese Geschenke der Natur bieten."

Visuelle Idee:

Weg entsteht vor dem Betrachter (wie Pfad durch Gras)
Entlang des Weges: Menschen-Silhouetten (Gemeinschaft)
Produkte/Siegel als leuchtende Punkte am Wegrand
Kreislauf visualisieren: Ernte → Herstellung → Versand

Optional: Kontrast-Bild

Entweder: Bestehendes Bild (/images/Kontrast-neue-und-alte-Welt.webp)
Oder: Neues Bild mit Transformation (alte Welt wird von neuer überflutet)
Animation: Wenn verwendet, Split-Screen mit Scroll-Effekt (links alt → rechts neu)

Animation-Details:

Weg: SVG path animation (stroke-dasharray)
Silhouetten: Fade-in + leichtes Bewegen (simulate walking)
Leuchtpunkte: Pulsieren, nacheinander erscheinen
Kreislauf: Rotierendes Diagramm oder fließende Pfeile

Grafik-Assets benötigt:

Weg-Pfad als SVG
Menschen-Silhouetten (verschiedene Posen)
Produkt-Icons oder Siegel-Symbol
Kreislauf-Illustration (Ernte → … → Versand)

AKT 5: Die Einladung (20 Sek meditativ / 15 Sek dynamisch)

Content:

"Dies ist erst der Anfang.

WAHRE LEBENSWERTE sind eine Einladung:
den WEG INS NEUE zu gehen,
innezuhalten,
Kraft zu schöpfen
und gemeinsam echte Werte lebendig werden zu lassen.

Kommen Sie mit auf den WEG INS NEUE!"

Visuelle Idee:

Kamera zieht zurück/nach oben (Zoom-out)
Zeigt den gesamten zurückgelegten Weg
Viele kleine Lichtpunkte (Menschen) versammeln sich
Am Horizont: offener, heller Raum (“das Neue”)
Logo erscheint nochmal, klein aber zentral

Animation-Details:

Reverse Zoom (scale 1 → 0.5, aber mit translate für “nach oben”)
Lichtpunkte: Particle-Effekt oder viele kleine Divs mit Stagger-Animation
Horizont: Gradient von warm zu hell
Text: Zeilenweise Fade-in mit größerem Zeilenabstand

Grafik-Assets benötigt:

Horizont-Grafik (optional, kann auch CSS Gradient sein)
Lichtpunkt-Sprites oder generiert via JS

5. Technische Anforderungen

Tech Stack

Framework: Hugo (Static Site Generator)
JavaScript: Vanilla JS (ES6+) - kein React/Vue
Animations: CSS Transitions + JavaScript (evtl. GSAP wenn schon vorhanden)
Audio: HTML5 Audio API
Scroll: Intersection Observer API + Custom Scroll Control

Dateistruktur (Hugo)

/content/
  ├── _index.de.md          # Content-Datei (bereits vorhanden)
/layouts/
  ├── index.html            # Template
/static/
  ├── css/
  │   ├── portal.css        # Neue Styles für Portal-Erlebnis
  ├── js/
  │   ├── portal-experience.js   # Haupt-Controller
  │   ├── audio-manager.js       # Audio-Steuerung
  │   ├── sequence-animator.js   # Sequenz-Animationen
  ├── audio/
  │   ├── 01-der-ruf.mp3         # ElevenLabs generiert (noch zu erstellen)
  │   ├── 02-kompass.mp3
  │   ├── ...
  ├── images/
  │   ├── wlw-landingpage-hero.webp  # Neues Hero-Bild
  │   ├── nebel-animation.svg        # Zu erstellen
  │   ├── ...

Browser-Kompatibilität

Moderne Browser (Chrome, Firefox, Safari, Edge - letzte 2 Versionen)
Mobile: iOS Safari, Chrome Android
Fallback: Ohne JS wird normaler Scroll-Content angezeigt

Performance-Ziele

First Contentful Paint: < 1.5s
Time to Interactive: < 3s
Hero-Bild: WebP, max 500KB
Audio-Dateien: MP3, max 500KB pro Datei
Animationen: 60fps auf Desktop, 30fps auf Mobile akzeptabel

6. JavaScript-Architektur

Haupt-Controller: `portal-experience.js`

class PortalExperience {
  constructor() {
    this.mode = null; // 'meditative', 'dynamic', 'scroll'
    this.sequences = this.loadSequences();
    this.currentSequenceIndex = 0;
    this.audioManager = new AudioManager();
    this.animator = new SequenceAnimator();
    this.isAutoScrolling = false;
    this.userInterrupted = false;
  }

  init() {
    this.setupEventListeners();
    this.showInitialScreen();
  }

  startGuidedMode(tempo) {
    this.mode = tempo; // 'meditative' oder 'dynamic'
    this.disableManualScroll();
    this.playSequence(0);
  }

  switchToScrollMode() {
    this.mode = 'scroll';
    this.audioManager.fadeOut();
    this.enableManualScroll();
    this.showResumeButton();
  }

  detectManualScroll() {
    // Erkennt, wenn User während Auto-Modus scrollt
    // → Wechselt zu Scroll-Modus
  }

  playSequence(index) {
    const sequence = this.sequences[index];
    this.audioManager.play(sequence.audio, this.mode);
    this.animator.animate(sequence.animations);
    this.autoScroll(sequence.scrollTarget);
  }
}

Audio-Manager: `audio-manager.js`

class AudioManager {
  constructor() {
    this.currentAudio = null;
    this.volume = 1.0;
  }

  play(audioFile, tempo) {
    // Lädt und spielt Audio
    // tempo: 'meditative' (1.0x) oder 'dynamic' (1.2x)
    this.currentAudio = new Audio(audioFile);
    this.currentAudio.playbackRate = tempo === 'dynamic' ? 1.2 : 1.0;
    this.currentAudio.play();
  }

  fadeOut(duration = 500) {
    // Sanftes Ausblenden des aktuellen Audios
  }

  stop() {
    if (this.currentAudio) {
      this.currentAudio.pause();
      this.currentAudio.currentTime = 0;
    }
  }
}

Sequenz-Animator: `sequence-animator.js`

class SequenceAnimator {
  animate(animationConfig) {
    // animationConfig = Array von Animation-Objekten
    // z.B.: [
    //   { element: '.nebel', type: 'fadeIn', duration: 1000 },
    //   { element: '.frage-1', type: 'slideIn', delay: 2000 }
    // ]
  }

  fadeIn(element, duration) { /* ... */ }
  fadeOut(element, duration) { /* ... */ }
  slideIn(element, direction, duration) { /* ... */ }
  zoom(element, fromScale, toScale, duration) { /* ... */ }
  // ... weitere Animation-Methoden
}

Sequenz-Datenstruktur (JSON/Object)

const sequences = [
  {
    id: 'portal-entry',
    scrollTarget: '#tor',
    duration: {
      meditative: 15000,
      dynamic: 15000 // Tor-Zoom ist gleich schnell
    },
    audio: null, // Kein Audio, nur Zoom
    animations: [
      {
        element: '.hero-image',
        type: 'zoom',
        from: 1,
        to: 2.5,
        duration: 15000,
        easing: 'ease-in-out'
      },
      {
        element: '.hero-overlay',
        type: 'fadeOut',
        delay: 12000,
        duration: 3000
      }
    ]
  },
  {
    id: 'akt1-der-ruf',
    scrollTarget: '#akt1',
    duration: {
      meditative: 20000,
      dynamic: 15000
    },
    audio: '/audio/01-der-ruf.mp3',
    animations: [
      {
        element: '.nebel',
        type: 'fadeIn',
        duration: 2000
      },
      {
        element: '.frage-1',
        type: 'fadeIn',
        delay: 3000,
        duration: 1000
      },
      {
        element: '.frage-2',
        type: 'fadeIn',
        delay: 8000,
        duration: 1000
      },
      {
        element: '.frage-3',
        type: 'fadeIn',
        delay: 13000,
        duration: 1000
      }
    ]
  },
  // ... weitere Sequenzen
];

7. UI-Komponenten

Start-Screen (nach Hero-Zoom-in)

<div class="portal-mode-selector">
  <h2>Wie möchten Sie die Reise erleben?</h2>
  
  <div class="mode-options">
    <label class="mode-option">
      <input type="radio" name="mode" value="meditative">
      <div class="mode-card">
        <span class="mode-icon">🧘</span>
        <h3>Meditativ & Achtsam</h3>
        <p>~2:30 Minuten</p>
      </div>
    </label>
    
    <label class="mode-option">
      <input type="radio" name="mode" value="dynamic">
      <div class="mode-card">
        <span class="mode-icon">✨</span>
        <h3>Bewusst & Fokussiert</h3>
        <p>~1:30 Minuten</p>
      </div>
    </label>
    
    <label class="mode-option">
      <input type="radio" name="mode" value="scroll">
      <div class="mode-card">
        <span class="mode-icon">📖</span>
        <h3>Selbst erkunden</h3>
        <p>Freies Scrollen</p>
      </div>
    </label>
  </div>
  
  <button class="btn-start">Reise beginnen</button>
</div>

Controls während geführter Tour

<div class="portal-controls">
  <button class="btn-prev" title="Zurück">◀</button>
  <button class="btn-play-pause" title="Pause">⏸</button>
  <button class="btn-next" title="Weiter">▶</button>
  <button class="btn-audio-toggle" title="Ton an/aus">🔊</button>
  <button class="btn-exit" title="Zum freien Scrollen">⏩</button>
  
  <div class="progress-bar">
    <div class="progress-fill"></div>
    <div class="progress-sections">
      <span class="section" data-section="0">①</span>
      <span class="section active" data-section="1">②</span>
      <span class="section" data-section="2">③</span>
      <span class="section" data-section="3">④</span>
      <span class="section" data-section="4">⑤</span>
    </div>
  </div>
</div>

Resume-Button (im Scroll-Modus)

<div class="portal-resume">
  <button class="btn-resume">
    🎧 Führung fortsetzen?
  </button>
</div>

<!-- Modal beim Klick -->
<div class="resume-modal">
  <h3>Möchten Sie die Führung fortsetzen?</h3>
  <p>Sie befinden sich bei: <strong id="current-section-name"></strong></p>
  
  <div class="tempo-choice">
    <button class="btn-tempo" data-tempo="meditative">Meditativ</button>
    <button class="btn-tempo" data-tempo="dynamic">Dynamisch</button>
  </div>
  
  <button class="btn-cancel">Abbrechen</button>
</div>

8. CSS-Struktur

Basis-Klassen

/* Haupt-Container */
.portal-experience {
  position: relative;
  overflow: hidden; /* Während Auto-Modus */
}

/* Hero-Section */
.hero-portal {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 15s ease-in-out; /* Für Zoom */
}

.hero-image.zooming {
  transform: scale(2.5);
}

/* Sequenz-Sections */
.sequence-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s;
}

.sequence-section.active {
  opacity: 1;
  transform: translateY(0);
}

/* Animationen */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Controls */
.portal-controls {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  padding: 15px 20px;
  border-radius: 50px;
  display: flex;
  gap: 15px;
  align-items: center;
  z-index: 1000;
}

/* Progress Bar */
.progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: white;
  border-radius: 2px;
  transition: width 0.3s ease;
}

9. Nächste Schritte - Priorisiert

Phase 1: Technisches Fundament (JETZT in VS Code)

Portal-Controller aufsetzen
- Modus-Auswahl UI
- Basis-Eventlistener
- Scroll-Kontrolle (enable/disable)
Audio-Manager bauen
- Play/Pause/Stop Funktionen
- Playback-Rate für Tempo
- Fade-in/Fade-out
Tor-Durchschreitung
- Hero-Bild Zoom-Animation
- Übergang zu Akt 1
- White-Flash-Effekt
Akt 1 + 2 prototypisch
- Mit Platzhalter-Grafiken (einfache Divs/SVGs)
- Mit Platzhalter-Audio (oder Text-to-Speech für Testing)
- Fade-Animationen funktionsfähig

Phase 2: Content-Vorbereitung (Parallel)

Audio-Texte finalisieren → ElevenLabs
Zeichnerin briefen: Element-Illustrationen
Video-Team fragen: Wo Videos einsetzen?
Kontrast-Bild: Neu oder transformieren?

Phase 3: Integration (Nächste Session)

Echte Audio-Dateien einbinden
Illustrationen integrieren
Timing feintunen
Akt 3-5 vervollständigen

Phase 4: Polish

Mobile-Optimierung
Performance-Tuning
Video-Rahmen
Testing & Bugfixes

10. Offene Fragen / Entscheidungen

Kontrast-Bild: Neu erstellen oder bestehendes transformieren?
Video-Rahmen: In welchen Akten? (Team-Feedback abwarten)
Gemälde-Integration: Wie/wo einbinden? (Später entscheiden)
Zeichnerin: Verfügbarkeit? Stil-Briefing erstellen?
GSAP: Bereits im Projekt vorhanden oder Vanilla JS bevorzugt?

11. Wichtige Erinnerungen

User-Kontrolle steht im Vordergrund
- Nie zwingen, immer Ausweichmöglichkeiten bieten
- Manuelles Scrollen = automatischer Modus-Wechsel
Performance vor Perfektion
- Lieber einfachere Animationen, die smooth laufen
- Mobile ist gleichwertig wichtig
Progressive Enhancement
- Ohne JS muss Content lesbar sein
- Audio ist Enhancement, nicht Requirement
Emotion vor Technik
- Die Reise soll sich gut anfühlen
- Pausen sind wichtig (nicht durchhetzen)

12. Für Claude in VS Code

Hallo! Hier sind die wichtigsten Infos für den Start:

Wir bauen ein immersives Portal-Erlebnis für “Wahre Lebenswerte”
Hugo-Projekt, Vanilla JS, kein Framework
Fokus jetzt: Technisches Fundament für 3 Modi + Tor-Animation + Akt 1-2
Platzhalter-Content ist OK für Prototyp
Frag nach dem aktuellen Code, dann bauen wir darauf auf

Erste Schritte:

Zeig mir die aktuelle Projektstruktur
Lass uns portal-experience.js anlegen
Tor-Zoom-Animation als erstes Feature
Dann Modus-Auswahl UI

Los geht’s! 🚀

Wahre Lebenswerte - Portal-Erlebnis Umsetzung

Projekt-Briefing für VS Code Session

1. Projekt-Kontext

Marke & Vision

Kernidee

2. Das neue Hero-Bild

3. Die drei Erlebnis-Modi

Modus 1: Meditativ & Achtsam (~2:30 Min)

Modus 2: Bewusst & Fokussiert (~1:30 Min)

Modus 3: Freies Scrollen

Modus-Wechsel (WICHTIG!)

4. Die 5-Akt-Struktur

AKT 0: Portal-Durchschreitung (15 Sek)

AKT 1: Der Ruf (20 Sek meditativ / 15 Sek dynamisch)

AKT 2: Der Kompass (15 Sek)

AKT 3: Die Bedeutung (30 Sek meditativ / 20 Sek dynamisch)

AKT 4: Der Weg (25 Sek meditativ / 18 Sek dynamisch)

AKT 5: Die Einladung (20 Sek meditativ / 15 Sek dynamisch)

5. Technische Anforderungen

Tech Stack

Dateistruktur (Hugo)

Browser-Kompatibilität

Performance-Ziele

6. JavaScript-Architektur

Haupt-Controller: portal-experience.js

Audio-Manager: audio-manager.js

Sequenz-Animator: sequence-animator.js

Sequenz-Datenstruktur (JSON/Object)

7. UI-Komponenten

Start-Screen (nach Hero-Zoom-in)

Controls während geführter Tour

Resume-Button (im Scroll-Modus)

8. CSS-Struktur

Basis-Klassen

9. Nächste Schritte - Priorisiert

Phase 1: Technisches Fundament (JETZT in VS Code)

Phase 2: Content-Vorbereitung (Parallel)

Phase 3: Integration (Nächste Session)

Phase 4: Polish

10. Offene Fragen / Entscheidungen

11. Wichtige Erinnerungen

12. Für Claude in VS Code

Haupt-Controller: `portal-experience.js`

Audio-Manager: `audio-manager.js`

Sequenz-Animator: `sequence-animator.js`