{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-swiss-knackig",
 "name": "Animationsstil „Swiss knackig“",
 "name_en": "Swiss / crisp ease-out language",
 "kurz": "Programmseite eines Luzerner Kulturhauses: harte Masken, nur senkrechte oder waagerechte Wege, eine Kurve und vier Dauern als Token.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "sachlich",
  "präzise",
  "typografisch",
  "kühl"
 ],
 "technik": [
  "css",
  "gsap",
  "clip-path"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Sachliche, typografische Bewegungssprache: kurze Dauern, Ausklang-Kurven ohne Überschwingen, harte Masken statt Überblendungen. Bewegung läuft nur entlang des Rasters, also waagerecht oder senkrecht, ohne Diagonalen und ohne Rotation. Elemente schnappen in Position, der Versatz ist kurz und gleichmäßig. Zahlen zählen in Stufen hoch, Listen bauen sich zeilenweise auf.",
  "warum_es_wirkt": "Die Bewegung folgt der Rasterlogik, statt mit ihr zu konkurrieren. Kurze Wege und klare Kanten wirken präzise und selbstbewusst. Weil Austritte schneller sind als Eintritte, fühlt sich jeder Wechsel entschieden an.",
  "wann_einsetzen": "Typografisch getriebene Portfolios, Architektur, Designbüros, Kulturhäuser, Indexlisten, Programme mit Filtern.",
  "wann_nicht": "Bei verspielten, warmen Marken und bei Kinder- oder Lifestyle-Themen.",
  "varianten": [
   "Maske: clip-path inset statt Verschiebung",
   "Versatz: 100 % Weg innerhalb einer Maske (overflow: hidden)",
   "Stufen: nur Deckkraft mit steps(), passt vor allem zu Ziffern"
  ],
  "umsetzung": "Alle Werte als CSS-Token: --ease-swiss: cubic-bezier(0.25, 1, 0.5, 1) (power3.out), --ease-swiss-exit: cubic-bezier(0.5, 0, 0.75, 0) (power3.in), --dur-1: 200ms, --dur-2: 350ms, --dur-3: 500ms, --dur-4: 700ms, --stagger: 40ms. Austritte dauern etwa 70 % des Eintritts. Hover und Indikator per CSS-Transition, Sequenzen per Web Animations API oder GSAP mit denselben Token.",
  "mobil": "Bewegung unverändert. Gleitende Indikatoren nur, solange die Elemente in einer Zeile stehen.",
  "reduzierte_bewegung": "Masken sofort offen, nur Deckkraft in 150 ms. Zähler zeigen direkt den Endwert.",
  "barrierefreiheit": "Kurze Dauern sind auch für vestibulär empfindliche Menschen gut verträglich. Zähler haben den Endwert im DOM, Filter melden ihren Zustand über aria-pressed, Spartenfarben stehen nie ohne Text-Label."
 },
 "messwerte": {
  "easing": "Produktion: power3.out = cubic-bezier(0.25,1,0.5,1) ('kin 34×, Cuberto); power2.out = cubic-bezier(0.33,1,0.68,1) (K72); Austritt power3.in",
  "dauer_ms": "Produktion Cuberto 700 / 1000; Skala 200 / 350 / 500 / 700",
  "stagger_ms": "'kin 25 und 150; typisch 30–50",
  "distanz": "8–16 px oder 100 % in Maske; keine Rotation",
  "sonstiges": "Wipe-Werte beobachtet (Green Stack); restliche Skala typisch",
  "herkunft": "beobachtet",
  "quelle": "https://by-kin.com/_next/static/chunks/612-ac8687f729729f44.js"
 },
 "kurve": {
  "bezier": [
   0.25,
   1,
   0.5,
   1
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Codrops – Design in Motion: Green Stack",
   "url": "https://tympanus.net/codrops/2025/03/26/design-in-motion-the-animation-principles-behind-green-stack/",
   "auszeichnung": "",
   "beobachtung": "Vertikale Achse als Kern aller Bewegungen; clip-path-Wipe 0,8 s power2.out; bewusst keine Standard-Fades.",
   "art": "artikel"
  },
  {
   "seite": "IBM Carbon – Motion (productive)",
   "url": "https://carbondesignsystem.com/elements/motion/overview/",
   "auszeichnung": "",
   "beobachtung": "Produktive Kurven: Standard cubic-bezier(0.2, 0, 0.38, 0.9), Eintritt (0, 0, 0.38, 0.9), Austritt (0.2, 0, 1, 0.9); Dauern 70/110/150/240/400/700 ms.",
   "art": "artikel"
  },
  {
   "seite": "'kin",
   "url": "https://by-kin.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): GSAP power3.out 34× als Standard für Reveals (overwrite auto), Stagger .025 und .15.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): cubic-bezier(.25,1,.5,1) (= power3.out) für Testimonial-/FAQ-Bewegungen mit .7s und 1s.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "IBM Carbon: Motion",
   "url": "https://carbondesignsystem.com/elements/motion/overview/"
  }
 ],
 "kombinierbar_mit": [
  "flip-zustandswechsel",
  "css-native-karussell"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 2 Produktionsseiten."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Programmseite eines Luzerner Kulturhauses: harte Masken, nur senkrechte oder waagerechte Wege, eine Kurve und vier Dauern als Token.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "ease": "--ease-swiss: cubic-bezier(0.25, 1, 0.5, 1) (power3.out)",
   "ease_austritt": "--ease-swiss-exit: cubic-bezier(0.5, 0, 0.75, 0) (power3.in)",
   "dauer_ms": "--dur-1 200 (UI, Hover, Filter-Indikator) · --dur-2 350 (Listenzeilen, Plakat-Text) · --dur-3 500 (Flächen-Wipe, Zähler, Kopflinie) · --dur-4 700 (Headline)",
   "stagger_ms": "--stagger 40, gleichmäßig für alle Gruppen",
   "austritt": "--exit .7: Abgang = 70 % des Eintritts (Zeilen 245 ms, ohne Stagger), danach neue Zeilen 350 ms",
   "variante_maske": "clip-path inset(100% 0 0 0) → inset(0); Abgang inset(0 0 0% 0) → inset(0 0 100% 0)",
   "variante_versatz": "translateY(100%) → 0 in overflow: hidden; Abgang → translateY(-100%)",
   "variante_stufen": "opacity 0 → 1 mit steps(4, end), Abgang steps(3, end)",
   "flaechen_wipe": "Plakat und Kopflinie clip-path inset(0 100% 0 0) → inset(0), 500 ms; Plakat-Text 120 ms später",
   "zaehler": "500 ms, 10 Treppenstufen, Wert per power3.out; Endwert sofort in einem Screenreader-Span",
   "auftakt_verzug_ms": "Kopflinie 0 · Saisonzeile 60 · Headline 100 · Zahlenleiste 200 (Zähler 260) · Filter 280 · Plakat 300 · Liste 340",
   "hover": "Unterstrich per clip-path 350 ms ein (power3.out), 200 ms aus (power3.in); Pfeil 8 px in 200 ms",
   "distanz": "nur x oder y: Zeilen 100 % in der Maske, Pfeil 8 px, keine Rotation, keine Diagonale",
   "reduziert": "opacity 0 → 1 in 150 ms linear, Masken sofort offen, Zähler springen auf den Endwert",
   "schriften": "Schibsted Grotesk 900 (Headline), 700–800 (Titel, Zahlen); Atkinson Hyperlegible Next 400; IBM Plex Mono 500 (Daten, tabular-nums)",
   "farben": "#0b0b0b auf #efede9; Sparten Musik #c4421a, Theater & Tanz #3d5f9a, Kunst #2f7d4a, Film #b0186b"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten per Tippen. Unter 640 px brechen die Filter-Chips um, der gleitende Indikator entfällt (er müsste sonst diagonal springen). Ticket-Pfeil bleibt sichtbar, Ziele mindestens 40 px hoch.",
  "reduziert": "Masken sind sofort offen, Inhalte blenden nur 150 ms ein, Zähler springen auf den Endwert, Hover-Übergänge sind abgeschaltet.",
  "korrekturen": {
   "beschreibung": "Sachliche, typografische Bewegungssprache: kurze Dauern, Ausklang-Kurven ohne Überschwingen, harte Masken statt Überblendungen. Bewegung läuft nur entlang des Rasters, also waagerecht oder senkrecht, ohne Diagonalen und ohne Rotation. Elemente schnappen in Position, der Versatz ist kurz und gleichmäßig. Zahlen zählen in Stufen hoch, Listen bauen sich zeilenweise auf.",
   "warum_es_wirkt": "Die Bewegung folgt der Rasterlogik, statt mit ihr zu konkurrieren. Kurze Wege und klare Kanten wirken präzise und selbstbewusst. Weil Austritte schneller sind als Eintritte, fühlt sich jeder Wechsel entschieden an.",
   "wann_einsetzen": "Typografisch getriebene Portfolios, Architektur, Designbüros, Kulturhäuser, Indexlisten, Programme mit Filtern.",
   "wann_nicht": "Bei verspielten, warmen Marken und bei Kinder- oder Lifestyle-Themen.",
   "varianten": [
    "Maske: clip-path inset statt Verschiebung",
    "Versatz: 100 % Weg innerhalb einer Maske (overflow: hidden)",
    "Stufen: nur Deckkraft mit steps(), passt vor allem zu Ziffern"
   ],
   "umsetzung": "Alle Werte als CSS-Token: --ease-swiss: cubic-bezier(0.25, 1, 0.5, 1) (power3.out), --ease-swiss-exit: cubic-bezier(0.5, 0, 0.75, 0) (power3.in), --dur-1: 200ms, --dur-2: 350ms, --dur-3: 500ms, --dur-4: 700ms, --stagger: 40ms. Austritte dauern etwa 70 % des Eintritts. Hover und Indikator per CSS-Transition, Sequenzen per Web Animations API oder GSAP mit denselben Token.",
   "mobil": "Bewegung unverändert. Gleitende Indikatoren nur, solange die Elemente in einer Zeile stehen.",
   "reduzierte_bewegung": "Masken sofort offen, nur Deckkraft in 150 ms. Zähler zeigen direkt den Endwert.",
   "barrierefreiheit": "Kurze Dauern sind auch für vestibulär empfindliche Menschen gut verträglich. Zähler haben den Endwert im DOM, Filter melden ihren Zustand über aria-pressed, Spartenfarben stehen nie ohne Text-Label."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Kulturhaus Halle Rotsee in Luzern (Programm Winter 26/27, Schweizer Schreibung ohne ß). Zeigt alle Token an einem Programm: Auftakt mit Kopflinie, Headline, Zähler, Liste und Plakat; Filterwechsel mit schnellem Abgang (245 ms) und gestaffeltem Aufbau (350 ms, 40 ms), Plakat wischt in der Spartenfarbe waagerecht über das alte. Umschalter Maske, Versatz, Stufen und ein Token-Pult, das die gerade benutzten Token aufleuchten lässt. Reine Web Animations API, Token werden aus den CSS-Variablen gelesen. Referenzen: museum-folkwang.de, berlinerfestspiele.de, zkm.de, mak.at (Prinzipien: Grotesk-Plakat, Programmliste, Farbblock). AD-Review 01.11.2026: Note 5. Plakatgrafik von textartigen Balken auf waagerechte, nach unten kräftigere Bänder mit einer Rinne zwischen zwei Ufern umgestellt (Lage je Sparte)."
 }
}