{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-studio-signatur",
 "name": "Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)",
 "name_en": "Signature asymmetric ease – cubic-bezier(0.625, 0.05, 0, 1)",
 "kurz": "Studio-Startseite, auf der Button, Slider, Akkordeon und Menü dieselbe eigene Kurve cubic-bezier(0.625, 0.05, 0, 1) mit krummen Dauern teilen; umschaltbar auf zwei weitere gemessene Hauskurven.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "luxuriös",
  "laut"
 ],
 "stimmung_roh": [
  "hochwertig",
  "präzise",
  "zeitgemäß",
  "agenturhaft"
 ],
 "technik": [
  "css",
  "gsap",
  "customease"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine eigene, asymmetrische inOut-Kurve als Markenzeichen für alle UI-Übergänge. Sie fährt kurz und zögernd an und läuft dann schnell, lang und sehr weich aus. Osmo nutzt cubic-bezier(0.625, 0.05, 0, 1) für Buttons, Schatten, Bildunterschriften und Slides. Dazu kommt eine kleine Dauer-Skala mit mittleren Werten zwischen 0,25 und 0,75 s. Kurve und Skala gelten konsequent für Hover, Menüs, Akkordeons und Slider-Navigation.",
  "warum_es_wirkt": "Die Kurve stammt nicht aus der Standardbibliothek. Darum wirkt jede Bewegung bewusst gestaltet und hochwertig. Weil alle Komponenten dieselbe Kurve teilen, entsteht Wiedererkennung wie bei einer Hausschrift.",
  "wann_einsetzen": "Agentur- und Portfolio-Websites, Marken mit Premiumanspruch und Komponentenbibliotheken. Als Standard-Ease für die ganze Oberfläche.",
  "wann_nicht": "Nicht für lange Einblendungen beim Scrollen, dort passt expo.out besser. Nicht für Bewegungen, die sofort reagieren müssen, etwa Drag-Feedback.",
  "varianten": [
   "Osmo-Skala: cubic-bezier(0.625, 0.05, 0, 1) mit 250 / 400 / 475 / 525 / 725 ms je nach Komponente",
   "Ein Token: cubic-bezier(0.65, 0.05, 0, 1) mit einer Dauer von 750 ms für alles (Lando Norris)",
   "Knapp: cubic-bezier(0, 0, 0, 1) mit 200 und 300 ms (Studio Dumbar), Gegenstück cubic-bezier(1, 0, 1, 1) für Ausgänge",
   "In GSAP dieselbe Kurve per CustomEase"
  ],
  "umsetzung": "CSS-Token im :root: --ease-signature: cubic-bezier(0.625, 0.05, 0, 1); --dur-ui-xs: .25s; --dur-ui-s: .4s; --dur-ui-m: .525s; --dur-ui-l: .725s; für Buttons .475s. Jede Transition nutzt nur diese Variablen. Bildunterschriften folgen dem Bild mit 300 ms Verzögerung, Gruppen mit 30 bis 50 ms Versatz. GSAP: CustomEase.create('signature', '0.625, 0.05, 0, 1'). Die krummen Dauern (475 / 525 / 725 ms) sind ein bewusstes Merkmal.",
  "mobil": "Kurve und Dauern bleiben gleich. Hover-Zustände auf :active und Fokus übertragen.",
  "reduzierte_bewegung": "Farb-, Schatten- und Opazitätswechsel bleiben mit derselben Kurve. Verschiebungen, Rollen und clip-path-Fahrten entfallen.",
  "barrierefreiheit": "Fokuszustände sofort sichtbar machen; die Outline nie animiert ein- oder ausblenden. Akkordeon mit aria-expanded und Region, Menü mit aria-expanded und Escape zum Schließen, Slider-Wechsel über eine aria-live-Region ansagen."
 },
 "messwerte": {
  "easing": "Produktion: Osmo cubic-bezier(0.625,0.05,0,1); Lando Norris cubic-bezier(0.65,0.05,0,1); Studio Dumbar cubic-bezier(0,0,0,1) (285×); Koto cubic-bezier(.15,0,.15,1) (43×)",
  "dauer_ms": "Produktion: Dumbar 200 / 300; Osmo 600 / 1200; Lando 750 (Token). Demo-Skala 250 / 400 / 475 / 525 / 725",
  "stagger_ms": "30–50 bei Gruppen; 300 Verzögerung für nachfolgende Bildunterschrift",
  "distanz": "8–16 px bzw. translate 50 % → 0 bei Buttons",
  "sonstiges": "Muster: eine Kurve + eine Standarddauer als CSS-Variable (--cubic-default/--duration-default)",
  "herkunft": "beobachtet",
  "quelle": "https://www.studiodumbar.com/assets/css/main.css"
 },
 "kurve": {
  "bezier": [
   0.625,
   0.05,
   0.0,
   1.0
  ],
  "css": "cubic-bezier(0.625, 0.05, 0, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Stacked Cards Slider",
   "url": "https://www.osmo.supply/resource/stacked-cards-slider",
   "auszeichnung": "",
   "beobachtung": "Schatten-Übergang 0,25 s cubic-bezier(0.625, 0.05, 0, 1).",
   "art": "demo"
  },
  {
   "seite": "Osmo – Flick Cards Slider",
   "url": "https://www.osmo.supply/resource/flick-cards-slider",
   "auszeichnung": "",
   "beobachtung": "Button-Opazität 0,4 s cubic-bezier(0.625, 0.05, 0, 1).",
   "art": "demo"
  },
  {
   "seite": "Osmo – Draggable Infinite Slider",
   "url": "https://www.osmo.supply/resource/draggable-infinite-slider-with-gsap",
   "auszeichnung": "",
   "beobachtung": "CSS-Übergänge mit eigener cubic-bezier-Kurve: Buttons 0,475 s, Bildunterschriften 0,525 s, Slide-Opazität 0,4 s; Navigation 0,725 s power3.",
   "art": "demo"
  },
  {
   "seite": "Studio Dumbar",
   "url": "https://www.studiodumbar.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Eine Kurve für fast alles: cubic-bezier(0, 0, 0, 1) 285× im main.css, fast immer mit 0.3s (186×) oder 0.2s (90×); Gegenstück cubic-bezier(1, 0, 1, 1) 84×.",
   "art": "website"
  },
  {
   "seite": "Lando Norris (OFF+BRAND)",
   "url": "https://landonorris.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Design-Token im :root: --cubic-default: cubic-bezier(0.65, 0.05, 0, 1); --duration-default: 0.75s.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Osmo Supply",
   "url": "https://www.osmo.supply/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Hauskurve cubic-bezier(.625,.05,0,1) im osmo-v2.shared.css mit .6s und 1.2s; GSAP-CustomEase „osmo“.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo Ressourcen-Sammlung",
   "url": "https://www.osmo.supply/collection"
  }
 ],
 "kombinierbar_mit": [
  "drag-slider-traegheit-loop",
  "akkordeon-panels",
  "flick-karten-stapel"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 4 Produktionsseiten (Koto als weitere Hauskurve in Messwerten)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Studio-Startseite, auf der Button, Slider, Akkordeon und Menü dieselbe eigene Kurve cubic-bezier(0.625, 0.05, 0, 1) mit krummen Dauern teilen; umschaltbar auf zwei weitere gemessene Hauskurven.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Fünf Stufen: cubic-bezier(0.625, 0.05, 0, 1); Ein Token: cubic-bezier(0.65, 0.05, 0, 1); Knapp: cubic-bezier(0, 0, 0, 1)",
   "css_token": "--ease-signature: cubic-bezier(0.625, 0.05, 0, 1); --dur-ui-xs: .25s; --dur-ui-s: .4s; --dur-ui-btn: .475s; --dur-ui-m: .525s; --dur-ui-l: .725s; --versatz: 40ms; --nachlauf: .3s",
   "dauer_ms": "Fünf Stufen: xs 250 (Schatten, Farben), s 400 (Opazität, Unterstreichung), btn 475 (Buttons), m 525 (Bildunterschrift, Akkordeon), l 725 (Slider, Menü). Ein Token: 750 für alles. Knapp: 200 (xs, s) und 300 (btn, m, l)",
   "stagger_ms": "Menülinks und zweite Unterschriftzeile 40 (Knapp 30); Menülinks starten 120 nach dem Öffnen; Menübild 160 Verzögerung",
   "nachlauf_ms": "Bildunterschrift folgt dem Bild nach 300 (Knapp 150); Menü-Fußzeile und Bildtext ebenso",
   "distanz": "Button-Fläche translateY 101 % → 0, Beschriftung rollt 100 %; Unterschrift und Akkordeontext 16 bzw. 8 px; Slider eine Kartenbreite plus Lücke; Bild in der Karte scale 1.08 → 1; Menü clip-path inset(0 0 100% 0) → inset(0); Menülinks translateY 105 % → 0",
   "zustaende": "Inaktive Karten Opazität 0.38; Schatten der aktiven Karte 0 22px 36px -30px rgba(20,20,20,.5); Pfeil-Hover 0 12px 26px -10px rgba(20,20,20,.45)",
   "fokus": "Outline 2 px, Versatz 3 px, ohne Transition",
   "ui_schalter": "Varianten-Umschalter 150 ms (bewusst außerhalb der Skala)",
   "schleife_ms": "Vorführung: Zeiger fährt Pfeil (2 Wechsel), Button-Hover, Akkordeon, Menü auf und zu; je Runde eine Hauskurve, etwa 9 bis 11 s"
  },
  "ausloeser": "hover",
  "touch": "Hover-Zustände von Button und Pfeilen liegen auf :active; Slider per Wischen ab 40 px oder Pfeil-Buttons (44 px); unter 760 px Slider über dem Text, Karte 68 vw, Menü als festes Vollbild ohne Teaserbild.",
  "reduziert": "Farben, Schatten und Opazität wechseln weiter mit Kurve und Dauer; alle Wege entfallen: Slider springt, Button-Fläche blendet statt zu fahren, Menü blendet in 400 ms statt per clip-path, Akkordeon klappt sofort, kein Kurvenpunkt.",
  "korrekturen": {
   "beschreibung": "Eine eigene, asymmetrische inOut-Kurve als Markenzeichen für alle UI-Übergänge. Sie fährt kurz und zögernd an und läuft dann schnell, lang und sehr weich aus. Osmo nutzt cubic-bezier(0.625, 0.05, 0, 1) für Buttons, Schatten, Bildunterschriften und Slides. Dazu kommt eine kleine Dauer-Skala mit mittleren Werten zwischen 0,25 und 0,75 s. Kurve und Skala gelten konsequent für Hover, Menüs, Akkordeons und Slider-Navigation.",
   "warum_es_wirkt": "Die Kurve stammt nicht aus der Standardbibliothek. Darum wirkt jede Bewegung bewusst gestaltet und hochwertig. Weil alle Komponenten dieselbe Kurve teilen, entsteht Wiedererkennung wie bei einer Hausschrift.",
   "wann_einsetzen": "Agentur- und Portfolio-Websites, Marken mit Premiumanspruch und Komponentenbibliotheken. Als Standard-Ease für die ganze Oberfläche.",
   "wann_nicht": "Nicht für lange Einblendungen beim Scrollen, dort passt expo.out besser. Nicht für Bewegungen, die sofort reagieren müssen, etwa Drag-Feedback.",
   "varianten": [
    "Osmo-Skala: cubic-bezier(0.625, 0.05, 0, 1) mit 250 / 400 / 475 / 525 / 725 ms je nach Komponente",
    "Ein Token: cubic-bezier(0.65, 0.05, 0, 1) mit einer Dauer von 750 ms für alles (Lando Norris)",
    "Knapp: cubic-bezier(0, 0, 0, 1) mit 200 und 300 ms (Studio Dumbar), Gegenstück cubic-bezier(1, 0, 1, 1) für Ausgänge",
    "In GSAP dieselbe Kurve per CustomEase"
   ],
   "umsetzung": "CSS-Token im :root: --ease-signature: cubic-bezier(0.625, 0.05, 0, 1); --dur-ui-xs: .25s; --dur-ui-s: .4s; --dur-ui-m: .525s; --dur-ui-l: .725s; für Buttons .475s. Jede Transition nutzt nur diese Variablen. Bildunterschriften folgen dem Bild mit 300 ms Verzögerung, Gruppen mit 30 bis 50 ms Versatz. GSAP: CustomEase.create('signature', '0.625, 0.05, 0, 1'). Die krummen Dauern (475 / 525 / 725 ms) sind ein bewusstes Merkmal.",
   "mobil": "Kurve und Dauern bleiben gleich. Hover-Zustände auf :active und Fokus übertragen.",
   "reduzierte_bewegung": "Farb-, Schatten- und Opazitätswechsel bleiben mit derselben Kurve. Verschiebungen, Rollen und clip-path-Fahrten entfallen.",
   "barrierefreiheit": "Fokuszustände sofort sichtbar machen; die Outline nie animiert ein- oder ausblenden. Akkordeon mit aria-expanded und Region, Menü mit aria-expanded und Escape zum Schließen, Slider-Wechsel über eine aria-live-Region ansagen."
  },
  "geprueft": "31.10.2026",
  "notiz": "Startseite des erfundenen Leipziger Studios Kessel & Wiehl: Header mit Unterstreichung und Menü-Knopf, rollender Button, Akkordeon, Projekt-Slider mit nachlaufender Bildunterschrift und Vollbild-Menü mit Teaserbild. Alle Transitions hängen an CSS-Variablen; der Umschalter tauscht nur die Token (Fünf Stufen, Ein Token, Knapp). Werte-Zeile zeigt die zuletzt genutzte Stufe, ein Punkt läuft synchron auf der Mini-Kurve. Vorführung mit gedachtem Zeiger, je Runde eine Hauskurve. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .56 auf .64 (4,8:1), aktueller Wert im Pult #B93918 statt Akzent #E2461D (4,7:1), Knopfrahmen im Kontrastmodus."
 }
}