{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "spline-embed",
 "name": "Spline-Szenen als Embed",
 "name_en": "Spline 3D embeds",
 "kurz": "Eine Lebkuchendose als Spline-artige 3D-Szene mit Zuständen: Zeigen öffnet den Deckel, Farbfelder wechseln das Blech.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "abklingend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "verspielt"
 ],
 "stimmung_roh": [
  "verspielt",
  "weich"
 ],
 "technik": [
  "spline",
  "webgl"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine 3D-Szene wird im Browser-Werkzeug Spline gestaltet: Formen, Materialien, Zustände und Ereignisse wie Hover, Klick oder Scroll. Export als Web-Embed (Viewer oder Runtime) oder als React-Komponente. Eingebunden im Hero oder in einer Produktkarte; Interaktionen laufen über Spline-Ereignisse oder die Runtime-API. Die Demo baut so eine Szene mit three.js nach, weil externe Dienste hier nicht geladen werden.",
  "warum_es_wirkt": "Designer ohne Three.js-Kenntnisse bekommen schnell interaktives 3D. Ein Objekt, das auf Zeiger und Klick reagiert, lädt zum Ausprobieren ein.",
  "wann_einsetzen": "Prototypen, kleine Budgets, Webflow- und Framer-Projekte, einzelne interaktive Objekte. Im Shop nur als echter Konfigurator mit Farben oder Varianten.",
  "wann_nicht": "Wenn die Ladezeit kritisch ist: Runtime und Szene sind oft mehrere MB groß. Wenn eigene Shader oder Effekte gebraucht werden. Auf Award-Niveau 2026 überwiegend durch eigenes Three.js oder R3F ersetzt (Einschätzung).",
  "varianten": [
   "Hero-Objekt: Objekt neben dem Claim, Blick folgt dem Zeiger",
   "Interaktive Produktkarte: Hover öffnet, Farbfelder steuern das Material",
   "Spline-Export nach three.js: dieselbe Szene ohne Runtime"
  ],
  "umsetzung": "Lazy laden, nach Interaktion oder per IntersectionObserver, vorher ein Poster-Bild zeigen. Zustände mit kurzen, ungleichen Übergängen: Öffnen mit Ausklang, Schließen schneller mit Anlauf. Farben oder Varianten von außen über die Runtime-API setzen statt mehrere Szenen zu laden. Hover nur auf dem Objekt auslösen, nicht auf der ganzen Fläche. Preis, Varianten und Kaufen bleiben HTML. Trendstatus abklingend ist eine Einschätzung, nicht belegt.",
  "mobil": "Ohne Hover: Tippen schaltet den Zustand, Wischen dreht. Auf schwachen Geräten statisches Bild oder Video als Ersatz.",
  "reduzierte_bewegung": "Animationen in den Spline-Zuständen abschalten: Zustände ohne Übergang, keine Eigendrehung, kein Schweben.",
  "barrierefreiheit": "aria-label mit Beschreibung des Objekts, Bedienung per Tastatur (Eingabe öffnet, Pfeiltasten drehen). Keine Inhalte nur im Embed."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [],
 "tutorials": [
  {
   "titel": "Spline",
   "url": "https://spline.design/"
  }
 ],
 "kombinierbar_mit": [
  "interaktives-3d-hero"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/spline-embed/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/spline-embed/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/spline-embed/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg in dieser Runde (prod.spline.design-Szenen nur auf spline.design selbst); bleibt C, Kandidat zum Streichen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Lebkuchendose als Spline-artige 3D-Szene mit Zuständen: Zeigen öffnet den Deckel, Farbfelder wechseln das Blech.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "zustand_offen": "300 ms cubic-bezier(0, 0, 0.2, 1), Dauer anteilig zum Restweg",
   "zustand_zu": "200 ms cubic-bezier(0.4, 0, 1, 1)",
   "deckel": "hebt 0.22 Einheiten ab und kippt an der hinteren Kante um 32°",
   "farbwechsel": "400 ms cubic-bezier(0, 0, 0.2, 1), Materialfarbe interpoliert",
   "bestaetigt": "In den Warenkorb: Dose hüpft 0.14 Einheiten, 250 ms auf (0, 0, 0.2, 1), 200 ms ab (0.4, 0, 1, 1); Zähler 200 ms",
   "neigung": "lerp 0.08 je Bild bei 60 Bildern/s, max. 12° zum Zeiger (Hero: seitlich ×2.2)",
   "eigendrehung": "0.12 rad/s, nur bei geschlossenem Deckel",
   "ziehen": "0.008 rad je Pixel, Nachlauf ×0.92 je Bild",
   "schweben_hero": "y = sin(t · 1.3) · 0.045, Zutaten ±0.07",
   "hover_erkennung": "Raycast auf die Dose (wie Spline-Ereignis Mouse Hover), nicht auf die ganze Kachel",
   "lazy": "Szene startet per IntersectionObserver, bis dahin Poster-SVG; Canvas blendet 400 ms ein",
   "ui": "150 ms cubic-bezier(0, 0, 0.2, 1)",
   "kamera": "PerspectiveCamera fov 30, Abstand max(6.7, 1.7 / (tan 15° · Seitenverhältnis)), Blick auf y 0.5",
   "licht": "Studio-Umgebung aus 4 Softboxen über PMREM, DirectionalLight 1.2, HemisphereLight 0.35, ACES, Belichtung 1.05",
   "material": "Blech MeshPhysicalMaterial metalness 0.35, roughness 0.34, clearcoat 1, clearcoatRoughness 0.12; Druck als Canvas-Textur 4096×192 und 1024×1024",
   "farben": "Burgrot #a8342b, Tannengrün #24503d, Nachtblau #25335a, Zinn #c9c4b8",
   "pixelratio": "max. 2"
  },
  "ausloeser": "hover",
  "touch": "Tippen auf die Dose öffnet und schließt den Deckel, waagerechtes Wischen dreht sie (touch-action: pan-y). Keine Neigung zum Zeiger. Die Variantenleiste ist eingeklappt.",
  "reduziert": "Zustände und Farben wechseln ohne Übergang. Keine Eigendrehung, keine Neigung, kein Schweben, kein Hüpfen. Gerendert wird nur bei Eingabe.",
  "korrekturen": {
   "beschreibung": "Eine 3D-Szene wird im Browser-Werkzeug Spline gestaltet: Formen, Materialien, Zustände und Ereignisse wie Hover, Klick oder Scroll. Export als Web-Embed (Viewer oder Runtime) oder als React-Komponente. Eingebunden im Hero oder in einer Produktkarte; Interaktionen laufen über Spline-Ereignisse oder die Runtime-API. Die Demo baut so eine Szene mit three.js nach, weil externe Dienste hier nicht geladen werden.",
   "warum_es_wirkt": "Designer ohne Three.js-Kenntnisse bekommen schnell interaktives 3D. Ein Objekt, das auf Zeiger und Klick reagiert, lädt zum Ausprobieren ein.",
   "wann_einsetzen": "Prototypen, kleine Budgets, Webflow- und Framer-Projekte, einzelne interaktive Objekte. Im Shop nur als echter Konfigurator mit Farben oder Varianten.",
   "wann_nicht": "Wenn die Ladezeit kritisch ist: Runtime und Szene sind oft mehrere MB groß. Wenn eigene Shader oder Effekte gebraucht werden. Auf Award-Niveau 2026 überwiegend durch eigenes Three.js oder R3F ersetzt (Einschätzung).",
   "varianten": [
    "Hero-Objekt: Objekt neben dem Claim, Blick folgt dem Zeiger",
    "Interaktive Produktkarte: Hover öffnet, Farbfelder steuern das Material",
    "Spline-Export nach three.js: dieselbe Szene ohne Runtime"
   ],
   "umsetzung": "Lazy laden, nach Interaktion oder per IntersectionObserver, vorher ein Poster-Bild zeigen. Zustände mit kurzen, ungleichen Übergängen: Öffnen mit Ausklang, Schließen schneller mit Anlauf. Farben oder Varianten von außen über die Runtime-API setzen statt mehrere Szenen zu laden. Hover nur auf dem Objekt auslösen, nicht auf der ganzen Fläche. Preis, Varianten und Kaufen bleiben HTML. Trendstatus abklingend ist eine Einschätzung, nicht belegt.",
   "mobil": "Ohne Hover: Tippen schaltet den Zustand, Wischen dreht. Auf schwachen Geräten statisches Bild oder Video als Ersatz.",
   "reduzierte_bewegung": "Animationen in den Spline-Zuständen abschalten: Zustände ohne Übergang, keine Eigendrehung, kein Schweben.",
   "barrierefreiheit": "aria-label mit Beschreibung des Objekts, Bedienung per Tastatur (Eingabe öffnet, Pfeiltasten drehen). Keine Inhalte nur im Embed."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept d2c-produkt-zuerst, erfundene Lebküchnerei Weißgerber aus Nürnberg (Weißgerbergasse), Elisen-Dose No. 3 auf einer Produktseite: Young Serif nur für den Claim, Instrument Sans für Preis und UI, warme Neutraltöne, Kurvenpaar aus dem Rezept. Statt Spline-Embed eine eigene three.js-Nachbildung mit Spline-typischen Zuständen (Zu, Offen, Bestätigt), Raycast-Hover, Farbfeldern als Material-Variablen, Podest und weichem Studiolicht. Umschalter: Produktkarte, Hero-Objekt (mit schwebenden Zutaten), three.js-Export (Szenengraph mit echten Zahlen aus renderer.info). Referenzen: clay.global, blond.cc, kurppahosk.com. AD-Review 01.11.2026: Note 4. Nachgebessert: Touch-Hinweis gekürzt, damit der Knopf „Steuerung +“ ihn nicht verdeckt. Zugang 02.11.2026: 7 Symbol-SVGs aria-hidden; Chip „Neu im Herbst“ --pink #eb5c9d → #c93a7d (Weiß 4,8:1); Kachel role=\"img\" → role=\"group\" (das Pult mit Knöpfen liegt darin und war sonst für Screenreader verschluckt); Knopf „Bewegung anhalten“ am Ende der Variantenleiste (aria-pressed, ruft api.pause/weiter, reduziert ausgeblendet); Knopf-Rahmen im Kontrastmodus."
 }
}