{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "sound-umschalter",
 "name": "Sound-Umschalter und Einstiegsgate in der Navigation",
 "name_en": "Sound toggle / audio entry gate",
 "kurz": "Reel einer Hamburger Filmproduktion mit Einstiegsgate „Mit Ton / Ohne Ton“, Equalizer-Schalter in der Ecken-Navigation und selbst erzeugtem Hafenklang per Web Audio.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "filmisch",
  "verspielt"
 ],
 "stimmung_roh": [
  "immersiv",
  "kinematisch",
  "verspielt"
 ],
 "technik": [
  "web-audio",
  "svg",
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Immersive Seiten bieten beim Einstieg die Wahl „Mit Ton eintreten“ oder „Ohne Ton eintreten“. Danach sitzt ein kleiner Sound-Schalter dauerhaft in einer Ecke oder in der Navigation, oft als animierte Equalizer-Balken oder Wellenlinie, die bei stumm zur flachen Linie wird. Dazu kommen oft Play/Pause- oder Stumm-Knöpfe für Hintergrundvideo oder Reel.",
  "warum_es_wirkt": "Kein Ton startet ungefragt, trotzdem wird Klang Teil des Markenerlebnisses. Die animierte Ikone zeigt, dass die Seite lebt.",
  "wann_einsetzen": "WebGL-Erlebnisse, Kampagnen, Musik, Film und Studios mit Sounddesign.",
  "wann_nicht": "Informationsseiten ohne Audio-Konzept.",
  "varianten": [
   "Audio-Gate vor dem Eintritt (Unseen Studio)",
   "Schwebende Play- und Stumm-Steuerung (Lusion)",
   "Off/On-Schalter als Typo-Sequenz (Immersive Garden, nicht bestätigt)"
  ],
  "umsetzung": "Ton erst nach einer Nutzergeste starten: AudioContext im Klick-Handler anlegen oder mit resume() fortsetzen. Den Ton über einen Gain-Knoten in 500 bis 1000 ms ein- und ausblenden. Schalter als <button aria-pressed>. Equalizer: 3 bis 5 Balken mit CSS-Keyframes auf scaleY und versetztem animation-delay; bei stumm Animation anhalten und auf scaleY(0.2) setzen. Zustand in localStorage merken (in try/catch). Beim Tab-Wechsel (visibilitychange) den Ton pausieren.",
  "mobil": "Funktioniert gleich. iOS verlangt eine Nutzergeste, der Stummschalter des Geräts wird respektiert.",
  "reduzierte_bewegung": "Die Balken stehen still.",
  "barrierefreiheit": "aria-pressed und ein eindeutiges Label („Ton“). Ton nie automatisch starten. WCAG 1.4.2 (Audio-Steuerung) beachten."
 },
 "messwerte": {
  "easing": "ease-in-out",
  "dauer_ms": "Balken-Loop 600–1000",
  "stagger_ms": "100–150 Versatz je Balken",
  "distanz": "scaleY 0.2–1",
  "sonstiges": "Fade-in des Tons 500–1000 ms",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.42,
   0.0,
   0.58,
   1.0
  ],
  "css": "cubic-bezier(0.42, 0, 0.58, 1)",
  "name": "ease-in-out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "Unseen Studio",
   "url": "https://www.unseen.co",
   "auszeichnung": "",
   "beobachtung": "Einstieg „Enter without audio“ / „Enter“, danach „Toggle Sound“; nummeriertes Menü 01 Index, 02 Projects, 03 Contact, 04 World.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Lusion",
   "url": "https://lusion.co",
   "auszeichnung": "Awwwards SOTY 2023 (v3)",
   "beobachtung": "Schwebende Controls für Play, Mute und „Keep Scrolling“.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Immersive Garden",
   "url": "https://immersive-g.com",
   "auszeichnung": "Immersive Garden website: Awwwards Site of the Month 01/2025 (laut SOTM-Liste)",
   "beobachtung": "Unbeschriftete Sequenz „0 / Off / On“ – vermutlich Sound-Schalter (nicht bestätigt).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "seitenrand-und-ecken-navigation",
  "vollbild-overlay-menue-bildvorschau"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/sound-umschalter/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/sound-umschalter/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/sound-umschalter/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Reel einer Hamburger Filmproduktion mit Einstiegsgate „Mit Ton / Ohne Ton“, Equalizer-Schalter in der Ecken-Navigation und selbst erzeugtem Hafenklang per Web Audio.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.42, 0, 0.58, 1) (ease-in-out, für Balken, Bildwechsel, Gate und Unterschrift)",
   "balken": "4 Balken, 2px breit, 14px hoch, Abstand 2.5px, keyframes scaleY 0.2 → 1, alternate, infinite",
   "balken_dauer_ms": [
    800,
    640,
    960,
    720
   ],
   "balken_versatz_ms": 120,
   "stumm": "Animation aus, jeder Balken sinkt per Web Animations aus seiner aktuellen Höhe in 200 ms auf scaleY(0.2)",
   "ton_ein_ms": 800,
   "ton_aus_ms": 500,
   "ton_hinweis": "Gain linear 0 → 0.9 bzw. zurück auf 0; AudioContext erst im Klick-Handler, resume(); visibilitychange setzt suspend/resume",
   "klang": "braunes Rauschen durch Tiefpass 420 Hz mit LFO 0.07 Hz (±160 Hz), Grundton 55 / 82.4 / 110.3 Hz durch Tiefpass 260 Hz (Gain 0.05), Nebelhorn 98 / 98.7 / 147.2 Hz Sägezahn durch Tiefpass 480 Hz alle 13–19 s (Anstieg 0.45 s, Halten bis 2.1 s, Ausklang bis 3.4 s)",
   "gate_ms": 800,
   "bildwechsel_ms": 800,
   "bildwechsel": "Crossfade nur über die Deckkraft, Bild steht 6500 ms",
   "unterschrift_ms": 400,
   "ui_ms": 200,
   "farben": "Grund #0e0e0e, Text #f2f2f2, leise rgba(242,242,242,.62), Platzhalter #1a1a1a, Gate-Abdunklung rgba(14,14,14,.74)",
   "schrift": "Instrument Serif für Marke und Titel (clamp(1.5rem, 3vw, 2.75rem), Zeilenhöhe 1.1, -0.01em), Instrument Sans 14–15px, Fragment Mono 12px tabular-nums für Schalter, Zähler, Timecode",
   "speicher": "localStorage nebelhorn-ton (an/aus, try/catch)"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten per Antippen; Ton startet nur nach der Geste (iOS). Ton-Schalter 44px hoch, Gate-Knöpfe untereinander, Navigation reduziert auf Marke und Ton-Schalter, Zähler wandert nach oben rechts.",
  "reduziert": "Balken stehen in festen Höhen (0.55 / 0.9 / 0.4 / 0.75), stumm flach auf 0.2. Kein automatischer Bildwechsel, Szenen stehen still, Wechsel per Pfeil ohne Blende. Gate blendet in 150 ms aus.",
  "korrekturen": {
   "beschreibung": "Immersive Seiten bieten beim Einstieg die Wahl „Mit Ton eintreten“ oder „Ohne Ton eintreten“. Danach sitzt ein kleiner Sound-Schalter dauerhaft in einer Ecke oder in der Navigation, oft als animierte Equalizer-Balken oder Wellenlinie, die bei stumm zur flachen Linie wird. Dazu kommen oft Play/Pause- oder Stumm-Knöpfe für Hintergrundvideo oder Reel.",
   "warum_es_wirkt": "Kein Ton startet ungefragt, trotzdem wird Klang Teil des Markenerlebnisses. Die animierte Ikone zeigt, dass die Seite lebt.",
   "wann_einsetzen": "WebGL-Erlebnisse, Kampagnen, Musik, Film und Studios mit Sounddesign.",
   "wann_nicht": "Informationsseiten ohne Audio-Konzept.",
   "varianten": [
    "Audio-Gate vor dem Eintritt (Unseen Studio)",
    "Schwebende Play- und Stumm-Steuerung (Lusion)",
    "Off/On-Schalter als Typo-Sequenz (Immersive Garden, nicht bestätigt)"
   ],
   "umsetzung": "Ton erst nach einer Nutzergeste starten: AudioContext im Klick-Handler anlegen oder mit resume() fortsetzen. Den Ton über einen Gain-Knoten in 500 bis 1000 ms ein- und ausblenden. Schalter als <button aria-pressed>. Equalizer: 3 bis 5 Balken mit CSS-Keyframes auf scaleY und versetztem animation-delay; bei stumm Animation anhalten und auf scaleY(0.2) setzen. Zustand in localStorage merken (in try/catch). Beim Tab-Wechsel (visibilitychange) den Ton pausieren.",
   "mobil": "Funktioniert gleich. iOS verlangt eine Nutzergeste, der Stummschalter des Geräts wird respektiert.",
   "reduzierte_bewegung": "Die Balken stehen still.",
   "barrierefreiheit": "aria-pressed und ein eindeutiges Label („Ton“). Ton nie automatisch starten. WCAG 1.4.2 (Audio-Steuerung) beachten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept fotograf-film-bild-zuerst in der dunklen Film-Variante, erfundene Produktionsfirma Nebelhorn Film aus Hamburg-Altona (Instrument Serif nur für Marke und Titel, Instrument Sans, Fragment Mono für Zähler, Timecode und Schalter). Das Reel besteht aus drei eigenen Canvas-Szenen als Stellvertreter für Video (Containerbrücken im Nebel, Fähre bei Nacht, Sonnenaufgang am Elbstrand), Wechsel nur per Crossfade. Ton wird per Web Audio selbst erzeugt (Wasser, Grundton, fernes Nebelhorn), startet nur nach Klick und ist standardmäßig aus; die Vorführung schaltet nur die Anzeige, nie den Ton. Varianten per Pult: Gate, schwebende Steuerung, Off/On. Referenzen: unseen.co, lusion.co, immersive-g.com, rogierdeboeve.com, bleed.com. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Kopf und main sind inert, solange das Gate (Dialog) offen ist (Fokus lag vorher verdeckt hinter dem Gate). Pause-Knopf „Reel anhalten“ zusätzlich in der Ecke unten rechts (auch Telefon), teilt den Zustand mit dem Knopf der schwebenden Leiste; aria-pressed zeigt jetzt „angehalten“ bei festem Namen (vorher pressed = läuft und wechselnder Name); FUNDUS_DEMO.pause/weiter halten die Anzeige synchron. Kontrastmodus-Rahmen für Knöpfe."
 }
}