# 05 Mozgó tipográfiai műhely | Astro Dizájn Elemek > Kinetikus tipográfia: Elegáns sorfeltárás, káoszból rendeződő cím, valódi variable font súlytengely, betűmaszkolt háttér és ritmuskarakterek. *Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/05-mozgo-tipografia* --- [Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 04](/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras)[12](/autonom-weboldal/astro-dizajn-elemek)[06 →](/autonom-weboldal/astro-dizajn-elemek/06-terbeli-termek) [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) 05 / 12 · Élő Bemutató 1. lépcső · CSS/SVG (Nulla blokkoló script) Ügynökségek · Kulturális márkák · SaaS Landingek # Mozgó tipográfiai műhely Maszkolt sorfeltárás, káoszból összeálló cím, valódi variable font tengelyvezérlés, betűmaszkban mozgó grafika és ritmuskarakterek. ## A részletek teszik igazán emlékezetessé. Ritmus: **Soronkénti ritmus (Stagger: 180ms)** ### A. Elegáns sorfeltárás A mondat sorai egy láthatatlan alsó maszk mögül érkeznek a helyükre. A szöveg felbontás után is egyetlen szemantikus címsor marad a képernyőolvasók számára. **Ügyfélkör:** Luxusmárkák, építészeti irodák, prémium pénzügyi tanácsadók. **Technika:** CSS `overflow: hidden` maszkok + GPU transform Y eltolás. Ritmus mód: Állapot: **Rendezett, éles végállapot** ### B. Káoszból rend A betűk enyhén szórt, elfordított pozícióból állnak össze egy tiszta, határozott címmé. A magyar ékezetek (á, é, í, ó, ö, ő, ú, ü, ű) sértetlenek maradnak. **Ügyfélkör:** Rendszerező SaaS platformok, adatelemző cégek, könyvelők. **Akadálymentesség:** A betűk dekoratív elemek, a szülő elem hordozza a teljes mondatot. Saját mintaszöveg tesztelése: TÖKÉLETES EGYENSÚLY Valódi Variable Font súlytengely: **700** Vastagság: Kövér (Bold, 700) ### C. Változó betűforma (Variable Font) Nem lépcsőzetes stílusváltás, hanem folyamatos súly-interpoláció (100–900). A betű vonalai folyamatosan vastagodnak vagy vékonyodnak 0 ms újratöltéssel. **Ügyfélkör:** Technológiai cégek, divat- és életmódmárkák. **Technika:** CSS `font-variation-settings: 'wght'` folyamatos vezérlése. Betűsúly finomvezérlése (100–900): 700 ## ASTRO Anyag: **Cián-arany kinetikus gradiens** ### D. Kép a betűk belsejében A betűk formája maszkként működik egy mögöttes animált színátmenet vagy videós textúra felett. A szöveg 100%-ban kijelölhető és felolvasható marad. **Ügyfélkör:** Kreatív stúdiók, zenei fesztiválok, digitális ügynökségek. **Technika:** `background-clip: text` + GPU animált háttérgradiens. Háttérminta kiválasztása: PRECIZITÁS Karakter: **Mérnöki / Ipari (Mechanikus)** ### E. Eltérő mozgáskarakterek Azonos szó, de három merőben más hangulat az időzítési görbék (easing) és a betűnkénti késleltetések (stagger) megváltoztatásával. Hangulat kiválasztása: TÁRGYALÁSI DEMÓ Összehasonlítás: Statikus weboldalcím vs. Kinetikus Tipográfia AIRanking.pro ## Tipográfia, amely azonnal megragadja a figyelmet A prémium weboldalak titka a betűk ritmusa. A soronként kibomló szöveg vezeti a szemet, növeli a tartalom elolvasási arányát, és professzionális tekintélyt ad a márkának. [Fő demók megtekintése (01, 03, 06) →](/autonom-weboldal/astro-dizajn-elemek/01-morphing) AIRanking.pro ### Autonóm AI-láthatóság Statikus HTML cím mindenféle mozgás vagy vizuális kiemelés nélkül. Hagyományos sablon szöveg Univerzális unalmas betűkészlet, nincs figyelemfelkeltő ritmus. Mérnöki precizitás az AIRanking.pro 👆 Kinetikus soronkénti kibontakozás 60 FPS sebességgel ⚙️ **Hogyan működik? & Technikai adatok** 1. Szint · Statikus CSS/SVG Grafikai motor **CSS font-variation-settings, Web Animations API és background-clip: text maszkolás** 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** Valódi változó betűtípus (Variable Font) wght tengely dinamikus vezérlése font-variation-settings tulajdonsággal. A betűnkénti és soronkénti feltárás Web Animations API-val fut le, teljes mértékben megőrizve a szemantikus HTML h1-h3 címsorstruktúrát és a képernyőolvasók hozzáférhetőségét (aria-label). Becsült ráta: **--** FPS (Helyi mérés, eszközfüggő) ✦ Ü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