# 12 Mágneses mikro-interakciók | Astro Dizájn Elemek > Mágneses mikro-interakciók és élő hanghullám: Mágneses vonzású CTA gomb, ugrálásmentes morphing akciógomb, mikrofon nélküli többrétegű Canvas szinuszhullám és taktilis választókapcsoló. *Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/12-magneses-mikrointerakciok* --- [Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 11](/autonom-weboldal/astro-dizajn-elemek/11-bento-es-gorgetesi-ter)[12](/autonom-weboldal/astro-dizajn-elemek)[01 →](/autonom-weboldal/astro-dizajn-elemek/01-morphing) [01Morphing](/autonom-weboldal/astro-dizajn-elemek/01-morphing)[02Kamera & Tér](/autonom-weboldal/astro-dizajn-elemek/02-kamera-es-ter)[03Anyagok & Fény](/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny)[04Tartalomfeltárás](/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras)[05Tipográfia](/autonom-weboldal/astro-dizajn-elemek/05-mozgo-tipografia)[06Termék 3D](/autonom-weboldal/astro-dizajn-elemek/06-terbeli-termek)[07UI & Átmenetek](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet)[08Karakter & Állapot](/autonom-weboldal/astro-dizajn-elemek/08-reagalo-karakter)[09Röntgen-látás](/autonom-weboldal/astro-dizajn-elemek/09-rontgen-latas)[10Élő Kalkulátor](/autonom-weboldal/astro-dizajn-elemek/10-elo-adat-es-kalkulator)[11Bento & Tér](/autonom-weboldal/astro-dizajn-elemek/11-bento-es-gorgetesi-ter)[12Mikro-UI & Hang](/autonom-weboldal/astro-dizajn-elemek/12-magneses-mikrointerakciok) 12 / 12 · Élő Bemutató 2. lépcső · Canvas/JS Sziget Minden konverzióközpontú oldal · Hang- és AI-felületek # Mágneses mikro-interakciók és élő hanghullám Mágneses vonzású CTA gomb, ugrálásmentes állapotváltó akciógomb, mikrofon nélküli többrétegű Canvas hanghullám és taktilis csúszka. Prémium Mágneses Mód Aktív 🎯 **Tesztelés:** Közelítsd a mutatót a gombhoz! A gombkeret, a szöveg és a nyíl rétegelten a kurzor felé mozdul, majd kilépéskor rugózva tér vissza. ### Mágneses Gomb Vezérlő Vektorfizika **Prémium vs. Normál Mód** Egy kattintással kikapcsolja a mágneses elmozdulást. Mágneses Vonzási Erő (Max Offset) 8 px A gomb maximális elmozdulása a középponttól. Érzékelési Sugár (Trigger Radius) 100 px A gombon túli vonzási gravitációs mező kiterjedése. **Gravitációs Mező Megjelenítése** Láthatóvá teszi a virtuális mágneses zónát. #### 🧲 Miért hat prémiumnak a rétegelt elmozdulás? Ha a teljes gomb mereven követné a kurzort, dobozszerű lenne a hatás. A gomb háttérteste `35%`, a szöveg `55%`, a nyíl pedig `75%` arányban mozdul el, finom fizikai paralaxis-mélységet keltve az emberi szem számára. Ugrálásmentes Morfolódás Aktív Állapot: Készenlétben (Kattints a fenti gombra a folyamat indításához) ### Morfolódó Gomb Vezérlő Zéró Layout Shift Szimulált Kimenet Választása **Prémium vs. Normál Átmenet** Normál: merev ugrás; Prémium: sima FLIP morfolódás. #### 📐 Miért rontja a konverziót az ugráló gomb? A weboldalak zömén beküldéskor a gomb mérete hirtelen összeugrik vagy megnyúlik, meglökve az alatta lévő űrlapot (Cumulative Layout Shift). A morfolódó gomb szilárd méretkonténerben, finom opacity és SVG transzformációval vált állapotot, megbízhatóságot sugallva. Állapot: Nyugalom (Idle) 🔒 **Védett szimuláció:** Mikrofonhasználat és hangrögzítés nélkül működő tisztán matematikai szinusz-vizualizáció. ### Asszisztens Hullám Vezérlő 2D Canvas API Asszisztens Állapot Hullám-intenzitás (Amplitúdó) 1.0× Beszédmoduláció magassága és dinamikája. Hullámzási Sebesség 1.0× Fáziseltolás gyorsasága az időfüggvényben. #### 🌊 Matematikai rétegződés A vizualizáció 3 egymásba fonódó szinuszhullámból áll (`y = sin(x * f + phase) * amp`): egy mélykék alapvonal, egy cián rezonanciahullám és egy fénylő arany harmonikus gerinc. Rejtett lap esetén a `requestAnimationFrame` azonnal leáll, nulla CPU-terhelést hagyva. Autonóm Csomagválasztó 📳 Haptikus visszajelzés készenlétben ### Professzionális B2B 4× Teljesítmény · Heti Automata Audit Alap Haladó Pro Vállalati ✦ 100,000 havi entitás-lekérdezés · 24/7 D1 gyorsítótár szinkronizáció ### Taktilis Vezérlő Fizikai Momentum **Prémium vs. Normál Slider** Prémium: beugró snap fizika és hullámgyűrű. **Mobil Haptikus Rezgés** 10 ms finom impulzus támogatott készülékeken. Közvetlen Fokozatváltás #### 📲 Taktilis élmény weben A natív csúszkák gyakran bizonytalanok, a felhasználó nem érzi pontosan, mikor ért el egy fokozatot. A taktilis snap vizuális impulzust (a thumb enyhe rugózását és tágulását), hangulatbeli megerősítést és a `navigator.vibrate(10)` API segítségével valós fizikai visszajelzést ad. ⚙️ **Hogyan működik? & Technikai adatok** 2. Szint · Interaktív Canvas/Fizika Grafikai motor **Magnetic Physics, Canvas 2D Sine Synthesis & Web Haptics (Vanilla JS)** Eszköz DPR korlát **Math.min(DPR, 2)** Életciklus védelem **Rejtett lapon automatikusan leáll** Hozzáférhetőség **prefers-reduced-motion támogatott** transform: translate3d(), rétegelt parallax (gomb 35%, szöveg 55%, nyíl 75%), requestAnimationFrame rugócsillapítás és navigator.vibrate() tapintási visszajelzés. 0 KB külső fizikai motor, kevesebb mint 0.2 ms keretfrissítési idő. Becsült ráta: **--** FPS (Helyi mérés, eszközfüggő) Tárgyalási Összehasonlítás Hagyományos merev CTA gomb vs. Élő Mágneses Vonzású Akció AIRanking.pro ## Gombok, amelyek szinte behúzzák a kattintást. A finom, rétegelt fizikai vonzás és a valós idejű állapotváltás prémium érzetet sugall. A látogató érzi, hogy egy intelligens, élő felülettel kommunikál. [Műhely finombeállítások ↗](#lab) Ajánlatkérés (Kattintson ide) Merev, élettelen doboz. Semmilyen elmozdulás vagy reakció nincs a mutatóra. Hagyományos merev sablon A gomb passzív, nem vonzza a figyelmet és nem kínál taktilisan kellemes mikro-élményt. ✦ ÉLŐ MIKRO-FIZIKA Asszisztens készenlétben Közelítsd a mutatót a gombhoz: A gombkeret, a szöveg és a nyíl rétegelten a kurzor felé úszik! ✦ Ügyfél-Márka Stúdió ## Személyre Szabás Tárgyaláshoz Márkapreset kiválasztása: Cégnév / Márkanév: Rövid ajánlat / Főcím: CTA Gomb felirat: Márkaszínek: Főszín (Elsődleges): Akcentszín (Másodlagos): Ügyfél Logó feltöltése (PNG, SVG, WebP · max 8 MB): 📁 Húzd ide a logófájlt, vagy **kattints a tallózáshoz** Transzparens PNG vagy tiszta SVG ajánlott Logó-kontraszt párna (fehér/sötét logókhoz): Termék- vagy Referenciakép (max 8 MB): 🖼️ Húzd ide a referenciaképet vagy termékfotót Használható a 01, 03, 04, 06, 07 és 11 modulokban Másodlagos / „Előtte” Képfeltöltés (pl. összehasonlításhoz · max 8 MB): 🖼️ Húzd ide az „Előtte” képet vagy másodlagos referenciát Használható a 03 és 04 modulokban az összehasonlító és folyékony átmenetekhez **Színek javaslata a feltöltött képből:** Kiolvastuk a domináns márkaszíneket a grafikából. **Megjegyzés ezen az eszközön** Alapértelmezésben a beállítások csak a jelenlegi böngészőlap bezárásáig élnek. 🔒 **100% Helyi adatvédelem:** A kiválasztott fájlok és márkanevek feldolgozása helyben, ebben a böngészőben történik; a bemutatóterem nem tölti fel őket szerverre és nem küldi analitikának. TÁRGYALÁSI KONCEPCIÓ ## Kiválasztott Elemek 0 db ☆ ### Még nincs kiválasztott dizájnelem Bármelyik modulban kattints a **„☆ Hozzáadás a koncepcióhoz”** gombra a kedvenc megoldások és beállított csúszkaértékek elmentéséhez! 🔒 Helyi exportálás: a fájlok nem mennek szerverre vagy CRM-be. ⛶ MOZIMÓD Élő Színpad