Frontend & Arayüz
Masked Reveal
Başlıkları scroll sırasında bir overflow maskesiyle kelime kelime açığa çıkarın.
Nedir
Bir başlığı maskeli kelime span’lerine bölen ve metin viewport’a girerken onları yukarı doğru kademelendiren bir GSAP ScrollTrigger deseni. Bir React temizleme deseni içerir.
Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
Tasarım için neden önemli
- Kelime düzeyinde kademelenme, harf düzeyinde animasyondan daha sakin ve daha editoryal okunur.
- Ekran okuyucular yine de tam metni bir aria-label üzerinden alır.
- reduced-motion kullanıcıları, hiçbir transform uygulanmamış statik metin görür.
Neleri kapsıyor
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
Nasıl kurulur
Masked Reveal
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/masked-reveal/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Bir başlığı data-masked-reveal ile işaretleyin ve CSS mask kurallarını ekleyin.
-
Ücretli SplitText eklentisinden kaçınan split yardımcısını çağırın.
-
ScrollTrigger’ın rota değişiminde temizlenmesi için React’te bir GSAP context’ine sarın.
Buradaki her eklenti ücretsiz, açık kaynak ve gerçek üst kaynağına bağlantı veriyor.
codex-design listesinde dahası ↗Diğer Codex tasarım eklentileri
Frontend & Arayüz Ne yapar gpt-taste GSAP scroll hareketi ve boşluksuz bento ızgaralarıyla ödüllük tarzda landing page’ler kurar. 
Tasarım Sistemleri Ne yapar Stitch Design Taste Google Stitch’i sıradan olmayan ekranlara yönlendiren bir DESIGN.md yazar. 
Frontend & Arayüz Ne yapar image-to-code Önce tasarım görselleri üretir, onları analiz eder, sonra eşleşen frontend kodunu kurar. 
Frontend & Arayüz Ne yapar imagegen-frontend-mobile Premium mobil uygulama ekran akışlarını kod değil, görsel olarak üretir. Sonraki adım
Kurulum derdi olmadan Open Design ile tasarlayın
Bu eklentiyi kendiniz kurun ya da Open Design ile Codex’in etrafına baştan sona küratörlü bir tasarım katmanı geçirin. Kendi anahtarınızı getirin, çıktınızın sahibi olun.