{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "druck-feedback",
 "name": "Druck-Feedback (Press/Tap)",
 "name_en": "Press feedback / tap scale / active state",
 "kurz": "Knöpfe, Tabs und Karten geben beim Drücken kurz nach und federn mit leichtem Überschwinger zurück.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "verspielt"
 ],
 "stimmung_roh": [
  "taktil",
  "freundlich"
 ],
 "technik": [
  "css",
  "motion"
 ],
 "technik_gruppen": [
  "css",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Beim Drücken gibt das Element kurz nach: Es schrumpft minimal (scale 0.95 bis 0.98) oder sinkt um 1 bis 2 px ein, der Schatten wird kleiner. Beim Loslassen federt es zurück, oft mit leichtem Überschwinger. Optional kommen ein kurzer Glow, ein Ripple oder eine Vibration dazu.",
  "warum_es_wirkt": "Der Knopf fühlt sich an wie ein echter Schalter. Das ist besonders auf Touch wichtig, wo es kein Hover gibt. Kleiner Aufwand, großer Gewinn an Wertigkeit.",
  "wann_einsetzen": "Alle Buttons, Karten mit Klickziel, Toggles, Icon-Buttons und Tabs.",
  "wann_nicht": "Nicht bei Textlinks im Fließtext. Skalierung unter 0.94 wirkt billig. Deaktivierte Buttons bekommen keinen Druckzustand.",
  "varianten": [
   "Skalieren: :active { scale: 0.97 } mit kurzem Rücksprung. Belegt sind 0.95 (Apple), 0.96 (Build in Amsterdam), 0.975 (Instrument) und 0.98 (Collins).",
   "Einsinken: translateY 1 bis 2 px, Schatten wird kleiner.",
   "Squash: scaleX 1.02 und scaleY 0.96 beim Drücken.",
   "In Motion (React): whileTap={{ scale: 0.97 }}, zusammen mit whileFocus.",
   "Haptik: navigator.vibrate(8 bis 15) auf Android. iOS ignoriert das."
  ],
  "umsetzung": ".btn { transition: scale .5s var(--feder); } .btn:not(:disabled):active { scale: .96; transition: scale .1s cubic-bezier(0.45, 0.02, 0.09, 0.98); }. Einfedern schnell (80 bis 100 ms), Ausfedern langsamer mit einer Feder als linear()-Kurve. Große Flächen wie Karten weniger stark skalieren (0.98). Robuster als reines :active ist eine Klasse, die bei pointerdown gesetzt und bei pointerup, pointercancel und pointerleave entfernt wird. Eine Mindest-Druckzeit von etwa 100 ms sorgt dafür, dass auch ein sehr kurzer Tipp sichtbar einfedert. Nur scale, translate und Schatten animieren, keine Layout-Eigenschaften.",
  "mobil": "Wichtigster Ersatz für Hover. Auf iOS greift :active erst mit einem (leeren) touchstart-Listener zuverlässig. touch-action: manipulation und -webkit-tap-highlight-color: transparent setzen.",
  "reduzierte_bewegung": "Farb- oder Helligkeitswechsel statt Skalierung, z. B. brightness(0.88) für 80 ms.",
  "barrierefreiheit": "Auch die Tastatur drückt sichtbar: Bei Leertaste und Enter die Druck-Klasse per keydown setzen und per keyup entfernen. Der Fokusring bleibt erhalten. Für Toggles aria-pressed, für Auswahlgruppen role=radio mit aria-checked."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.45,0.02,0.09,0.98) (Build in Amsterdam)",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "scale 0.95 (Apple) – 0.96 – 0.975 – 0.98",
  "sonstiges": "Press-Zustand nur für nicht deaktivierte Buttons",
  "herkunft": "beobachtet",
  "quelle": "https://buildinamsterdam.com/ ; https://www.instrument.com/_nuxt/entry.ee029dff.css"
 },
 "kurve": {
  "bezier": [
   0.45,
   0.02,
   0.09,
   0.98
  ],
  "css": "cubic-bezier(0.45, 0.02, 0.09, 0.98)",
  "name": "eigene Kurve",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Motion Tutorial: Tab select",
   "url": "https://motion.dev/tutorials/react-tab-select",
   "auszeichnung": "",
   "beobachtung": "whileTap und whileFocus als Mikro-Feedback, tastaturzugänglich über onTap.",
   "art": "artikel"
  },
  {
   "seite": "Josh W. Comeau: Squash and Stretch (04/2026)",
   "url": "https://www.joshwcomeau.com/animation/squash-and-stretch/",
   "auszeichnung": "",
   "beobachtung": "Squash-and-Stretch als Prinzip für glaubwürdige Mikro-Interaktionen; Ratio-Werte zwischen 1 und 2, dezent 25–50 %.",
   "art": "artikel"
  },
  {
   "seite": "Build in Amsterdam",
   "url": "https://buildinamsterdam.com/",
   "auszeichnung": "",
   "beobachtung": "Styled-Components-CSS: a/button:not([disabled]):active → transform scale(0.96) mit Kurve cubic-bezier(0.45,0.02,0.09,0.98).",
   "art": "website"
  },
  {
   "seite": "Collins",
   "url": "https://www.wearecollins.com/",
   "auszeichnung": "",
   "beobachtung": ".button:active{transform:scale(.98)}.",
   "art": "website"
  },
  {
   "seite": "Instrument",
   "url": "https://www.instrument.com/",
   "auszeichnung": "",
   "beobachtung": "entry.css: .button-large/-x-large:not([disabled]):active .shape → scale(.975), Akzent-Hintergrund.",
   "art": "website"
  },
  {
   "seite": "Apple",
   "url": "https://www.apple.com/",
   "auszeichnung": "",
   "beobachtung": "Play/Pause-Button der Inline-Medien: :active transform scale(.95) mit abgedunkeltem Scrim.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Josh W. Comeau: Squash and Stretch",
   "url": "https://www.joshwcomeau.com/animation/squash-and-stretch/"
  }
 ],
 "kombinierbar_mit": [
  "token-federnd-verspielt",
  "button-zustaende",
  "magnetische-elemente"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 4 Produktionsbelege; reale Spanne 0.95–0.98."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Knöpfe, Tabs und Karten geben beim Drücken kurz nach und federn mit leichtem Überschwinger zurück.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "einfedern_ms": 100,
   "einfedern_easing": "cubic-bezier(0.45, 0.02, 0.09, 0.98)",
   "ausfedern_ms": 500,
   "ausfedern_easing": "linear(0, 0.044, 0.155, 0.307, 0.476, 0.643, 0.795, 0.923, 1.023, 1.095, 1.139, 1.16, 1.162, 1.15, 1.129, 1.102, 1.075, 1.048, 1.025, 1.006, 0.991, 0.981, 0.976, 0.973, 0.974, 0.977, 0.981, 0.985, 0.99, 0.994, 0.997, 1, 1.002, 1.003, 1.004, 1.004, 1.004, 1.004, 1.003, 1.002, 1)",
   "feder": "gedämpfte Feder, Dämpfung 0.5, ca. 16 % Überschwinger",
   "skalieren": "scale 0.96 (Knopf, Tab, Icon), 0.98 (Karte)",
   "einsinken": "translateY 2px, Schatten 0 10px 22px -12px → 0 3px 6px -4px",
   "squash": "scale 1.02 / 0.96 (Knopf), 1.01 / 0.98 (Karte)",
   "mindest_druckzeit_ms": 100,
   "vibration_ms": 10,
   "reduziert": "filter brightness(0.88) bzw. Hintergrund rgba(18,20,43,.1), 80 ms linear",
   "zeitlupe": "Faktor 4 (400 ms / 2000 ms)"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Druck-Feedback per pointerdown; auf Android zusätzlich navigator.vibrate(10). Leerer touchstart-Listener für iOS, touch-action: manipulation, kein Tap-Highlight.",
  "reduziert": "Keine Skalierung und kein Versatz. Gedrückte Elemente werden 80 ms lang dunkler (brightness 0.88 bzw. leichter Hintergrund).",
  "korrekturen": {
   "beschreibung": "Beim Drücken gibt das Element kurz nach: Es schrumpft minimal (scale 0.95 bis 0.98) oder sinkt um 1 bis 2 px ein, der Schatten wird kleiner. Beim Loslassen federt es zurück, oft mit leichtem Überschwinger. Optional kommen ein kurzer Glow, ein Ripple oder eine Vibration dazu.",
   "warum_es_wirkt": "Der Knopf fühlt sich an wie ein echter Schalter. Das ist besonders auf Touch wichtig, wo es kein Hover gibt. Kleiner Aufwand, großer Gewinn an Wertigkeit.",
   "wann_einsetzen": "Alle Buttons, Karten mit Klickziel, Toggles, Icon-Buttons und Tabs.",
   "wann_nicht": "Nicht bei Textlinks im Fließtext. Skalierung unter 0.94 wirkt billig. Deaktivierte Buttons bekommen keinen Druckzustand.",
   "varianten": [
    "Skalieren: :active { scale: 0.97 } mit kurzem Rücksprung. Belegt sind 0.95 (Apple), 0.96 (Build in Amsterdam), 0.975 (Instrument) und 0.98 (Collins).",
    "Einsinken: translateY 1 bis 2 px, Schatten wird kleiner.",
    "Squash: scaleX 1.02 und scaleY 0.96 beim Drücken.",
    "In Motion (React): whileTap={{ scale: 0.97 }}, zusammen mit whileFocus.",
    "Haptik: navigator.vibrate(8 bis 15) auf Android. iOS ignoriert das."
   ],
   "umsetzung": ".btn { transition: scale .5s var(--feder); } .btn:not(:disabled):active { scale: .96; transition: scale .1s cubic-bezier(0.45, 0.02, 0.09, 0.98); }. Einfedern schnell (80 bis 100 ms), Ausfedern langsamer mit einer Feder als linear()-Kurve. Große Flächen wie Karten weniger stark skalieren (0.98). Robuster als reines :active ist eine Klasse, die bei pointerdown gesetzt und bei pointerup, pointercancel und pointerleave entfernt wird. Eine Mindest-Druckzeit von etwa 100 ms sorgt dafür, dass auch ein sehr kurzer Tipp sichtbar einfedert. Nur scale, translate und Schatten animieren, keine Layout-Eigenschaften.",
   "mobil": "Wichtigster Ersatz für Hover. Auf iOS greift :active erst mit einem (leeren) touchstart-Listener zuverlässig. touch-action: manipulation und -webkit-tap-highlight-color: transparent setzen.",
   "reduzierte_bewegung": "Farb- oder Helligkeitswechsel statt Skalierung, z. B. brightness(0.88) für 80 ms.",
   "barrierefreiheit": "Auch die Tastatur drückt sichtbar: Bei Leertaste und Enter die Druck-Klasse per keydown setzen und per keyup entfernen. Der Fokusring bleibt erhalten. Für Toggles aria-pressed, für Auswahlgruppen role=radio mit aria-checked."
  },
  "geprueft": "01.11.2026",
  "notiz": "Anmeldeseite der erfundenen „Klangwerk Musikschule, Münster“ (Probestunde für Kinder, Gestaltung nach Rezept „kurs-coaching-lernweg“: kühler heller Grund, Markenblau, Gelb als Markierung, Grün nur als Erfolg; Bricolage Grotesque, Onest, Shantell Sans für Kurs-Label und Randnotiz). Eigene SVG-Plakate je Instrument (Klavier, Gitarre, Trommeln) auf Punkteraster, keine Medienbilder. Instrument-Tabs, Unterrichts-Karten, Kinder-Stepper (1 bis 4), Buchungs-Button und Merken-Lesezeichen. Umschalter für Skalieren, Einsinken und Squash sowie Zeitlupe ×4. Druck per Klasse (Pointer und Tastatur) mit 100 ms Mindest-Druckzeit. Vorführung: ein gedachter Finger tippt sich durch die Anmeldung und wechselt nach jeder Runde die Variante. Zugang 02.11.2026: Pille „kostenlos“ im CTA rgba(255,255,255,.18) → .1 (4,7:1); bei ≤ 360 px Raster mit minmax(0, 1fr), CTA darf umbrechen, Tabs/Abos schmaler (kein Querscrollen); body grid-template-columns minmax(0, 1fr); Knopf-Rahmen im Kontrastmodus."
 }
}