{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "icon-squash-stretch",
 "name": "Icon-Squash-and-Stretch (Pfeil dehnt sich)",
 "name_en": "Icon squash and stretch micro-interaction",
 "kurz": "Der Pfeil im Button streckt sich beim Hover: Der Schaft wird länger, die Spitze rückt vor und wird schmaler. Das wirkt gezeichnet statt mechanisch.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "handwerklich",
  "freundlich"
 ],
 "technik": [
  "svg",
  "css",
  "motion"
 ],
 "technik_gruppen": [
  "css",
  "canvas",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Icon im Button, meist ein Pfeil, reagiert beim Hover wie ein elastischer Gegenstand. Statt nur nach rechts zu rutschen, wird der Schaft länger, die Spitze rückt vor und wird schmaler. Das folgt dem Prinzip Squash and Stretch aus dem Zeichentrick: Das Volumen bleibt erhalten, wer sich streckt, wird schmaler. Umsetzen lässt es sich als Pfad-Morph (d-Transition), mit Transforms auf Schaft und Spitze oder als kurzer Feder-Impuls.",
  "warum_es_wirkt": "Der Pfeil wirkt lebendig und gezeichnet statt mechanisch. Er nimmt die Richtung der Aktion vorweg, bevor man klickt. Ein kleines Detail, das generische Pfeil-Buttons sofort aufwertet.",
  "wann_einsetzen": "CTA-Pfeile, Weiter-Links, Listen mit Detailseiten, Download-Icons, Links nach außen, Chevrons in Akkordeons.",
  "wann_nicht": "Bei Icons ohne klare Bewegungsrichtung. Zu starke Werte oder eine lange Feder wirken cartoonhaft. In ruhigen Branchen den Pfad-Morph ohne Überschwingen wählen.",
  "varianten": [
   "Pfad-Morph: transition: d 300 ms, Schaft h14 → h17, Spitze 3 nach rechts und schmaler (Josh W. Comeau). Nicht in Safari.",
   "Schaft + Spitze: kurzer Schaft scaleX 2 (extern 1.2), Spitze translateX 200 %, 200 ms quad.out nach 200 ms Verzögerung (14islands). Läuft in allen Browsern.",
   "Feder-Impuls: bei pointerenter dehnen, nach 150 ms zurückfedern, Feder stiffness 300 / damping 12. Der Pfeil schwingt kurz über und staucht sich dabei.",
   "Ganzes Bedienelement staucht und dehnt sich: Badge scale(1.5, .8) ↔ scale(.667, 1.25); bei Fiddle.Digital scaleX 1.45 / scaleY 1.55 mit linear()-Feder über 900–1050 ms."
  ],
  "umsetzung": "SVG mit zwei Pfaden, Schaft und Spitze, in einer 24er-ViewBox. Pfad-Morph: .btn .schaft { d: path('M 5,12 h 14'); transition: d 300ms cubic-bezier(0.5, 1, 0.89, 1) } .btn:hover .schaft { d: path('M 5,12 h 17') } .btn .spitze { d: path('M 12,5 l 7,7 l -7,7'); transition: d 300ms cubic-bezier(0.5, 1, 0.89, 1) } .btn:hover .spitze { d: path('M 15,7 l 7,5 l -7,5') }. Ruhe- und Dehnform brauchen dieselben Pfadbefehle, sonst springt die Form. Safari kennt d nicht als CSS-Eigenschaft: dort die Transform-Variante nehmen (Schaft mit transform-box: fill-box, transform-origin links, scale: 2 1; Spitze translate: 200% 0) oder d per JS mit einer Feder setzen. Dasselbe SVG dient mit rotate(90) als Download-Pfeil und mit rotate(-45) als Link nach außen. Hover-Regeln in @media (hover: hover), :focus-visible gleich behandeln. Bewegung nur bei prefers-reduced-motion: no-preference.",
  "mobil": "Kein Hover: beim Tippen kurz abspielen. pointerdown dehnt, nach mindestens 450 ms federt der Pfeil zurück. Hover-Regeln nur unter @media (hover: hover), damit nach dem Tippen nichts gedehnt hängen bleibt.",
  "reduzierte_bewegung": "Keine Pfadänderung. Als Rückmeldung bleibt der Farbwechsel von Button oder Link.",
  "barrierefreiheit": "Icon mit aria-hidden=\"true\". Der Text von Button oder Link trägt die Bedeutung, reine Icon-Buttons brauchen ein aria-label. :focus-visible löst dieselbe Dehnung aus, der Fokusring bleibt sichtbar."
 },
 "messwerte": {
  "easing": "Spring stiffness 300 / damping 12 (Motion) oder Standard-Bezier; ease-quad-out (14islands); linear()-Bounce (Fiddle)",
  "dauer_ms": "300 (CSS d-Transition); Rückfederung nach 150 (Event-Variante); 200 + 200 Verzögerung (14islands); 900–1050 (Fiddle)",
  "stagger_ms": "",
  "distanz": "Schaft +3 Einheiten (24er-ViewBox), Spitze 3 nach rechts, Öffnung 7 → 5; Schaft scaleX 2 (intern) / 1.2 (extern)",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://www.joshwcomeau.com/animation/squash-and-stretch/; https://www.14islands.com/ ; https://fiddle.digital/"
 },
 "kurve": {
  "bezier": [
   0.5,
   1,
   0.89,
   1
  ],
  "css": "cubic-bezier(0.5, 1, 0.89, 1)",
  "name": "quad.out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Josh W. Comeau: Squash and Stretch (04/2026)",
   "url": "https://www.joshwcomeau.com/animation/squash-and-stretch/",
   "auszeichnung": "",
   "beobachtung": "Pfeil: Schaft M5,12 h14 → h17, Spitze M12,5 l7,7 l-7,7 → M15,7 l7,5 l-7,5; transition d 300ms; Spring 300/12; Event-Variante 150 ms; Reduced-Motion-Check im JS.",
   "art": "artikel"
  },
  {
   "seite": "14islands",
   "url": "https://www.14islands.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (f2973826e8215c7b.css): Link-Pfeil aus SVG-rect (Schaft) + path (Spitze), transform-origin left; bei :hover streckt sich der Schaft scaleX(2) (extern 1.2) und die Spitze wandert translateX(200%) – .2s var(--ease-quad-out) nach .2s Verzögerung.",
   "art": "website"
  },
  {
   "seite": "Fiddle.Digital",
   "url": "https://fiddle.digital/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Inline-CSS): Toggle-Knopf staucht/dehnt sich bei Hover (scaleX 1.45, scaleY 1.55) mit Feder-Easing linear(0,1.28 7%,1.42 10%,…,1) über .9–1.05 s.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Josh W. Comeau: Squash and Stretch",
   "url": "https://www.joshwcomeau.com/animation/squash-and-stretch/"
  }
 ],
 "kombinierbar_mit": [
  "druck-feedback",
  "token-federnd-verspielt",
  "text-roll-hover"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): 14islands ist der direkte Beleg (Pfeil dehnt sich); Fiddle zeigt Squash-and-Stretch an einem Bedienelement."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Pfeil im Button streckt sich beim Hover: Der Schaft wird länger, die Spitze rückt vor und wird schmaler. Das wirkt gezeichnet statt mechanisch.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "kurve": "cubic-bezier(0.5, 1, 0.89, 1) (quad.out, gemessen) für Pfad-Morph und Schaft + Spitze",
   "pfad_morph": "transition: d 300 ms; Schaft M 5,12 h 14 → M 5,12 h 17; Spitze M 12,5 l 7,7 l -7,7 → M 15,7 l 7,5 l -7,5 (24er-ViewBox, Spitze 3 nach rechts, halbe Öffnung 7 → 5)",
   "schaft_spitze": "Schaft M 5,12 h 8, scale 2 1 (extern 1.2 1), transform-box fill-box, transform-origin left center; Spitze M 9,8 l 4,4 l -4,4, translate 200% 0 (extern 40% 0); 200 ms quad.out, beim Hineingehen 200 ms Verzögerung, zurück ohne Verzögerung",
   "feder": "stiffness 300, damping 12, mass 1 (ζ ≈ 0.35); Ziel s = 1 für 150 ms, dann s = 0; Ausschlag +1.24 / −0.39 (bei s < 0 staucht der Pfeil: Schaft kürzer, Spitze breiter); Ruhe nach ca. 1 s; Geometrie Schaft M 5,12 h (14 + 3s), Spitze M (12 + 3s),(5 + 2s) l 7,(7 − 2s) l −7,(7 − 2s); Integration in festen 2-ms-Schritten",
   "ablage_download": "Ablage unter dem Download-Pfeil scale 1.12 1, 300 ms quad.out",
   "icons": "ein SVG für alle Richtungen: rechts; Download mit g rotate(90 12 12) in ViewBox 24 × 28 plus Ablage M 5,26.5 h 14; extern mit rotate(-45 12 12); stroke-width 2 (runder Knopf 1.5, Liste 1.8), linecap und linejoin round",
   "ui": "Farbwechsel Button und Link 150 ms cubic-bezier(0.2, 0, 0.38, 0.9) (Rezept, Token tech-präzise)",
   "touch_halten": "mindestens 450 ms gedehnt (300 ms Weg + 150 ms Stand), bei Schaft + Spitze 650 ms",
   "groessen": "Pfeil 1.25em im Button; runder Knopf clamp(76px, 8.4vw, 124px), Pfeil 46 %; Listenpfeil 26 px",
   "farben": "Grund #f5f7f7, Marke #005450, Marke tief #003f3c, Text #363b3b, leise #596666, Akzent #ffc776",
   "schriften": "Hedvig Letters Serif (Überschriften, h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem) / 1.06), Google Sans Flex 17 px / 1.6 (Text), Geist Mono (Demo-Regler)"
  },
  "ausloeser": "hover",
  "touch": "Hover-Regeln stehen nur unter @media (hover: hover). Beim Tippen setzt pointerdown die Dehnung, sie hält mindestens 450 ms (Schaft + Spitze 650 ms) und federt dann zurück; beim Feder-Impuls löst das Tippen den Impuls aus. Mobil gibt es die untere Leiste Anrufen / Termin / Anfahrt aus dem Rezept, auch dort dehnen sich die Pfeile.",
  "reduziert": "Keine Pfadänderung, kein Transform, kein Feder-Impuls. Als Rückmeldung bleibt der Farbwechsel von Button und Link (150 ms). Die Werte-Zeile zeigt den reduzierten Zustand.",
  "korrekturen": {
   "beschreibung": "Ein Icon im Button, meist ein Pfeil, reagiert beim Hover wie ein elastischer Gegenstand. Statt nur nach rechts zu rutschen, wird der Schaft länger, die Spitze rückt vor und wird schmaler. Das folgt dem Prinzip Squash and Stretch aus dem Zeichentrick: Das Volumen bleibt erhalten, wer sich streckt, wird schmaler. Umsetzen lässt es sich als Pfad-Morph (d-Transition), mit Transforms auf Schaft und Spitze oder als kurzer Feder-Impuls.",
   "warum_es_wirkt": "Der Pfeil wirkt lebendig und gezeichnet statt mechanisch. Er nimmt die Richtung der Aktion vorweg, bevor man klickt. Ein kleines Detail, das generische Pfeil-Buttons sofort aufwertet.",
   "wann_einsetzen": "CTA-Pfeile, Weiter-Links, Listen mit Detailseiten, Download-Icons, Links nach außen, Chevrons in Akkordeons.",
   "wann_nicht": "Bei Icons ohne klare Bewegungsrichtung. Zu starke Werte oder eine lange Feder wirken cartoonhaft. In ruhigen Branchen den Pfad-Morph ohne Überschwingen wählen.",
   "varianten": [
    "Pfad-Morph: transition: d 300 ms, Schaft h14 → h17, Spitze 3 nach rechts und schmaler (Josh W. Comeau). Nicht in Safari.",
    "Schaft + Spitze: kurzer Schaft scaleX 2 (extern 1.2), Spitze translateX 200 %, 200 ms quad.out nach 200 ms Verzögerung (14islands). Läuft in allen Browsern.",
    "Feder-Impuls: bei pointerenter dehnen, nach 150 ms zurückfedern, Feder stiffness 300 / damping 12. Der Pfeil schwingt kurz über und staucht sich dabei.",
    "Ganzes Bedienelement staucht und dehnt sich: Badge scale(1.5, .8) ↔ scale(.667, 1.25); bei Fiddle.Digital scaleX 1.45 / scaleY 1.55 mit linear()-Feder über 900–1050 ms."
   ],
   "umsetzung": "SVG mit zwei Pfaden, Schaft und Spitze, in einer 24er-ViewBox. Pfad-Morph: .btn .schaft { d: path('M 5,12 h 14'); transition: d 300ms cubic-bezier(0.5, 1, 0.89, 1) } .btn:hover .schaft { d: path('M 5,12 h 17') } .btn .spitze { d: path('M 12,5 l 7,7 l -7,7'); transition: d 300ms cubic-bezier(0.5, 1, 0.89, 1) } .btn:hover .spitze { d: path('M 15,7 l 7,5 l -7,5') }. Ruhe- und Dehnform brauchen dieselben Pfadbefehle, sonst springt die Form. Safari kennt d nicht als CSS-Eigenschaft: dort die Transform-Variante nehmen (Schaft mit transform-box: fill-box, transform-origin links, scale: 2 1; Spitze translate: 200% 0) oder d per JS mit einer Feder setzen. Dasselbe SVG dient mit rotate(90) als Download-Pfeil und mit rotate(-45) als Link nach außen. Hover-Regeln in @media (hover: hover), :focus-visible gleich behandeln. Bewegung nur bei prefers-reduced-motion: no-preference.",
   "mobil": "Kein Hover: beim Tippen kurz abspielen. pointerdown dehnt, nach mindestens 450 ms federt der Pfeil zurück. Hover-Regeln nur unter @media (hover: hover), damit nach dem Tippen nichts gedehnt hängen bleibt.",
   "reduzierte_bewegung": "Keine Pfadänderung. Als Rückmeldung bleibt der Farbwechsel von Button oder Link.",
   "barrierefreiheit": "Icon mit aria-hidden=\"true\". Der Text von Button oder Link trägt die Bedeutung, reine Icon-Buttons brauchen ein aria-label. :focus-visible löst dieselbe Dehnung aus, der Fokusring bleibt sichtbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt nach Rezept praxis-gesundheit-ruhig: Startseite der erfundenen Praxis „Therapiehaus Saggen“ (Physiotherapie und Osteopathie, Innsbruck) mit Hedvig Letters Serif, Google Sans Flex, Petrol #005450 und Apricot. Eigene SVG-Bildwelt: Terminkarte mit Nordkette und Gondel. Der Pfeil steckt in allen typischen Einsätzen: Header-CTA, Haupt-CTA, großer runder Knopf „Termin übernehmen“, Download-Pfeil mit Ablage (rotate 90), vier Behandlungs-Links, Route-Link nach außen (rotate -45) und mobile untere Leiste. Umschalter Pfad-Morph (Comeau-Werte, Standard) / Schaft + Spitze (14islands) / Feder-Impuls (Spring 300/12 per JS, Geometrie aus s, staucht beim Zurückschwingen). Das Rezept verbietet Federn im UI; deshalb ist der ruhige Pfad-Morph ohne Überschwingen voreingestellt, die Feder steht nur als Muster-Variante da. Die Vorführung fährt mit gedachtem Zeiger die sichtbaren Pfeile ab und wechselt pro Runde die Variante. AD-Review 01.11.2026: Note 4."
 }
}