{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "boot-sequenz-intro",
 "name": "Boot-Sequenz / System-Start-Intro (Retro-Interface)",
 "name_en": "Boot sequence intro",
 "kurz": "Die Seite startet wie ein Rechner: Röhre an, Startprotokoll läuft durch, dann schaltet sich die echte Oberfläche ein.",
 "kategorie": "Preloader & Intro",
 "kategorie_slug": "preloader-intro",
 "kategorie_nr": 2,
 "bau_chat": "C3",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise",
  "filmisch",
  "verspielt",
  "experimentell"
 ],
 "stimmung_roh": [
  "retro",
  "verspielt",
  "nerdig",
  "narrativ"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "gsap",
  "webgl-shader",
  "web-audio"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "webgl"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Seite startet wie ein Computer, eine Konsole oder ein altes Spiel. Die Röhre schaltet sich ein (Linie öffnet sich zum Bild), Startzeilen laufen durch oder eine Disc dreht sich. Am Ende schaltet sich die eigentliche Oberfläche ein. Oft gibt es Ton, aber nur auf Wunsch.",
  "warum_es_wirkt": "Nostalgie an die späten 90er und frühen 2000er plus Erzählung: Die Ladezeit wird zur Geschichte. Passt zum Retro-Tech-Strang 2026 (Röhren, Pixel, Y2K). Bei technischen Produkten kann das Startprotokoll echte Informationen tragen.",
  "wann_einsetzen": "Bei Portfolios mit Spiel- oder Retro-Konzept, Gaming- und Musikprojekten und bei technischen Werkzeugen, deren Startprotokoll selbst etwas über das Produkt sagt.",
  "wann_nicht": "Bei gewöhnlichen Business-Seiten und überall, wo Besucher schnell an Inhalte wollen. Nur, wenn das Konzept es trägt.",
  "varianten": [
   "Terminal-Zeilen mit Zeitstempel und Blockcursor",
   "BIOS-Look mit Speichertest und Fortschrittsbalken aus Blockzeichen",
   "Drehende Disc oder Antenne mit Ecklabels",
   "Röhren-Einschaltlinie als Rahmen für alle drei"
  ],
  "umsetzung": "Terminal: Zeilen-Array, per Intervall (30–80 ms) als Zeile anhängen, Monospace, Cursor-Blinken per CSS steps(). Röhre einschalten: Container zuerst scaleY(0.005) scaleX(0), dann scaleX(1), dann scaleY(1), dazu ein kurzer Helligkeitsblitz. Weil ein dunkles Bild als Linie fast schwarz ist, braucht es einen eigenen leuchtenden Strahl. Ausschalten umgekehrt mit Nachleuchten. Ton nur nach Nutzerklick (Autoplay-Regeln) und mit sichtbarem Schalter, per Web Audio erzeugt. Länge strikt begrenzen, Überspringen per Knopf und Esc anbieten. Im Einsatz nur beim ersten Besuch pro Sitzung zeigen (sessionStorage); die Demo spielt es bei jedem Laden.",
  "mobil": "Gekürzte Sequenz.",
  "reduzierte_bewegung": "Kein Flackern, kein Blitz. Direkt die Oberfläche.",
  "barrierefreiheit": "Boot-Text aria-hidden, das Laden per aria-live ansagen. Blinken unter 3 Hz. Ton nie automatisch. Überspringen ist per Tastatur erreichbar und setzt den Fokus auf die Hauptüberschrift."
 },
 "messwerte": {
  "easing": "steps() bzw. linear für Terminal; expo.out für CRT",
  "dauer_ms": "1500–3000 gesamt",
  "stagger_ms": "30–80 je Zeile",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 1500
 },
 "gesehen_bei": [
  {
   "seite": "Goodgrowth Portfolio (Codrops 08/2026)",
   "url": "https://tympanus.net/codrops/2026/08/27/goodgrowth-boot-sequences-spinning-discs-and-the-art-of-the-portfolio/",
   "auszeichnung": "",
   "beobachtung": "Laut Codrops-Telegram-Teaser ein Portfolio im Stil des Gamings der späten 90er und frühen 2000er mit Boot-Sequenzen, drehenden Discs, 3D, Shadern und Sound. Der Artikel selbst war nicht abrufbar. Aufnahme wegen Codrops-Feature als handwerklich herausragend, nur eine Quelle.",
   "art": "artikel"
  },
  {
   "seite": "Codrops: Sixty Frames for the Record (Wall of CRTs)",
   "url": "https://tympanus.net/codrops/2026/08/22/sixty-frames-for-the-record-a-three-js-game-seven-fly-throughs-and-a-wall-of-crts/",
   "auszeichnung": "",
   "beobachtung": "Retro-CRT-Ästhetik als Teil desselben Trends (Three.js-Spiel, CRT-Wand). Kein direkter Boot-Intro-Beleg.",
   "art": "artikel"
  },
  {
   "seite": "Goodgrowth (Matt Stone)",
   "url": "https://goodgrowth.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: Loader-Struktur (loader-bar, loader-row, loader-previews) und rotierende Disc (.enter-disc-spin, preserve-3d, animation 5s linear infinite rotateY); Ecklabels in Geist Pixel. Codrops-Case-Study zur Boot-Sequenz verlinkt die Seite.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Goodgrowth: Boot Sequences, Spinning Discs, and the Art of the Portfolio (Codrops)",
   "url": "https://tympanus.net/codrops/2026/08/27/goodgrowth-boot-sequences-spinning-discs-and-the-art-of-the-portfolio/"
  }
 ],
 "kombinierbar_mit": [
  "scramble-decode",
  "shader-uebergang-dissolve",
  "einmal-intro-session"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/preloader-intro/boot-sequenz-intro/",
  "meta": "https://cecodesign.de/lab/fundus/preloader-intro/boot-sequenz-intro/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/preloader-intro/boot-sequenz-intro/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Erster Produktionsbeleg."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Seite startet wie ein Rechner: Röhre an, Startprotokoll läuft durch, dann schaltet sich die echte Oberfläche ein.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "zeile_ms": "45 je Zeile (linear, Zeilen werden ganz angehängt), einzelne Zeilen +80 bis +120 ms",
   "cursor": "Blockcursor, animation 1s steps(1) infinite (1 Hz, unter 3 Hz)",
   "kurve_roehre": "expo.out cubic-bezier(0.16, 1, 0.3, 1)",
   "roehre_an": "scaleX 0 → 1 bei scaleY 0.005 in 200 ms, dann scaleY 0.005 → 1 in 360 ms, brightness 2.4 → 1; leuchtender Strahl 2 px weiß mit Glühen, blendet in der ersten Hälfte aus",
   "roehre_aus": "scaleY 1 → 0.005 in 180 ms, dann scaleX 1 → 0 in 120 ms, Nachleuchten-Punkt 360 ms",
   "halten_ms": 200,
   "oberflaeche": "nach dem Einschalten je Block opacity 0 → 1 und y 6 px → 0, 500 ms expo.out, Versatz 40 ms",
   "gesamt_ms": "ca. 2700 (Terminal, Desktop: 100 Pause + 560 an + 1000 Zeilen + 200 halten + 300 aus + 560 Oberfläche an), Telefon gekürzt ca. 2450; Wert wird in der Demo gemessen und angezeigt",
   "bios": "Speicher zählt linear 0 → 32768 MB in 480 ms, Modulbalken 18 Blockzeichen █/░, 12 Module je 65 ms",
   "antenne": "Schüssel rotateY 360° in 5 s linear infinite (wie die Disc bei goodgrowth), 5 Statuszeilen je 210 ms, Fortschrittslinie 2 px",
   "ton": "Web Audio, standardmäßig aus: Klick je Zeile square 1500–2000 Hz, 22 ms, Gain 0.02; Einschalten sine 120 → 38 Hz, 320 ms, Gain 0.16",
   "ui_hover_ms": "150 easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)",
   "kontaktplan": "Pässe mindestens 104 px breit, der verschobene Pass 158 px mit Zusatz „· verschoben“ (unter 1100 px ohne Zusatz, 104 px); Zeitachse mit overflow hidden, späte Pässe laufen rechts aus dem Bild"
  },
  "ausloeser": "laden",
  "touch": "Gekürzte Sequenz ab 760 px Breite abwärts (10 statt 16 Terminalzeilen, 6 statt 12 Module, 3 statt 5 Antennen-Meldungen). Zeilen umbrechen statt abgeschnitten zu werden. Überspringen-Knopf 40 px hoch. Produkt-UI zeigt auf dem Telefon nur die Karte „Nächster Kontakt“.",
  "reduziert": "Kein Intro: kein Strahl, kein Helligkeitsblitz, kein Cursorblinken. Die Oberfläche steht sofort da, die Werte-Anzeige sagt das.",
  "korrekturen": {
   "beschreibung": "Die Seite startet wie ein Computer, eine Konsole oder ein altes Spiel. Die Röhre schaltet sich ein (Linie öffnet sich zum Bild), Startzeilen laufen durch oder eine Disc dreht sich. Am Ende schaltet sich die eigentliche Oberfläche ein. Oft gibt es Ton, aber nur auf Wunsch.",
   "warum_es_wirkt": "Nostalgie an die späten 90er und frühen 2000er plus Erzählung: Die Ladezeit wird zur Geschichte. Passt zum Retro-Tech-Strang 2026 (Röhren, Pixel, Y2K). Bei technischen Produkten kann das Startprotokoll echte Informationen tragen.",
   "wann_einsetzen": "Bei Portfolios mit Spiel- oder Retro-Konzept, Gaming- und Musikprojekten und bei technischen Werkzeugen, deren Startprotokoll selbst etwas über das Produkt sagt.",
   "wann_nicht": "Bei gewöhnlichen Business-Seiten und überall, wo Besucher schnell an Inhalte wollen. Nur, wenn das Konzept es trägt.",
   "varianten": [
    "Terminal-Zeilen mit Zeitstempel und Blockcursor",
    "BIOS-Look mit Speichertest und Fortschrittsbalken aus Blockzeichen",
    "Drehende Disc oder Antenne mit Ecklabels",
    "Röhren-Einschaltlinie als Rahmen für alle drei"
   ],
   "umsetzung": "Terminal: Zeilen-Array, per Intervall (30–80 ms) als Zeile anhängen, Monospace, Cursor-Blinken per CSS steps(). Röhre einschalten: Container zuerst scaleY(0.005) scaleX(0), dann scaleX(1), dann scaleY(1), dazu ein kurzer Helligkeitsblitz. Weil ein dunkles Bild als Linie fast schwarz ist, braucht es einen eigenen leuchtenden Strahl. Ausschalten umgekehrt mit Nachleuchten. Ton nur nach Nutzerklick (Autoplay-Regeln) und mit sichtbarem Schalter, per Web Audio erzeugt. Länge strikt begrenzen, Überspringen per Knopf und Esc anbieten. Im Einsatz nur beim ersten Besuch pro Sitzung zeigen (sessionStorage); die Demo spielt es bei jedem Laden.",
   "mobil": "Gekürzte Sequenz.",
   "reduzierte_bewegung": "Kein Flackern, kein Blitz. Direkt die Oberfläche.",
   "barrierefreiheit": "Boot-Text aria-hidden, das Laden per aria-live ansagen. Blinken unter 3 Hz. Ton nie automatisch. Überspringen ist per Tastatur erreichbar und setzt den Fokus auf die Hauptüberschrift."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt nach Rezept saas-produkt-praezise: erfundene Überflug GmbH aus Darmstadt, SaaS für die Planung von Satellitenkontakten mit Bodenstationen (Darmstadt als Raumfahrtstandort). Das Rezept will, dass sich das Produkt selbst zeigt; deshalb ist das Startprotokoll das echte Startlog des Bodensegments und endet mit genau dem Kontakt, den die Oberfläche danach als Countdown zeigt. Geist und Geist Mono, Graustufen, ein Markenton Bernstein #ffb224 (Phosphor), Statusfarben nur im Produkt-UI. Varianten Terminal, BIOS und Antenne (Disc), alle mit Röhren-Ein- und -Ausschalten samt Strahl. Produkt-UI als echtes HTML (Kontaktplan mit Zeitachse, Nächster Kontakt). Ton per Web Audio, standardmäßig aus. Gesamtdauer wird gemessen angezeigt. Referenzen (nur Prinzipien): goodgrowth.com (Disc, Ecklabels), linear.app, raycast.com, edoardolunardi.dev, holtsetio.com. AD-Review 01.11.2026: Note 5"
 }
}