{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-luxus-weich",
 "name": "Animationsstil „Luxus weich“",
 "name_en": "Luxury soft / slow sine motion",
 "kurz": "Hero eines Kitzbüheler Boutique-Hotels: Bildwechsel als Crossfade mit Blur, einmaliges Zurückskalieren oder Maske, alles in sine-Kurven mit langen Dauern; darunter Zimmer, die per Scroll durch eine Sinus-Kurve erscheinen.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "luxuriös"
 ],
 "stimmung_roh": [
  "luxuriös",
  "ruhig",
  "weich",
  "elegant"
 ],
 "technik": [
  "gsap",
  "css",
  "lenis"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "lenis"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Sehr sanfte, fast lineare Sinus-Kurven (sine.inOut, power1.inOut), lange Dauern von 1,2 bis 2,4 s und kleine Distanzen. Bilder blenden über Masken oder ein langsames, einmaliges Zurückskalieren von 1,08 auf 1 ein. Übergänge sind Crossfades mit leichtem Blur. Nie ruckartig, nie verspielt.",
  "warum_es_wirkt": "Ruhe und Großzügigkeit signalisieren Wertigkeit. Nichts drängt, Bild und Produkt stehen im Mittelpunkt.",
  "wann_einsetzen": "Mode, Schmuck, Hotels, Immobilien, Kosmetik, Weingüter, Kunst.",
  "wann_nicht": "Interaktive Werkzeuge, Formulare und Seiten mit hoher Informationsdichte. Auch auf einer Luxusseite gilt der Stil nur für Bilder und Hero-Wechsel; Buchung und Menüs brauchen ein schnelles UI-Tempo.",
  "varianten": [
   "Crossfade mit Blur",
   "Einmaliges Zurückskalieren statt Dauerzoom (Ken-Burns-Ersatz)",
   "Masken-Reveal per clip-path mit innerem Zurückskalieren",
   "Scroll-gescrubbte Sinus-Timeline"
  ],
  "umsetzung": "CSS-Token: --ease-lux: cubic-bezier(0.37, 0, 0.63, 1) (sine.inOut); --ease-lux-out: cubic-bezier(0.61, 1, 0.88, 1) (sine.out); --dur-lux: 1.4s; --dur-lux-lg: 2.2s. Bilder: Opazität 0 → 1 über 1,2 bis 1,4 s, scale 1,08 → 1 über 2,2 s, Blur 8 px → 0. Texte: y 10 bis 20 px, Versatz 30 ms (Raster) bis 120 ms (große Bilder). Scroll-Variante: Fortschritt durch −(cos(π·p) − 1) / 2 schicken. Smooth Scroll mit lerp 0,08 bis 0,1 nur, wenn keine Datums-Popover oder Buchungs-iFrames auf der Seite sind.",
  "mobil": "Blur weglassen, weil er auf schwachen Geräten teuer ist. Dauern leicht kürzen.",
  "reduzierte_bewegung": "Nur Crossfade, kein Scale, kein Blur, kein Smooth Scroll, keine automatische Diashow.",
  "barrierefreiheit": "Lange Einblendungen dürfen Inhalte nicht verstecken: Text steht sofort im DOM. Automatische Diashows brauchen einen Pause-Knopf; Bildwechsel per aria-live ansagen."
 },
 "messwerte": {
  "easing": "Produktion: sine.inOut / cubic-bezier(0.445,0.05,0.55,0.95) (Immersive Garden 103× / 12×); sine.out = cubic-bezier(0.61,1,0.88,1) (AREA 17); Näherung sine.inOut ≈ cubic-bezier(0.37,0,0.63,1)",
  "dauer_ms": "Produktion: Immersive Garden 300–1000 (häufig 500); AREA 17 300. Skala 500 / 700 / 1200 / 1600 / 2200",
  "stagger_ms": "30 (Raster) bis 120 (große Bilder)",
  "distanz": "y 10–20 px; scale 1,08 → 1; Blur 8 px → 0",
  "sonstiges": "GSAP-Namen beobachtet; cubic-bezier-Näherungen nach easings.net, Skala teils typisch",
  "herkunft": "beobachtet",
  "quelle": "https://immersive-g.com/assets/entry.DyxL_KXi.js"
 },
 "kurve": {
  "bezier": [
   0.37,
   0,
   0.63,
   1
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo – Repeating Image Transition",
   "url": "https://tympanus.net/Development/RepeatingImageTransition/",
   "auszeichnung": "",
   "beobachtung": "Panel-Reveal sine.inOut, Rasterelemente sine, Rahmen 0,5 s sine.inOut, Bildkopien sine.in/sine.",
   "art": "demo"
  },
  {
   "seite": "Codrops Demo – On-Scroll 3D Carousel",
   "url": "https://tympanus.net/Development/3DCarousel/",
   "auszeichnung": "",
   "beobachtung": "Scroll-Timeline mit ease sine.inOut; Raster-Fallback 0,6 s sine mit Stagger 0,03; Reduced-Motion-Crossfade 0,5 s power1.inOut.",
   "art": "demo"
  },
  {
   "seite": "Lenis (darkroom.engineering)",
   "url": "https://github.com/darkroomengineering/lenis",
   "auszeichnung": "",
   "beobachtung": "Standard: lerp 0,1, alternativ duration 1,2 s mit exponentieller Ausklangkurve.",
   "art": "demo"
  },
  {
   "seite": "Immersive Garden",
   "url": "https://immersive-g.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): GSAP sine.inOut 103× und sine.out 14× (z. B. Alpha .5s sine.inOut); CSS easeInOutSine cubic-bezier(.445,.05,.55,.95) 12× mit .3–1s.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "AREA 17",
   "url": "https://area17.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): sine.out-Kurve cubic-bezier(.61,1,.88,1) für Einblendungen mit .3s und Verzögerung .2s.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Lenis (GitHub)",
   "url": "https://github.com/darkroomengineering/lenis"
  }
 ],
 "kombinierbar_mit": [
  "endlos-scroll-galerie",
  "akkordeon-panels",
  "galerie-shared-element-vollbild"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 2 Produktionsseiten; echte Luxusmarken-Seiten (Bottega, Cartier, Rolex, Aesop) blocken automatisierten Abruf."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Hero eines Kitzbüheler Boutique-Hotels: Bildwechsel als Crossfade mit Blur, einmaliges Zurückskalieren oder Maske, alles in sine-Kurven mit langen Dauern; darunter Zimmer, die per Scroll durch eine Sinus-Kurve erscheinen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "css_token": "--ease-lux: cubic-bezier(0.37, 0, 0.63, 1) (sine.inOut); --ease-lux-out: cubic-bezier(0.61, 1, 0.88, 1) (sine.out); --dur-lux: 1.4s; --dur-lux-lg: 2.2s",
   "crossfade_blur": "Deckkraft 0 → 1 und blur(8px) → 0, 1400 ms sine.inOut; Touch ohne Blur",
   "zurueckskalieren": "Deckkraft 0 → 1 in 1200 ms sine.inOut, Bild scale 1.08 → 1 in 2200 ms sine.out, einmalig, kein Dauerzoom",
   "maske": "clip-path inset(100% 0 0 0) → inset(0) in 1600 ms sine.inOut, Bild scale 1.06 → 1 in 2200 ms sine.out",
   "text": "alter Text Deckkraft 1 → 0 in 500 ms sine.inOut; neue Zeilen y 16 px → 0 und Deckkraft, 1200 ms sine.out, Start 120 ms, Versatz 120 ms",
   "diashow": "Halten 5200 ms, Fortschrittsstrich linear über die Haltezeit, Pause-Knopf; Vorführung 1400 ms plus Übergangsdauer",
   "scroll_sinus": "p = (Fensterhöhe − Kartenoberkante) / (0.55 · Fensterhöhe) − 0.08 · Index, begrenzt 0–1; e = −(cos(π·p) − 1) / 2; Deckkraft e, scale 1.08 − 0.08 e, y (1 − e) · 20 px",
   "mobil": "alle Dauern × 0.8 (1120 / 960 / 1280 / 1760 ms), kein Blur",
   "buchung_ui": "token-toggle-asymmetrisch: Popover öffnen 300 ms, schließen 200 ms, cubic-bezier(0.4, 0, 0.2, 1), translate −6 px → 0; Hover 150–200 ms dieselbe Kurve",
   "reduziert": "nur Überblendung 500 ms sine.inOut, kein Scale, kein Blur, keine automatische Diashow, Zimmerbilder sofort sichtbar",
   "farben": "#f3eee7 Sand, #fef2e3 Creme (Buchungsleiste, Schrift auf Bild), #3e3a37 Text, #d5d1c8 Linien, #62645f Sekundär, #6e5a47 Hauston (Knöpfe)",
   "schrift": "Newsreader 300, opsz 72, −0.015em, Zeilenhöhe 1.05, h1 clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Kursiv für Orte; Mona Sans Text 17 px/1.6 wdth 100, Labels 12 px versal wdth 125, Laufweite 0.06em"
  },
  "ausloeser": "dauer",
  "touch": "Striche unter dem Bild wählen das Bild (Tippziel 36 px), Popover mit großen Zeilen. Die Buchungsleiste bleibt auf dem Telefon als feste untere Leiste erreichbar. Kein Blur, Dauern um 20 % kürzer.",
  "reduziert": "Bilder wechseln nur per Überblendung in 500 ms, ohne Scale und Blur. Die Diashow startet nicht von selbst. Die Zimmerbilder stehen sofort, ohne Scroll-Animation.",
  "korrekturen": {
   "beschreibung": "Sehr sanfte, fast lineare Sinus-Kurven (sine.inOut, power1.inOut), lange Dauern von 1,2 bis 2,4 s und kleine Distanzen. Bilder blenden über Masken oder ein langsames, einmaliges Zurückskalieren von 1,08 auf 1 ein. Übergänge sind Crossfades mit leichtem Blur. Nie ruckartig, nie verspielt.",
   "warum_es_wirkt": "Ruhe und Großzügigkeit signalisieren Wertigkeit. Nichts drängt, Bild und Produkt stehen im Mittelpunkt.",
   "wann_einsetzen": "Mode, Schmuck, Hotels, Immobilien, Kosmetik, Weingüter, Kunst.",
   "wann_nicht": "Interaktive Werkzeuge, Formulare und Seiten mit hoher Informationsdichte. Auch auf einer Luxusseite gilt der Stil nur für Bilder und Hero-Wechsel; Buchung und Menüs brauchen ein schnelles UI-Tempo.",
   "varianten": [
    "Crossfade mit Blur",
    "Einmaliges Zurückskalieren statt Dauerzoom (Ken-Burns-Ersatz)",
    "Masken-Reveal per clip-path mit innerem Zurückskalieren",
    "Scroll-gescrubbte Sinus-Timeline"
   ],
   "umsetzung": "CSS-Token: --ease-lux: cubic-bezier(0.37, 0, 0.63, 1) (sine.inOut); --ease-lux-out: cubic-bezier(0.61, 1, 0.88, 1) (sine.out); --dur-lux: 1.4s; --dur-lux-lg: 2.2s. Bilder: Opazität 0 → 1 über 1,2 bis 1,4 s, scale 1,08 → 1 über 2,2 s, Blur 8 px → 0. Texte: y 10 bis 20 px, Versatz 30 ms (Raster) bis 120 ms (große Bilder). Scroll-Variante: Fortschritt durch −(cos(π·p) − 1) / 2 schicken. Smooth Scroll mit lerp 0,08 bis 0,1 nur, wenn keine Datums-Popover oder Buchungs-iFrames auf der Seite sind.",
   "mobil": "Blur weglassen, weil er auf schwachen Geräten teuer ist. Dauern leicht kürzen.",
   "reduzierte_bewegung": "Nur Crossfade, kein Scale, kein Blur, kein Smooth Scroll, keine automatische Diashow.",
   "barrierefreiheit": "Lange Einblendungen dürfen Inhalte nicht verstecken: Text steht sofort im DOM. Automatische Diashows brauchen einen Pause-Knopf; Bildwechsel per aria-live ansagen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept boutique-hotel-gastgeber: erfundenes Haus Kaiserlicht in Kitzbühel, drei eigene, auf Canvas gemalte Hero-Bilder (Schwarzsee mit Wildem Kaiser, Zirbenstube, Haus zur blauen Stunde) und ein Zimmerbild. Umschalter: Crossfade mit Blur, Zurückskalieren, Maske; Vorführung wechselt je Bild die Variante. Darunter die Buchungsleiste mit Zeitraum (Mindestaufenthalt) und Gästen im asymmetrischen UI-Tempo, wie das Rezept verlangt, und Zimmerkarten mit scroll-gescrubbter Sinus-Kurve. Kein Lenis, weil das Rezept Smooth Scroll wegen der Datums-Popover ausschließt; die Trägheit aus dem Steckbrief ist deshalb nicht gezeigt. Referenzen (nur Prinzipien): das-stue.com, sommerrohouse.com, juvet.com, aman.com, thehoxton.com, immersive-g.com. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Sekundärgrau #82847F auf #62645F (5,2:1 auf Sand, 5,4:1 auf Creme), Buchungsleiste am Telefon minmax(0,…) und unter 360 px Umbruch der Werte (kein Querscrollen bei 320 px), Knopfrahmen im Kontrastmodus."
 }
}