{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "logo-aufbau-intro",
 "name": "Logo-Aufbau-Intro (Linien zeichnen, Teile fügen sich, Logo fliegt in die Navigation)",
 "name_en": "Logo build / draw-on intro",
 "kurz": "Ein Brillant zeichnet sich Facette für Facette, die Wortmarke steigt aus der Maske, dann fliegt die Marke per Flip in die Navigation und die dunkle Fläche rollt nach oben ab.",
 "kategorie": "Preloader & Intro",
 "kategorie_slug": "preloader-intro",
 "kategorie_nr": 2,
 "bau_chat": "C3",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "markenstark",
  "feierlich",
  "klar"
 ],
 "technik": [
  "svg",
  "gsap",
  "flip",
  "drawsvg",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Das Logo baut sich mittig auf: SVG-Konturen zeichnen sich, Buchstaben steigen aus Masken oder geometrische Teile fügen sich zusammen. Nach einer kurzen Haltezeit schrumpft das Logo und fliegt an seinen Platz in der Navigation (Flip). Gleichzeitig öffnet sich die Fläche dahinter.",
  "warum_es_wirkt": "Die Marke prägt sich als Erstes ein. Weil das Logo in die Navigation fliegt, gehen Intro und Seite ohne toten Moment ineinander über.",
  "wann_einsetzen": "Bei Markenrelaunches, Häusern mit starkem Bildzeichen und Kampagnen. Nur auf der Startseite.",
  "wann_nicht": "Bei Wortmarken ohne grafische Substanz, das wirkt aufgebläht. Nicht auf Unterseiten.",
  "varianten": [
   "Kontur zeichnen (stroke-dashoffset oder DrawSVG)",
   "Buchstaben steigen aus Masken",
   "Geometrische Teile fügen sich zusammen",
   "Logo-Flug in die Navigation (Flip)",
   "Mit Ton (Nische)"
  ],
  "umsetzung": "SVG-Pfade: strokeDasharray und strokeDashoffset auf die Pfadlänge setzen und auf 0 animieren, oder DrawSVGPlugin nutzen. Danach die Füllung einblenden. Für den Flug ist das Intro-Logo dasselbe Element wie das Logo in der Navigation: Zustand mit Flip.getState merken, Element in die Navigation hängen, dann Flip.from(state, { scale: true, duration: 1, ease: 'expo.inOut' }). Fallstrick: Für Fill-Logos mit variabler Strichstärke eine eigene Kontur-Version zeichnen. Beim Skalieren wächst auch die Strichstärke mit, deshalb stroke-width im Flug mitführen.",
  "mobil": "Kürzen, unter 1,5 s gesamt.",
  "reduzierte_bewegung": "Kein Intro. Das Logo steht von Anfang an in der Navigation.",
  "barrierefreiheit": "Das Intro-SVG ist aria-hidden. Das echte Logo in der Navigation trägt den zugänglichen Namen."
 },
 "messwerte": {
  "easing": "power2.inOut beim Zeichnen, expo.inOut beim Flug",
  "dauer_ms": "Zeichnen 1000–1600, Halt 200–400, Flug 800–1100",
  "stagger_ms": "60–120 je Pfad",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.65,
   0,
   0.35,
   1
  ],
  "css": "cubic-bezier(0.65, 0, 0.35, 1)",
  "name": "power2.inOut",
  "dauer_ms": 2600
 },
 "gesehen_bei": [
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "Vorlage 'Draw SVG' und Bonus 'First load animation'.",
   "art": "demo"
  },
  {
   "seite": "Awwwards-Inspiration: Intro Loader – OFF+BRAND Manifesto",
   "url": "https://www.awwwards.com/inspiration/intro-loader-off-brand-manifesto",
   "auszeichnung": "Awwwards-Inspiration-Eintrag",
   "beobachtung": "Nur der Titel in Suchergebnissen gesehen (Abruf blockiert). Inhalt bzw. Logo-Bezug ungeprüft, im Browser prüfen.",
   "art": "website-ungeprueft"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops Tag: preloader",
   "url": "https://tympanus.net/codrops/tag/preloader/"
  }
 ],
 "kombinierbar_mit": [
  "loader-wird-layout",
  "einmal-intro-session",
  "split-mask-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/preloader-intro/logo-aufbau-intro/",
  "meta": "https://cecodesign.de/lab/fundus/preloader-intro/logo-aufbau-intro/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/preloader-intro/logo-aufbau-intro/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein live geprüfter Produktionsbeleg; Awwwards-Link (OFF+BRAND Manifesto) nicht abrufbar. Vorschlag C."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-3.json (Kein live geprüfter Produktionsbeleg; Awwwards-Link (OFF+BRAND Manifesto) nicht abrufbar. Vorschlag C.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Brillant zeichnet sich Facette für Facette, die Wortmarke steigt aus der Maske, dann fliegt die Marke per Flip in die Navigation und die dunkle Fläche rollt nach oben ab.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "Flip@3.15.0",
   "DrawSVGPlugin@3.15.0"
  ],
  "werte": {
   "easing": "Aufbau power2.inOut = cubic-bezier(0.65, 0, 0.35, 1) · Flug und Fläche expo.inOut = cubic-bezier(0.87, 0, 0.13, 1) · UI-Hover 150 ms cubic-bezier(0.1, 0.6, 0.4, 1)",
   "dauer_ms": "Desktop gesamt ca. 2600: Aufbau 1400 (5 Ringe je 1000, Versatz 100) · Halt 300 · Flug 900. Mobil (bis 760 px) alle Zeiten × 0,55, gesamt ca. 1430",
   "stagger_ms": "100 je Ring (Tafel, 8 Sternfacetten, 8 Hauptfacetten, 16 Rundistfacetten, Rundiste) · Buchstaben 60 (Variante Maske 90)",
   "kontur": "DrawSVG 0 % → 100 % je Facetten-Polygon, Rundiste 50 % 50 % → 0 % 100 % (zeichnet sich von einem Punkt aus nach beiden Seiten)",
   "facetten": "33 Polygone fliegen von außen ein: radial 34 bis 64 Einheiten (viewBox 100), Drehung um den eigenen Mittelpunkt 24° bis 48°, Deckkraft 0 → 1, Zufallsversatz bis 50 ms je Teil",
   "maske": "Buchstaben yPercent 110 → 0 ab 0 ms, Zeichen clip-path circle(0 % → 75 %) und rotate −22° → 0 ab 250 ms",
   "buchstaben": "Wortmarke in 6 Masken, yPercent 110 → 0, 800 ms power2.inOut, Start bei 45 % des Aufbaus",
   "fuellung": "nach dem Zeichnen fill-opacity 0 → 0,16 (Tafel), 0,07 (Sterne), 0,05 (jede zweite Rundistfacette), 400 ms",
   "flug": "Flip.getState([Zeichen, Wortmarke]) → beide Knoten zurück in die Navigation hängen → Flip.from({ scale: true }) 900 ms expo.inOut; Zeichen 176 px → 34 px, Wortmarke 66 px → 21 px",
   "strichstaerke": "stroke-width als CSS-Variable --sw 0,82 → 3,1 (viewBox 100) im Flug, damit die Linie groß und klein etwa 1 px bleibt",
   "farbe_wortmarke": "#ffffff → #23282f ab 58 % des Flugs, 14 % der Flugdauer linear (wenn die Fläche die Navigation freigibt)",
   "flaeche": "clip-path inset(0 0 0 0) → inset(0 0 100% 0), gleichzeitig mit dem Flug, gleiche Dauer und Kurve",
   "produkt": "Ring scale 1.06 → 1, 1260 ms expo.inOut ab Flugbeginn",
   "farben": "Fläche #23282f Anthrazit, Linien #a88a5a Messing, Produktfläche #f4f4f2, Meta #686d74, Linien #d9dadb",
   "schrift": "Wortmarke Bodoni Moda 400 Versal, Laufweite 0.24em; Titel Bodoni Moda clamp(2.5rem, 5.5vw, 5.5rem)/1.05, −0.01em; Labels Instrument Sans 500 12px Versal +0.08em"
  },
  "ausloeser": "laden",
  "touch": "Gleiches Intro ohne Hover, alle Zeiten × 0,55 (gesamt ca. 1,4 s). Kopfzeile mit Menü, Logo mittig und Termin; Produktbild steht über dem Text.",
  "reduziert": "Kein Intro: Das Logo steht von Anfang an in der Navigation, die Seite blendet in 250 ms ein. Die Werte-Zeile nennt nur den reduzierten Ablauf.",
  "korrekturen": {
   "beschreibung": "Das Logo baut sich mittig auf: SVG-Konturen zeichnen sich, Buchstaben steigen aus Masken oder geometrische Teile fügen sich zusammen. Nach einer kurzen Haltezeit schrumpft das Logo und fliegt an seinen Platz in der Navigation (Flip). Gleichzeitig öffnet sich die Fläche dahinter.",
   "warum_es_wirkt": "Die Marke prägt sich als Erstes ein. Weil das Logo in die Navigation fliegt, gehen Intro und Seite ohne toten Moment ineinander über.",
   "wann_einsetzen": "Bei Markenrelaunches, Häusern mit starkem Bildzeichen und Kampagnen. Nur auf der Startseite.",
   "wann_nicht": "Bei Wortmarken ohne grafische Substanz, das wirkt aufgebläht. Nicht auf Unterseiten.",
   "varianten": [
    "Kontur zeichnen (stroke-dashoffset oder DrawSVG)",
    "Buchstaben steigen aus Masken",
    "Geometrische Teile fügen sich zusammen",
    "Logo-Flug in die Navigation (Flip)",
    "Mit Ton (Nische)"
   ],
   "umsetzung": "SVG-Pfade: strokeDasharray und strokeDashoffset auf die Pfadlänge setzen und auf 0 animieren, oder DrawSVGPlugin nutzen. Danach die Füllung einblenden. Für den Flug ist das Intro-Logo dasselbe Element wie das Logo in der Navigation: Zustand mit Flip.getState merken, Element in die Navigation hängen, dann Flip.from(state, { scale: true, duration: 1, ease: 'expo.inOut' }). Fallstrick: Für Fill-Logos mit variabler Strichstärke eine eigene Kontur-Version zeichnen. Beim Skalieren wächst auch die Strichstärke mit, deshalb stroke-width im Flug mitführen.",
   "mobil": "Kürzen, unter 1,5 s gesamt.",
   "reduzierte_bewegung": "Kein Intro. Das Logo steht von Anfang an in der Navigation.",
   "barrierefreiheit": "Das Intro-SVG ist aria-hidden. Das echte Logo in der Navigation trägt den zugänglichen Namen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept luxus-manufaktur-stille. Erfundene Schmuckmanufaktur Sanner aus Pforzheim (seit 1908, Solitär Enzlicht). Das Bildzeichen ist ein Brillant von oben aus 33 Facetten-Polygonen und der Rundiste; dieselben Polygone werden je Variante gezeichnet, zusammengesetzt oder per Kreismaske freigestellt. Zeichen und Wortmarke fliegen als getrennte Flip-Ziele in die mittige Navigation, die anthrazitfarbene Fläche rollt nach oben ab. Ring als eigenes SVG auf Hellgrau. Referenzen (nur Prinzipien): alange-soehne.com, h-moser.com, junghans.de, madethought.com, osmo.supply. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: Metagrau --meta #8b9097 → #686d74 (4,7:1 auf #f4f4f2). Solange das Intro liegt (data-zustand intro/flug), sind die Kinder der Bühne außer dem Intro inert (MutationObserver auf data-zustand), damit der Fokus nicht unter dem Vorhang landet. Pult-Knöpfe brechen unter 760 px um. Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}