Frontend & Arayüz
Cinematic Scroll Storytelling
Scroll ile anlatan sayfalar: Lenis, ScrollTrigger, yapışkan kart yığınları.
Nedir
Lenis akıcı scroll, GSAP ScrollTrigger, kademeli belirmeler, yapışkan kart yığınları, parallax ve scroll’a bağlı geçişleri kapsayan bir scroll koreografisi skill’i.
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, foot
Tasarım için neden önemli
- Scroll koreografisi, ajan sayfası ile stüdyo sayfası arasındaki en büyük farktır.
- Rastgele animasyon değerleri yerine adlandırılmış hareket token’ları verir.
- Bir sayfa anatomisi tanımlar; bölümler bilinçli bir sırayla gelir.
Neleri kapsıyor
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
Nasıl kurulur
Cinematic Scroll Storytelling
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Depoyu klonlayın ve Codex’i bu skill dosyasına yönlendirin.
-
Sayfanın scroll boyunca anlatması gereken hikâyeyi tarif edin.
-
Hareket token’larını ayarlayın; skill’in kurduğu yığını ve anatomiyi koruyun.
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.