{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "clip-path-form-hover",
 "name": "Form-Morph-Buttons (Clip-Path)",
 "name_en": "Clip-path shape morph button hover",
 "kurz": "Der Button bricht aus dem Rechteck aus: Beim Hover morpht seine Fläche per clip-path in eine zweite Form, als Blob, Pfeilspitze oder Wölbung.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "verspielt",
  "laut",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "organisch",
  "laut"
 ],
 "technik": [
  "css",
  "svg"
 ],
 "technik_gruppen": [
  "css",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Fläche des Buttons ist ein eigenes Element oder Pseudo-Element mit clip-path: path(), polygon() oder ellipse(). Der Link selbst bleibt ungeclippt. Beim Hover wechselt die Form zu einer zweiten Form mit gleicher Punktzahl, zum Beispiel Blob zu Blob, Rechteck zu Pfeilspitze oder flache zu stärkerer Wölbung. Der Browser interpoliert Punkt für Punkt. Eine Kurve mit y über 1 lässt die Form federn. Farbe und Pfeil-Icon wechseln mit, der Text bleibt ruhig und lesbar.",
  "warum_es_wirkt": "Der Button bricht mit der Rechteck-Norm und reagiert wie ein Körper statt wie eine Fläche. Das wirkt verspielt und organisch, braucht aber nur CSS und kostet kaum Leistung.",
  "wann_einsetzen": "Kreative und verspielte Marken, Kultur- und Kinderangebote, Studios. Am besten für einen einzelnen Haupt-CTA im Hero oder am Seitenende, auch für eine Showreel-Fläche.",
  "wann_nicht": "In seriösen B2B-Kontexten, in Formularen und bei mehreren Buttons nebeneinander, weil das unruhig wird.",
  "varianten": [
   "Blob-Morph per clip-path: path(), 500 ms mit Überschwing-Kurve cubic-bezier(0.585, 2.5, 0.645, 0.55) (Codrops ‚Janus‘)",
   "Rechteck zu Pfeilspitze per polygon(), 400 ms cubic-bezier(0.2, 1, 0.8, 1) (Codrops ‚Anthe‘)",
   "Wölbung per ellipse(100% 50%) zu ellipse(80% 50%), 750 ms cubic-bezier(0.65, 0.05, 0, 1), gemessen auf einer Video-Fläche",
   "Organischer border-radius-Blob als Kontur, etwa 58% 42% 55% 45% / 56% 45% 55% 44%",
   "Rotierender Kreis-Badge mit Text auf einem SVG-Pfad",
   "corner-shape (squircle, scoop, notch) für neue Eckenformen: ab Chrome 139, in Safari und Firefox nur als Vorschau (MDN, Stand 31.10.2026), siehe eigener Eintrag corner-shape-eckenformen",
   "Gooey: SVG-Filter aus Blur und Alpha-Matrix, ein Tropfen löst sich als Icon-Blase (Codrops „Creative Gooey Effects“), Rückfall ohne Filter"
  ],
  "umsetzung": ".btn { position: relative; isolation: isolate; } .btn .form { position: absolute; inset: 0; z-index: -1; background: #f2f2f2; clip-path: path('M253,77.6 C…Z'); transition: clip-path .5s cubic-bezier(.585, 2.5, .645, .55), background-color .2s linear; } .btn:hover .form, .btn:focus-visible .form { clip-path: path('M236.2,97.5 C…Z'); background-color: #ff5a1f; }. Beide Pfade brauchen dieselbe Befehlsfolge und Punktzahl, sonst springt die Form. path() kennt nur absolute Koordinaten: feste Buttongröße und per scale skalieren, oder die neuere Funktion shape() mit relativen Werten nutzen. polygon() und ellipse() sind mit Prozent und calc() responsiv. Bei einer Überschwing-Kurve die Farbe getrennt und linear überblenden, sonst schießt sie über die Zielfarbe hinaus. Den Fokusring nie auf das geclippte Element legen.",
  "mobil": "Ohne Hover spielt ein Tippen den Formwechsel kurz ab (Klasse per pointerdown setzen, nach Dauer plus etwa 450 ms wieder entfernen). Alternativ statisch lassen.",
  "reduzierte_bewegung": "Formwechsel ohne Überschwingen, sofort oder in 150 ms linear. Laufende Inhalte in der Fläche anhalten.",
  "barrierefreiheit": "Fokusstil auf das ungeclippte Element legen und :focus-visible denselben Formwechsel geben wie :hover. Die Form ist Dekoration (aria-hidden), der Link braucht einen klaren Text oder aria-label. Kontrast von Text zu beiden Flächenfarben prüfen, auch wenn mix-blend-mode: difference im Spiel ist. Gooey: den Filter nur auf die Formen legen, nie auf Text."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.65,0.05,0,1) (Lando); cubic-bezier(.4,0,0,1) (Cuberto)",
  "dauer_ms": "750 (Lando); 500/900 (Cuberto)",
  "stagger_ms": "",
  "distanz": "Ellipse 100 % → 80 %",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://www.landonorris.com/ ; https://cuberto.com/_astro/Footer.v_lo1qnf.css"
 },
 "kurve": {
  "bezier": [
   0.65,
   0.05,
   0.0,
   1.0
  ],
  "css": "cubic-bezier(0.65, 0.05, 0, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 750
 },
 "gesehen_bei": [
  {
   "seite": "Codrops ButtonHoverStyles (Repo)",
   "url": "https://github.com/codrops/ButtonHoverStyles",
   "auszeichnung": "",
   "beobachtung": "CSS gelesen: ‚Janus‘ morpht path() in 0.5 s mit cubic-bezier(0.585, 2.5, 0.645, 0.55), Kontur-Blob border-radius 58% 42% 55% 45% / 56% 45% 55% 44%; ‚Anthe‘ polygon → Pfeil 0.4 s cubic-bezier(0.2,1,0.8,1).",
   "art": "demo"
  },
  {
   "seite": "Lando Norris",
   "url": "https://www.landonorris.com/",
   "auszeichnung": "",
   "beobachtung": ".part-i-video-w clip-path ellipse(100% 50%) → :hover ellipse(80% 50%); Helm-Reveal ellipse(100% 120% at 50% 0%); 0.75s cubic-bezier(0.65,0.05,0,1).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "auszeichnung": "",
   "beobachtung": "Button-Füllung .ripple span: border-radius 50% 50% 0 0 → 0 und translateY(101%) → 0, transition-duration .5s/.9s cubic-bezier(.4,0,0,1).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Button Hover Styles",
   "url": "https://tympanus.net/codrops/?p=53413"
  }
 ],
 "kombinierbar_mit": [
  "magnetische-elemente",
  "token-federnd-verspielt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/",
  "meta": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json",
   "patch-luecken-b.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege.",
   "patch-luecken-b.json: Variante ‚2026: corner-shape … nicht in dieser Recherche verifiziert‘ ist jetzt geprüft: Chrome 139+, Safari/Firefox nur Preview (MDN BCD 31.10.2026), 4 Produktionsbelege – Details im neuen Eintrag corner-shape-eckenformen; Variantentext entsprechend ersetzen und kombinierbar_mit ergänzen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Button bricht aus dem Rechteck aus: Beim Hover morpht seine Fläche per clip-path in eine zweite Form, als Blob, Pfeilspitze oder Wölbung.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "blob": "clip-path: path() → path(), je M + 8 C + Z in einer festen Box von 280 × 140 px · 500 ms cubic-bezier(0.585, 2.5, 0.645, 0.55) (federt rund 30 % über) · Farbe getrennt 200 ms linear",
   "pfeil": "clip-path: polygon() mit 6 Punkten, polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%) → polygon(0 0, calc(100% - 46px) 0, 100% 50%, calc(100% - 46px) 100%, 0 100%, 30px 50%) · Text 8 px nach rechts · 400 ms cubic-bezier(0.2, 1, 0.8, 1)",
   "woelbung": "clip-path: ellipse(100% 50%) → ellipse(80% 50%) auf einer Showreel-Fläche 11:6 · 750 ms cubic-bezier(0.65, 0.05, 0, 1) (gemessen)",
   "farbe": "Ruhe #f2f2f2, Hover Signalfarbe #ff5a1f, Text #0b0b0b (Kontrast etwa 6,5 : 1)",
   "pfeil_icon": "rotate -45° → 0° mit Kurve und Dauer der Variante",
   "massstab": "Blob-Box per scale: 1 (bis 759 px), 1,15 (ab 760 px), 1,35 (ab 1180 px), weil path() nur absolute Koordinaten kennt",
   "fokus": "outline 2 px #ff5a1f am ungeclippten Link, Abstand 8 px (Blob −4 px)",
   "touch_dauer_ms": "Formwechsel bleibt nach dem Tippen Dauer + 450 ms stehen",
   "reduziert": "150 ms linear, kein Überschwingen, Laufband steht",
   "schrift": "TikTok Sans wdth 75 wght 800, −0.03em, Zeilenhöhe 0.9; Button 600 20 px; Labels DM Mono 500 11 px versal",
   "laufband_pause": "Knopf .halt nur in Variante Wölbung; html.still → .band { animation-play-state: paused }"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover-Zustand. Ein Tippen spielt den Formwechsel einmal ab (Klasse .an), die Form bleibt Dauer + 450 ms stehen und federt dann zurück. Der Button steht auf dem Telefon unter der Headline.",
  "reduziert": "Gleicher Formwechsel in 150 ms linear, ohne Überschwingen und ohne Textversatz. Das Showreel-Laufband steht, der Vorführ-Zeiger entfällt.",
  "korrekturen": {
   "beschreibung": "Die Fläche des Buttons ist ein eigenes Element oder Pseudo-Element mit clip-path: path(), polygon() oder ellipse(). Der Link selbst bleibt ungeclippt. Beim Hover wechselt die Form zu einer zweiten Form mit gleicher Punktzahl, zum Beispiel Blob zu Blob, Rechteck zu Pfeilspitze oder flache zu stärkerer Wölbung. Der Browser interpoliert Punkt für Punkt. Eine Kurve mit y über 1 lässt die Form federn. Farbe und Pfeil-Icon wechseln mit, der Text bleibt ruhig und lesbar.",
   "warum_es_wirkt": "Der Button bricht mit der Rechteck-Norm und reagiert wie ein Körper statt wie eine Fläche. Das wirkt verspielt und organisch, braucht aber nur CSS und kostet kaum Leistung.",
   "wann_einsetzen": "Kreative und verspielte Marken, Kultur- und Kinderangebote, Studios. Am besten für einen einzelnen Haupt-CTA im Hero oder am Seitenende, auch für eine Showreel-Fläche.",
   "wann_nicht": "In seriösen B2B-Kontexten, in Formularen und bei mehreren Buttons nebeneinander, weil das unruhig wird.",
   "varianten": [
    "Blob-Morph per clip-path: path(), 500 ms mit Überschwing-Kurve cubic-bezier(0.585, 2.5, 0.645, 0.55) (Codrops ‚Janus‘)",
    "Rechteck zu Pfeilspitze per polygon(), 400 ms cubic-bezier(0.2, 1, 0.8, 1) (Codrops ‚Anthe‘)",
    "Wölbung per ellipse(100% 50%) zu ellipse(80% 50%), 750 ms cubic-bezier(0.65, 0.05, 0, 1), gemessen auf einer Video-Fläche",
    "Organischer border-radius-Blob als Kontur, etwa 58% 42% 55% 45% / 56% 45% 55% 44%",
    "Rotierender Kreis-Badge mit Text auf einem SVG-Pfad",
    "corner-shape (squircle, scoop, notch) für neue Eckenformen: ab Chrome 139, in Safari und Firefox nur als Vorschau (MDN, Stand 31.10.2026), siehe eigener Eintrag corner-shape-eckenformen",
    "Gooey: SVG-Filter aus Blur und Alpha-Matrix, ein Tropfen löst sich als Icon-Blase (Codrops „Creative Gooey Effects“), Rückfall ohne Filter"
   ],
   "umsetzung": ".btn { position: relative; isolation: isolate; } .btn .form { position: absolute; inset: 0; z-index: -1; background: #f2f2f2; clip-path: path('M253,77.6 C…Z'); transition: clip-path .5s cubic-bezier(.585, 2.5, .645, .55), background-color .2s linear; } .btn:hover .form, .btn:focus-visible .form { clip-path: path('M236.2,97.5 C…Z'); background-color: #ff5a1f; }. Beide Pfade brauchen dieselbe Befehlsfolge und Punktzahl, sonst springt die Form. path() kennt nur absolute Koordinaten: feste Buttongröße und per scale skalieren, oder die neuere Funktion shape() mit relativen Werten nutzen. polygon() und ellipse() sind mit Prozent und calc() responsiv. Bei einer Überschwing-Kurve die Farbe getrennt und linear überblenden, sonst schießt sie über die Zielfarbe hinaus. Den Fokusring nie auf das geclippte Element legen.",
   "mobil": "Ohne Hover spielt ein Tippen den Formwechsel kurz ab (Klasse per pointerdown setzen, nach Dauer plus etwa 450 ms wieder entfernen). Alternativ statisch lassen.",
   "reduzierte_bewegung": "Formwechsel ohne Überschwingen, sofort oder in 150 ms linear. Laufende Inhalte in der Fläche anhalten.",
   "barrierefreiheit": "Fokusstil auf das ungeclippte Element legen und :focus-visible denselben Formwechsel geben wie :hover. Die Form ist Dekoration (aria-hidden), der Link braucht einen klaren Text oder aria-label. Kontrast von Text zu beiden Flächenfarben prüfen, auch wenn mix-blend-mode: difference im Spiel ist. Gooey: den Filter nur auf die Formen legen, nie auf Text."
  },
  "geprueft": "02.11.2026",
  "notiz": "Abschluss-CTA des erfundenen Passauer Studios Ortspitze in der Welt des Rezepts kreativstudio-buehne: Schwarz, TikTok Sans in Breite 75, eine Signalfarbe #ff5a1f, angeschnittene Riesen-Wortmarke. Der Button sitzt inline in der Headline hinter „vor?“. Umschalter Blob (path, Überschwingen), Pfeil (polygon) und Wölbung (ellipse auf einer Showreel-Fläche mit Laufband), jede Variante mit eigenen Quellwerten; die Werte stehen unten rechts. Die Vorführung fährt mit gezeichnetem Zeiger nacheinander alle drei Varianten an (4,2 s je Variante). Überschwingen nur bei Blob, wie bei der Quelle; die Farbe läuft dort getrennt 200 ms linear. Hinweis aus der Prüfnotiz: kombinierbar_mit sollte corner-shape-eckenformen ergänzen (nicht über bau änderbar). AD-Review 01.11.2026: Note 4. Steckbrief-Beschreibung ohne Aufzählungsziffern. Zugang 02.11.2026: Werte-Zeile Alpha .42 → .54 (4,9:1); Variante Wölbung mit Knopf „Laufband anhalten/abspielen“ (aria-pressed, gleiche Pause wie FUNDUS_DEMO.pause(), Laufband per animation-play-state), in der Vorschau aus; Kontrastmodus-Rahmen für Knöpfe. Offen: Riesen-Wortmarke #191919 (dekorativ, aria-hidden, bewusst angeschnitten) zählt die Prüfung weiter bei Kontrast und Abschneiden. Korrektur 02.11.2026: Varianten nach Regel 13 (?v=basis|gooey); Blob, Pfeil, Wölbung stehen in der Grundvariante unter „Form“. gooey: gleicher Kontakt-CTA von Ortspitze, Pfeil löst sich als Tropfen aus der Pille (SVG-Goo-Filter nach Codrops, Blur 10, Matrix 19 −9, atop), Schalter „Rückfall“ zeigt die Variante ohne Filter; vorfuehren() wechselt Filter und Rückfall.",
  "varianten": [
   {
    "id": "basis",
    "name": "Clip-Path-Morph: Blob, Pfeil, Wölbung",
    "knopf": "Clip-Path",
    "wann": "Abschluss-CTA eines Kreativstudios: die Fläche morpht beim Hover in eine zweite Form, Unterumschalter Blob, Pfeil, Wölbung.",
    "werte": {
     "rezept": "kreativstudio-buehne",
     "technik": "clip-path path() / polygon() / ellipse()",
     "dauer_ms": {
      "blob": 500,
      "pfeil": 400,
      "woelbung": 750
     },
     "kurve_blob": "cubic-bezier(0.585, 2.5, 0.645, 0.55)"
    }
   },
   {
    "id": "gooey",
    "name": "Gooey: Tropfen löst sich als Icon-Blase (SVG-Filter)",
    "knopf": "Gooey",
    "wann": "Ein einzelner, lauter CTA auf Kreativ- und Kampagnenseiten (Projekt anfragen, Showreel): der Pfeil löst sich als Tropfen aus der Pille. Nur auf einem Button, nicht in Formularen, nicht in seriösen B2B-Kontexten.",
    "werte": {
     "rezept": "kreativstudio-buehne",
     "filter": "<filter id=\"goo\" x=\"-20%\" y=\"-60%\" width=\"140%\" height=\"220%\" color-interpolation-filters=\"sRGB\">: feGaussianBlur in=SourceGraphic stdDeviation 10 → feColorMatrix Alpha-Zeile 0 0 0 19 −9 → feComposite in=SourceGraphic in2=goo operator=atop (Codrops „Creative Gooey Effects“)",
     "aufbau": "filter: url(#goo) nur auf .goo-form (Pille + Tropfen, aria-hidden); Text und Pfeil liegen ungefiltert darüber und bleiben scharf; der Link umfasst Pille und Zielort der Blase",
     "masse": "Pille 250 × 72 px, Tropfen 72 px rund, Weg 72 + 12 = 84 px, Link 334 × 72 px; Maßstab --k 1 / 1,15 (ab 760 px) / 1,35 (ab 1180 px), unter 380 px 0,84",
     "bewegung": "Tropfen und Pfeil translate 0 → 84 px, Pille scaleX .985, Pfeil rotate −45° → 0°, 700 ms cubic-bezier(0.16, 1, 0.3, 1); Farbe #f2f2f2 → #ff5a1f 200 ms linear; Druck: Tropfen scale .92",
     "rueckfall": "ohne Filter (Schalter „Rückfall“, Kontrastmodus, reduzierte Bewegung): zwei getrennte Formen, die Blase gleitet ohne Brücke hinaus",
     "fokus": ":focus-visible zeigt den Hover-Zustand, outline 2px #ff5a1f, Abstand 6px",
     "touch": "Tippen spielt die Ablösung einmal ab (700 + 450 ms)",
     "reduziert": "kein Filter, 150 ms linear",
     "kosten": "ein Filter auf kleiner Fläche; große Flächen vermeiden (Codrops)"
    }
   }
  ]
 }
}