# 11 Bento-rács & Görgetési tér | Astro Dizájn Elemek > Közelítésre ébredő Bento-rács és natív görgetési tér: Kártyákon átívelő közelségi peremfény, 0 KB görgetési JS-sel működő CSS view() kisimulás, rétegelt 3D kártyadőlés és fókuszkiemelő Bento. *Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/11-bento-es-gorgetesi-ter* --- [Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 10](/autonom-weboldal/astro-dizajn-elemek/10-elo-adat-es-kalkulator)[12](/autonom-weboldal/astro-dizajn-elemek)[12 →](/autonom-weboldal/astro-dizajn-elemek/12-magneses-mikrointerakciok) [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) 11 / 12 · Élő Bemutató 1. lépcső · CSS/SVG (Nulla blokkoló script) Technológiai cégek · SaaS · Prémium szolgáltatás-áttekintők # Közelítésre ébredő Bento-rács és natív görgetési tér Kártyákon átívelő közelségi peremfény, 0 KB görgetési JS-sel működő CSS view() térbeli kisimulás, 3 rétegű kártyadőlés és fókuszkiemelés. Központi AI Entitás-Architektúra ### Strukturált Tudástérkép & Valós Idejű Szintézis A weboldal nem passzív szövegtömeg, hanem szemantikus vektortér, ahol a keresőrobotok és az LLM ágensek összefüggő tudásgráfként értelmezik a vállalkozásodat. Edge Kiszolgálás AI Entitás-felismerés Sub-second TTFB Globális Elosztás ⚡ ### Globális Edge Gyorsulás Globális Edge hálózat Cloudflare Workers alapokon, zéró hidegindítási késéssel. Auditált Web Vitals 🛡️ ### Zero-Trust Biztonság Hardveres AES-256 kulcstárolás és automatikus botvédelem a feltörhetetlen adatokért. Banki Titkosítás 📊 ### Szerveroldali Analitika AdBlock-biztos konverziómérés és GA4/Zaraz szerver-szinkronizáció adatvesztés nélkül. Determinisztikus Mérés 🤖 ### Autonóm Öngyógyító Rendszer Ha egy külső API vagy CDN lassul, a Worker azonnal átirányítja a forgalmat az elszigetelt D1 gyorsítótárra. Rendszerállapot: Teljesen Autonóm (Folyamatos Üzem) ### Közelségi Peremfény Vezérlő CSS Custom Properties ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Saját kép feltöltése Kép Fénysugár (Spotlight Radius) 300 px A mutató körül megvilágított perem átmérője. Fényerő / Intenzitás 65% A kártyaéleken átívelő színátmenet telítettsége. Színvilág (Téma) **Keret-röntgen (X-Ray)** Láthatóvá teszi a kártyák 1px-es peremét és a maszkot. **Mobilos fényvándorlás (Ambient Sweep)** Lassú automatikus fényút érintőképernyőkhöz. #### 📐 Mérnöki működés A szülő rács egyetlen `pointermove` eseményfigyelőt használ (tömeges DOM-lekérdezések nélkül). A mutató pozícióját normalizálja és a CSS `--spot-x`, `--spot-y` változóiban adja át a kártyáknak. Az átívelő peremfényt a `background: radial-gradient(...) border-box` biztosítja 1px-es átlátszatlan belső maszkkal. CSS animation-timeline: view() ellenőrzése... 01. FÁZIS #### Autonóm Entitás-Feltárás A weboldal mélystruktúrájának és entitáshálózatának kinyerése a robotok és LLM keresők számára. ✦ 0 KB Görgetési JS 02. FÁZIS #### Strukturált Tudásbázis Építés JSON-LD sémahálózat felépítése közvetlenül az Astro SSR rétegben, duplikációmentesen. ✦ Tisztán Deklaratív CSS KORRIDOR ✦ Valós Idejű Dinamikus Márkatér 03. FÁZIS #### Edge Cache Indexelés Azonnali válaszidők és pre-rendering a Cloudflare globális Edge hálózatán világszerte. ✦ GPU-gyorsított Térbeli Dőlés 04. FÁZIS #### Élő AI-Láthatóság és Validáció Folyamatos monitorozás és automatikus szinkronizáció a Google Gemini és ChatGPT indexeivel. ✦ Zero CPU Main-Thread Lock ↕ Görgess a fenti dobozban vagy használd az alábbi kézi csúszkát a térbeli kisimulás teszteléséhez! ### Natív Görgetési Tér Vezérlő 0 KB JS Scroll ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Saját kép feltöltése Kép Kézi Fáziscsúszka (Előnézet) 0% Szimulálja a kártyák beérkezését a nézőtérbe görgetés nélkül. **3D Dőlés Kiemelése** Növeli a belépő kártyák kezdeti dőlésszögét és mélységét. #### ⚡ Miért mérföldkő a CSS view()? A hagyományos JS-alapú görgetésfigyelők (ScrollMagic, AOS stb.) folyamatosan terhelik a böngésző fő szálát és layout shiftet okozhatnak. A `animation-timeline: view()` közvetlenül a Compositor szálon fut: a görgetés 120 FPS-sel sima marad akkor is, ha a háttérben nehéz számítások futnak. ◆ AIRANKING AUTONÓM PROTOKOLL ### Executive Edition Vállalati szintű intelligens infrastruktúra teljes digitális szuverenitással és közvetlen Cloudflare Edge integrációval. Havi Elemzés **100k+ lekérdezés** Látencia **< 8 ms Edge** Szuverenitás **Zero Vendor Lock** Megtérülés **Mérhető Üzleti Érték** 🛡️ HITELT ÉRDEMLŐ BIZONYÍTÉK ### Parallax Tilt Vezérlő 3-Rétegű Z-Tér Maximális Dőlésszög 8° Korlátozott dőlés a prémium, professzionális hatásért. Gyors Nézőpontok (Tárgyalási Teszt) **Csillogó Tükröződés (Glare)** Dinamikus fénypásztázás a mutatóval szemben. **3D Rétegek Szétrobbantása (Layer Explode)** Megmutatja a 3 külön Z-síkot a térben. #### ✨ Tervezői Arányok A túl nagy dőlésszög amatőr, játékos hatást kelt. A prémium technológiai márkák (Apple, Stripe) szigorúan `6–8 fok` közé korlátozzák a kártya dőlését, miközben a belső Z-mélység (`translateZ: 25px / 50px`) adja a finom, elegáns térérzetet. Belépő Alapcsomag ### Gyors AI-Indítás Kisebb helyi szolgáltatóknak, ahol az azonnali LLM-megjelenés és az 1 másodperc alatti betöltés a cél. - ✦ Alapvető JSON-LD entitások - ✦ Cloudflare Edge továbbítás - ✦ Havi 1× AI audit Népszerű B2B Skálázás ### Autonóm Növekedés Középvállalatoknak, akik piacvezető pozíciót akarnak a Google AI Overviews és ChatGPT válaszokban. - ✦ Mély entitáshálózat és tudásgráf - ✦ Szerveroldali Zaraz + GA4 analitika - ✦ Heti automata AI-öngyógyítás Vállalati Egyedi ### Teljes Szuverenitás Nagyvállalatoknak szigorú adatvédelmi és hardveres titkosítási elvárásokkal. - ✦ Saját D1 és R2 adatelkülönítés - ✦ Dedicated Cloudflare Workers - ✦ 24/7 SLA és élő auditálási híd 💡 **Tipp:** Kattints bármelyik kártyára, vagy lépkedj a Tab billentyűvel! A nem kiválasztott elemek finoman elhalványulnak. ### Fókuszkiemelő Rács Vezérlő Figyelemirányítás Közvetlen Kártyaválasztás Háttér Halványítás Mértéke 65% Mennyire húzódjanak vissza a nem kijelölt kártyák. #### 🎯 Konverziós pszichológia Amikor a látogató több egyenrangú opcióval találkozik, a választási bizonytalanság (döntési bénulás) miatt csökken a konverzió. A fókuszkiemelő rács vizuálisan tiszta hierarchiát teremt: az aktív opció megkapja a teljes kontrasztot, eloszlatva a zajt. ⚙️ **Hogyan működik? & Technikai adatok** 1. Szint · Statikus CSS/SVG Grafikai motor **CSS Proximity Spotlight, CSS Scroll-Driven Animations & 3D Tilt** 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** CSS Custom Properties (--spot-x, --spot-y, --spot-radius), natív animation-timeline: view(), perspective(600px) rotateX() rotateY() GPU-gyorsított transform rétegekkel. 0 KB külső görgető JS csomag, 60 FPS sima mutatókövetés compositor-only tulajdonságokkal. Becsült ráta: **--** FPS (Helyi mérés, eszközfüggő) Tárgyalási Összehasonlítás Hagyományos statikus dobozok vs. Élő Proximity Spotlight Bento ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Saját kép feltöltése Kép AIRanking.pro ## Modern Bento-architektúra, ami vezeti a látogató figyelmét. Ahelyett, hogy minden információ egyszerre kiabálna, a Bento rács természetes vizuális hierarchiát épít. A mutató közeledésére kigyúló peremfény élménnyé teszi a felfedezést. [Műhely finombeállítások ↗](#lab) ⚡ **Funkció 1: Gyorsaság** Hagyományos statikus doboz szürke szegéllyel. 🛡️ **Funkció 2: Biztonság** Semmilyen interakció vagy fényeffekt nincs. 📊 **Funkció 3: Elemzés** Lapos és unalmas, a látogató átgörget rajta. Hagyományos, élettelen dobozok Nincs vizuális hierarchia vagy egérkövető fény, a látogató érdektelenül továbbgörget. FŐ ERŐSSÉG #### Központi AI Architektúra Valós idejű szemantikus tudástérkép és autonóm LLM szintézis. ⚡ #### Edge TTFB kiszolgálás Globális Edge elosztás. ✦ #### Fix rácsgeometria & GPU transform Tisztán hardveres CSS fényhatás. Mozgasd az egeret a kártyák felett: A közelségi peremfény valós időben követi a mutatót! ✦ Ü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