{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "magnetische-elemente",
 "name": "Magnetische Buttons und Elemente",
 "name_en": "Magnetic button / magnetic hover / Magnetic buttons / magnetic hover",
 "kurz": "Buttons und Icons ziehen sich zum Zeiger hin, der Text folgt versetzt und federt beim Verlassen zurück.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "luxuriös",
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "taktil",
  "kreativ",
  "selbstbewusst",
  "hochwertig"
 ],
 "technik": [
  "vanilla-js",
  "gsap",
  "motion",
  "framer-motion"
 ],
 "technik_gruppen": [
  "js",
  "gsap",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Button oder Icon zieht sich zum Zeiger hin, sobald dieser nahe kommt. Das Element wandert einen Teil des Abstands zwischen Zeiger und Mitte mit. Der Text darin bewegt sich schwächer oder gegenläufig, das erzeugt Tiefe. Beim Verlassen federt das Element elastisch zurück. Oft kombiniert mit einer Füllung oder einem Text-Roll beim Eintritt.",
  "warum_es_wirkt": "Der Button scheint geklickt werden zu wollen. Die Anziehung wirkt physisch und taktil, das Element fühlt sich lebendig an. Das ist dezenter als ein eigener Cursor und kommt ohne Ersatz für den System-Cursor aus. Seit Cuberto ist es ein Signatur-Detail kreativer Studios.",
  "wann_einsetzen": "Primäre CTAs, runde Icon-Buttons, Social-Links, Menü-Button, Scroll-Hinweise. Sparsam, ein bis drei pro Ansicht.",
  "wann_nicht": "Dichte Formulare und Formular-Buttons, Navigationen mit vielen eng stehenden Links, Fließtext-Links, alles mit Präzisionsklick. Dort springen die Ziele weg.",
  "varianten": [
   "Gezogen mit GSAP (Dennis Snellenberg): Versatz = (relative Zeigerposition − 0,5) × Stärke, Stärke 24 bis 50 px, Text 12 bis 25 px; hin 1,5 s power4.out, zurück 1,5 s elastic.out(1, 0.3)",
   "Radius mit Lerp ohne Bibliothek (Codrops): Anziehung ab 0,7 × Breite um die Mitte, Versatz 0,3 × Abstand, Lerp 0,1, Text gegenläufig × 0,6",
   "Feder (Antinomy, Framer Motion useSpring 600/100/0,2) oder Olivier Larose (Spring 150/15/0,1 bzw. GSAP quickTo 1 s elastic.out(1, 0.3)): Element folgt der vollen Distanz zur Mitte",
   "Mit Deko-Kreis, der beim Eintritt auf 1,3 skaliert (Codrops)",
   "Mit 3D-Kippen (rotateX/rotateY) zusätzlich zur Verschiebung (Codrops, Radius 0,8 × Breite)",
   "Seitenhintergrund wechselt beim Hover die Farbe (Codrops)",
   "Wackelnde Rückkehr mit CustomWiggle (GSAP-Demo)",
   "Cursor wird mit angezogen oder klebt am Button (siehe kontextueller-cursor, sticky-morph-cursor)",
   "Auf beliebige Elemente angewandt: Icons, Social-Links, Menüpunkte"
  ],
  "umsetzung": "Das <a> oder <button> bleibt als feste Trefferfläche stehen und trägt den Fokus. Bewegt wird nur eine innere Hülle, der Text darin noch einmal eigens. Sonst wandert die Trefferfläche mit und das Element zittert an der Kante. Rect bei jedem Bild oder bei Scroll und Resize neu messen.\n\nLerp-Variante: d = hypot(mx - cx, my - cy); if (d < rect.width * .7) { tx = (mx - cx) * .3; ty = (my - cy) * .3 } else { tx = ty = 0 }; x = lerp(x, tx, .1); huelle.style.transform = translate3d(x, y, 0); text.style.transform = translate3d(-x * .6, -y * .6, 0).\n\nGSAP-Variante: rx = (e.clientX - r.left) / r.width - .5; gsap.to(huelle, { x: rx * 50, y: ry * 50, duration: 1.5, ease: 'power4.out' }); beim Verlassen gsap.to(huelle, { x: 0, y: 0, duration: 1.5, ease: 'elastic.out(1, 0.3)' }). Alternativ gsap.quickTo(huelle, 'x', { duration: 1, ease: 'elastic.out(1, 0.3)' }).\n\nNur bei (hover: hover) and (pointer: fine) aktivieren. Dennis Snellenberg schaltet zusätzlich unter 540 px Fensterbreite ab.",
  "mobil": "Abschalten, Magnetismus nur bei (hover: hover) and (pointer: fine). Beim Tippen stattdessen Druck-Feedback mit scale .96.",
  "reduzierte_bewegung": "Kein Magnetismus. Ein Farb- oder Füllwechsel beim Hover genügt.",
  "barrierefreiheit": "Echtes <button> oder <a> verwenden. Den Fokus gleichwertig gestalten, etwa mit derselben Füllung bei :focus-visible. Bei Tastaturfokus ist keine Bewegung nötig. Die Trefferfläche bleibt stabil, der Fokusring liegt auf dem festen Element."
 },
 "messwerte": {
  "easing": "Power4.easeOut (Hin), Elastic.easeOut (Zurück) bei Dennis; Spring 600/100/0,2 bei Antinomy",
  "dauer_ms": "1500 hin und zurück (Dennis)",
  "stagger_ms": "",
  "distanz": "Stärke 24–50 px Button, 12–25 px Text (halbe Stärke, Parallaxe)",
  "sonstiges": "Nur Desktop > 540 px",
  "herkunft": "beobachtet",
  "quelle": "https://dennissnellenberg.com/assets/js/index-new.js",
  "aus_eintrag": [
   "magnetic-elements"
  ]
 },
 "kurve": {
  "bezier": [
   0.22,
   1,
   0.36,
   1
  ],
  "css": "cubic-bezier(0.22, 1, 0.36, 1)",
  "name": "power4.out",
  "dauer_ms": 1500
 },
 "gesehen_bei": [
  {
   "seite": "Codrops MagneticButtons (Repo/Demo)",
   "url": "https://github.com/codrops/MagneticButtons",
   "auszeichnung": "",
   "beobachtung": "Sechs magnetische Buttons; README nennt Cuberto-Services-Seite als Inspiration. Quellcode gelesen: Radius = Breite × 0.7, Versatz = Abstand × 0.3, Lerp 0.1, Text gegenläufig × 0.6.",
   "art": "demo"
  },
  {
   "seite": "Cuberto – Services",
   "url": "https://cuberto.com/services/",
   "auszeichnung": "",
   "beobachtung": "Inspirationsquelle laut Codrops-README; Seite abgerufen (Button-Verhalten nicht per Text prüfbar).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Olivier Larose: Magnetic Button",
   "url": "https://blog.olivierlarose.com/tutorials/magnetic-button",
   "auszeichnung": "",
   "beobachtung": "GSAP quickTo 1 s elastic.out(1, 0.3) bzw. Framer-Spring 150/15/0.1; Versatz ohne Faktor (volle Distanz zur Mitte).",
   "art": "artikel",
   "weitere_beobachtung": "GSAP quickTo mit duration 1 und elastic.out(1, 0.3); Framer-Motion-Spring stiffness 150, damping 15, mass 0,1; Versatz = rohe Distanz zum Mittelpunkt."
  },
  {
   "seite": "Motion Examples: Cursor magnetic target",
   "url": "https://motion.dev/examples/react-cursor-magnetic",
   "auszeichnung": "",
   "beobachtung": "Offizielles Motion-Beispiel für magnetische Ziele.",
   "art": "demo"
  },
  {
   "seite": "GSAP Demo Hub – Magnetic Button (overwrite modes)",
   "url": "https://demos.gsap.com/demo/magnetic-button-overwrite-modes",
   "auszeichnung": "",
   "beobachtung": "Spotlight-Demo mit CustomWiggle und overwrite-Modi.",
   "art": "demo"
  },
  {
   "seite": "Motion+ Cursor",
   "url": "https://motion.dev/docs/cursor",
   "auszeichnung": "",
   "beobachtung": "Magnetisches Einrasten an interaktiven Elementen als Kernfunktion der Cursor-Komponente.",
   "art": "artikel"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "index-new.js initMagneticButtons: .magnetic mit data-strength (24–50) und data-strength-text (12–25); Versatz = (relative Mausposition − 0,5) × strength, gsap 1,5 s Power4.easeOut; Zurück mit Elastic.easeOut 1,5 s; nur bei Fensterbreite > 540 px.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Antinomy Studio",
   "url": "https://www.antinomy.studio/",
   "auszeichnung": "",
   "beobachtung": "Komponente 'Magnetic' im Bundle: Framer-Motion useSpring (stiffness 600, damping 100, mass 0.2) für x/y = Abstand Cursor ↔ Elementmitte; mouseleave setzt auf 0.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Magnetic Buttons (Artikel)",
   "url": "https://tympanus.net/codrops/?p=50513"
  },
  {
   "titel": "Olivier Larose: Magnetic Button",
   "url": "https://blog.olivierlarose.com/tutorials/magnetic-button"
  },
  {
   "titel": "GSAP Demo – Magnetic Button (overwrite modes)",
   "url": "https://demos.gsap.com/demo/magnetic-button-overwrite-modes"
  },
  {
   "titel": "Osmo – Magnetic Hover Effect",
   "url": "https://www.osmo.supply/resource/magnetic-hover-effect"
  }
 ],
 "kombinierbar_mit": [
  "fuellung-vom-eintrittspunkt",
  "text-roll-hover",
  "kontextueller-cursor",
  "druck-feedback"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/magnetische-elemente/",
  "meta": "https://cecodesign.de/lab/fundus/hover/magnetische-elemente/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/magnetische-elemente/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "schriftanimation.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege mit Code-Werten. cuberto.com/services nicht als Magnet verifiziert (dort Cursor-Stick).",
   "02.11.2026: Priorität A → B (Lückenrecherche K2), weil von 7 Rezepten ausgeschlossen, „Kern“ passt nicht zur Nutzung."
  ],
  "zusammengelegt_aus": [
   "magnet-button",
   "magnetic-elements"
  ],
  "querverweis_kategorien": [
   "Cursor"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Buttons und Icons ziehen sich zum Zeiger hin, der Text folgt versetzt und federt beim Verlassen zurück.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0"
  ],
  "werte": {
   "gezogen": {
    "quelle": "Dennis Snellenberg",
    "versatz": "(Zeigerposition im Element − 0,5) × Stärke, nur über dem Element",
    "staerke_px": {
     "kreis": 50,
     "pille": 40,
     "menue": 40,
     "icon": 24
    },
    "staerke_text_px": {
     "kreis": 25,
     "pille": 20,
     "menue": 20,
     "icon": 12
    },
    "hin": "gsap.to 1500 ms power4.out, overwrite auto",
    "zurueck": "gsap.to 1500 ms elastic.out(1, 0.3)"
   },
   "radius": {
    "quelle": "Codrops MagneticButtons",
    "radius": "0,7 × Elementbreite ab Mitte",
    "versatz": "0,3 × Abstand Zeiger zu Mitte",
    "lerp": "0,1 pro Bild bei 60 fps, auf echte Bildrate umgerechnet: 1 − 0,9^(dt/16,667)",
    "text": "−0,6 × Versatz der Hülle (gegenläufig)"
   },
   "feder": {
    "quelle": "Antinomy Studio",
    "feder": "stiffness 600, damping 100, mass 0,2 (semi-implizit in 1-ms-Schritten)",
    "versatz": "volle Distanz Zeiger zu Mitte, nur über dem Element, beim Verlassen 0",
    "text": "fest"
   },
   "fuellung": "translate 0 102% → 0, 700 ms cubic-bezier(0.22, 1, 0.36, 1), Kuppe border-radius 50%/30% → 0",
   "textfarbe_ms": 500,
   "radius_ring": "gestrichelter Kreis 1,4 × Breite, sichtbar ab 1,5 × Radius, 400 ms",
   "touch": "scale 0.96 bei :active, 150 ms",
   "reduziert": "Füllung opacity 0 → 1, 150 ms linear",
   "groessen_px": {
    "kreis": "clamp(150, 15vw, 210)",
    "pille": "212 × 56",
    "menue": "112 × 46",
    "icon": 56
   }
  },
  "ausloeser": "hover",
  "touch": "Kein Magnetismus (nur bei hover: hover und pointer: fine aktiv). Beim Tippen drückt die Hülle auf scale 0.96 (150 ms).",
  "reduziert": "Kein Magnetismus, keine Parallaxe. Die Füllung blendet in 150 ms linear über, der Varianten-Umschalter ist ausgeblendet.",
  "korrekturen": {
   "beschreibung": "Ein Button oder Icon zieht sich zum Zeiger hin, sobald dieser nahe kommt. Das Element wandert einen Teil des Abstands zwischen Zeiger und Mitte mit. Der Text darin bewegt sich schwächer oder gegenläufig, das erzeugt Tiefe. Beim Verlassen federt das Element elastisch zurück. Oft kombiniert mit einer Füllung oder einem Text-Roll beim Eintritt.",
   "warum_es_wirkt": "Der Button scheint geklickt werden zu wollen. Die Anziehung wirkt physisch und taktil, das Element fühlt sich lebendig an. Das ist dezenter als ein eigener Cursor und kommt ohne Ersatz für den System-Cursor aus. Seit Cuberto ist es ein Signatur-Detail kreativer Studios.",
   "wann_einsetzen": "Primäre CTAs, runde Icon-Buttons, Social-Links, Menü-Button, Scroll-Hinweise. Sparsam, ein bis drei pro Ansicht.",
   "wann_nicht": "Dichte Formulare und Formular-Buttons, Navigationen mit vielen eng stehenden Links, Fließtext-Links, alles mit Präzisionsklick. Dort springen die Ziele weg.",
   "varianten": [
    "Gezogen mit GSAP (Dennis Snellenberg): Versatz = (relative Zeigerposition − 0,5) × Stärke, Stärke 24 bis 50 px, Text 12 bis 25 px; hin 1,5 s power4.out, zurück 1,5 s elastic.out(1, 0.3)",
    "Radius mit Lerp ohne Bibliothek (Codrops): Anziehung ab 0,7 × Breite um die Mitte, Versatz 0,3 × Abstand, Lerp 0,1, Text gegenläufig × 0,6",
    "Feder (Antinomy, Framer Motion useSpring 600/100/0,2) oder Olivier Larose (Spring 150/15/0,1 bzw. GSAP quickTo 1 s elastic.out(1, 0.3)): Element folgt der vollen Distanz zur Mitte",
    "Mit Deko-Kreis, der beim Eintritt auf 1,3 skaliert (Codrops)",
    "Mit 3D-Kippen (rotateX/rotateY) zusätzlich zur Verschiebung (Codrops, Radius 0,8 × Breite)",
    "Seitenhintergrund wechselt beim Hover die Farbe (Codrops)",
    "Wackelnde Rückkehr mit CustomWiggle (GSAP-Demo)",
    "Cursor wird mit angezogen oder klebt am Button (siehe kontextueller-cursor, sticky-morph-cursor)",
    "Auf beliebige Elemente angewandt: Icons, Social-Links, Menüpunkte"
   ],
   "umsetzung": "Das <a> oder <button> bleibt als feste Trefferfläche stehen und trägt den Fokus. Bewegt wird nur eine innere Hülle, der Text darin noch einmal eigens. Sonst wandert die Trefferfläche mit und das Element zittert an der Kante. Rect bei jedem Bild oder bei Scroll und Resize neu messen.\n\nLerp-Variante: d = hypot(mx - cx, my - cy); if (d < rect.width * .7) { tx = (mx - cx) * .3; ty = (my - cy) * .3 } else { tx = ty = 0 }; x = lerp(x, tx, .1); huelle.style.transform = translate3d(x, y, 0); text.style.transform = translate3d(-x * .6, -y * .6, 0).\n\nGSAP-Variante: rx = (e.clientX - r.left) / r.width - .5; gsap.to(huelle, { x: rx * 50, y: ry * 50, duration: 1.5, ease: 'power4.out' }); beim Verlassen gsap.to(huelle, { x: 0, y: 0, duration: 1.5, ease: 'elastic.out(1, 0.3)' }). Alternativ gsap.quickTo(huelle, 'x', { duration: 1, ease: 'elastic.out(1, 0.3)' }).\n\nNur bei (hover: hover) and (pointer: fine) aktivieren. Dennis Snellenberg schaltet zusätzlich unter 540 px Fensterbreite ab.",
   "mobil": "Abschalten, Magnetismus nur bei (hover: hover) and (pointer: fine). Beim Tippen stattdessen Druck-Feedback mit scale .96.",
   "reduzierte_bewegung": "Kein Magnetismus. Ein Farb- oder Füllwechsel beim Hover genügt.",
   "barrierefreiheit": "Echtes <button> oder <a> verwenden. Den Fokus gleichwertig gestalten, etwa mit derselben Füllung bei :focus-visible. Bei Tastaturfokus ist keine Bewegung nötig. Die Trefferfläche bleibt stabil, der Fokusring liegt auf dem festen Element."
  },
  "geprueft": "31.10.2026",
  "notiz": "Hero eines erfundenen Grafikstudios (Wendt Gestaltung, Leipzig) mit fünf magnetischen Elementen: runder CTA über dem Projektbild, Pille, drei Icon-Links, Menü-Button. Umschalter für drei gemessene Varianten (Gezogen/Snellenberg mit GSAP, Radius/Codrops mit Lerp und sichtbarem Anziehungsring, Feder/Antinomy). Die Vorführung führt einen gezeichneten Zeiger über alle Elemente, wechselt pro Runde die Variante und zeigt die Ruhelage gestrichelt. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .56 auf .64 (5,2:1), Radius-Ring höchstens 100vw breit (kein Querscrollen bei 320 px), Knopfrahmen im Kontrastmodus."
 }
}