Scroll storytelling, parallax derinlik, metin animasyonları ve premium scroll efektleri ile etkileyici, sinematik 2.5D interaktif web siteler oluşturun — WebGL'e ihtiyaç yok. Bu beceriyi herhangi bir web tasarım görevinde kullanın: landing page'ler, ürün siteleri, hero bölümler, scroll animasyonları, parallax, sticky bölümler, bölüm üst üstelemeleri, bölümler arasında kayan ürünler, clip-path efektleri, kenarlardan hızla gelen metinler.
cd ~/.claude/skills
git clone https://github.com/alirezarezvani/claude-skills.git claude-skillsmkdir -p ~/.claude/skills/epic-design
curl -fsSL https://raw.githubusercontent.com/alirezarezvani/claude-skills/HEAD/.gemini/skills/epic-design/SKILL.md \
-o ~/.claude/skills/epic-design/SKILL.mdArtık bir dünya standartında epik tasarım uzmanısınız. Yalnızca düz PNG/statik varlıklar, CSS ve JavaScript kullanarak sinematik, immersif websiteler inşa edersiniz — WebGL, 3D modelleme yazılımı gerekmez.
Önce bağlam kontrol edin:
Eğer project-context.md veya product-context.md varsa, soru sormadan önce okuyun. Bu bağlamı kullanın ve zaten kapsanmayan veya bu göreve özel bilgiler sorun.
İnşa ettiğiniz her website sinematik bir deneyim hissi vermelidir. Düşünün: Apple ürün sayfaları, Awwwards ödüllü siteler, lüks marka siteleri. Basit bir açılış sayfası bile şunları içermeli:
Bu beceri aktif iken hiçbir zaman düz, statik bir sayfa inşa etmeyin.
Varlıklar ve bir özet ile yeni başlarken. Aşağıdaki tam iş akışını izleyin (Adımlar 1-5).
Mevcut bir sayfaya 2.5D efektler eklerken. Adım 2'ye atla, mevcut yapıyı analiz et, derinlik atamaları ve animasyon fırsatlarını öner.
Performans veya animasyon sorunlarını giderirken. scripts/validate-layers.js kullan, GPU kurallarını kontrol et, azaltılmış hareket işlemesini doğrula.
Tek bir kod satırı yazmadan önce, aşağıdakilerin TÜMÜNü sırasıyla yapın.
Kullanıcının sağladığı her görüntüde scripts/inspect-assets.py çalıştırın.
İsteğe bağlı çalışma zamanı bağımlılığı:
pip install Pillow— görüntü analizi için gerekli,--helpiçin değil. Her görüntü için belirleyin:
Format — JPEG hiçbir zaman gerçek alfa kanalı olmaz. PNG sahte bir kanala sahip olabilir.
Arka plan durumu — Komut dosyası çıkışını kullanın. Size şunu söyleyecektir:
Arka planın gerçekten kaldırılması gerekip gerekmediğine KARAR VERİN — Bu kritiktir. Arka planı olan her görüntünün kaldırılması gerekmez. Kendinize sorun:
ARKA PLAN KALDIRILMASı GEREKİR eğer görüntü:
ARKA PLAN KALDIRILMAMASı GEREKİR eğer görüntü:
Emin değilseniz, görüntünün tasarımda amaçlanan rolüne bakın. Eğer "yüzmesi" gerekirse → arka planı kaldır. Eğer bir alanı doldurursa veya İÇERİK ise → tut.
Kullanıcıyı her görüntü hakkında bilgilendir — ister arka plan iyiyse ister değilse.
references/asset-pipeline.md Adım 4'ten tam biçimi kullanın.
Boyut ve derinlik ataması — Her varlığın hangi derinlik seviyesine ait olduğuna karar verin ve buna göre yeniden boyutlandırın. Kararlarınızı inşa etmeden önce kullanıcıya söyleyin.
Tüm varlıkları aynı boyut olarak işlemeyin. Bir hiyerarşi oluşturun:
Yardımcıları hero'ya göre calc() kullanarak konumlandırın:
right: calc(50% - [hero-half-width] - [gap]) kenarına yakın oturmak için.
Hero büyüdüğünde veya kaydırma üzerine çıktığında, yardımcılar dışarıya saçılmalıdır — sadece solmun değil. Bu, orbiting hero'nun etrafında olduklarını pekiştirir.
Her görüntü için sorun: "Bu, kaydırma hikayesinde ne yapıyor?"
Kullanıcı niyetini doğru teknik kombinasyonuna eşleyin. references/ dosyalarından tam teknik ayrıntılarını okuyun.
| Kullanıcı Söyler | Birincil Desenler | Metin Tekniği | Özel Efekt |
|---|---|---|---|
| Ürün lansmanı / marka sitesi | Bölümler arası yüzen ürün + Perspektif yakınlaşma | Bölünmüş yakınsama + Kelime aydınlatması | DJI ölçek-içinde sabitleme |
| Büyük başlıklı Hero | 6 katmanlı parallax + Sabitlenen yapışkan | Çapraz ofset + Maskelenmiş satır ortaya çıkması | Kanamış tipografi |
| Sinematik bölümler | Perde paneli yukarı rulo + Ovalaşta zaman çizelgesi | Tiyatral giriş+çıkış | Yukarıdan aşağı clip doğum |
| Apple tarzı animasyon | Ovalaşta zaman çizelgesi + Clip-path silme | Kelime-kelime kaydırma aydınlatması | Karakter silindir |
| Bölümler arasındaki öğeler | Yüzen ürün + Clip-path doğum | Karışık metin | Pencere paneli iris |
| Kartlar / özellikler bölümü | Basamaklı kart yığını | Eğim + elastik sıçrama | Bölüm soyunması |
| Portföy / vitrin | Yatay kaydırma + Çevirme morfu | Satır clip silme | Çapraz silme |
| SaaS / başlangıç | Pencere paneli iris + Kademeli ızgara | Değişken yazı tipi dalgası | Eğri yol seyahati |
pin: true + ovalaşta zaman çizelgesiinset(0 0 100% 0) → inset(0)Oluşturduğunuz her öğeye bir derinlik seviyesi atanması GEREKİR. Bu, tartışmaya açık değildir.
DEĞERLİK 0 → Uzak arka plan | parallax: 0.10x | blur: 8px | scale: 0.70
DEĞERLİK 1 → Parıltı/atmosfer | parallax: 0.25x | blur: 4px | scale: 0.85
DEĞERLİK 2 → Orta dekorasyonlar | parallax: 0.50x | blur: 0px | scale: 1.00
DEĞERLİK 3 → Ana nesneler | parallax: 0.80x | blur: 0px | scale: 1.05
DEĞERLİK 4 → UI / metin | parallax: 1.00x | blur: 0px | scale: 1.00
DEĞERLİK 5 → Ön plan FX | parallax: 1.20x | blur: 0px | scale: 1.10
Şu şekilde uygula: HTML öğelerinde data-depth="3", CSS sınıfı .depth-3 ile eşleştir.
→ Tam derinlik sistemi ayrıntıları: references/depth-system.md
Bunlar HER çıktıda ZORUNLUDUR:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
transform, opacity, filter, clip-path — hiçbir zaman width/height/top/leftwill-change: transform yalnızca aktif olarak canlandırılan öğelerde kullan, animasyondan sonra kaldırcontent-visibility: auto ekran dışı bölümlerde kullanIntersectionObserver ile yalnızca görünüm alanında öğeleri canlandırwindow.matchMedia('(pointer: coarse)') — dokunmatik efektleri azalt→ Tam ayrıntılar: references/performance.md ve references/accessibility.md
<!-- BÖLÜM SARMALAYICISI — her bölüm bu deseni izler -->
<section class="scene" data-scene="hero" style="--scene-height: 200vh">
<!-- DEĞERLİK KATMANLAR — her zaman minimum 3+ katman -->
<div class="layer depth-0" data-depth="0" aria-hidden="true">
<!-- Arka plan: gradyan, doku, atmosferik PNG -->
</div>
<div class="layer depth-1" data-depth="1" aria-hidden="true">
<!-- Parıltı blobları, ışık efektleri, atmosferik bulanıklık -->
</div>
<div class="layer depth-2" data-depth="2" aria-hidden="true">
<!-- Orta dekorasyonlar, yüzen şekiller -->
</div>
<div class="layer depth-3" data-depth="3">
<!-- ANA ÜRÜN / HERO GÖRÜNTÜ — gösterinin yıldızı -->
<img class="product-hero float-loop" src="product.png" alt="[açıklama]" />
</div>
<div class="layer depth-4" data-depth="4">
<!-- METİN İÇERİĞİ — başlıklar, gövde, CTA'lar -->
<h1 class="split-text" data-animate="converge">Başlığınız</h1>
</div>
<div class="layer depth-5" data-depth="5" aria-hidden="true">
<!-- Ön plan parçacıkları, kıvılcımlar, bindirmeler -->
</div>
</section>
→ Tam boilerplate: assets/hero-section.html
→ Tam CSS sistemi: assets/hero-section.css
→ Tam JS motoru: assets/hero-section.js
| Dosya | İçinde Ne Var | Ne Zaman Oku |
|---|---|---|
references/asset-pipeline.md |
Varlık incelemesi, arka plan yargısı kuralları, kullanıcı bildirim biçimi, CSS knockout, yeniden boyutlandırma hedefleri | HER ZAMAN — kodlamadan önce çalıştır |
references/depth-system.md |
6 katmanlı derinlik modeli, CSS/JS uygulaması, bulanıklık/ölçek formülleri | Her proje — her zaman oku |
references/motion-system.md |
9 kaydırma mimarisi deseni, tam GSAP kodu ile | Kaydırma etkileşimleri oluştururken |
references/text-animations.md |
13 metin tekniği, tam uygulama kodu ile | Herhangi bir metin canlandırırken |
references/directional-reveals.md |
8 "üstünden/yanlardaki doğdu" clip-path tekniği | Bölümlerin yönlü girişe ihtiyacı olduğunda |
references/inter-section-effects.md |
Yüzen ürün, GSAP Flip, bölümler arası seyahat | Ürün/öğe bölümler arasında devam ettiğinde |
references/performance.md |
GPU kuralları, will-change, IntersectionObserver desenleri | Her Zaman — tartışmaya açık olmayan kurallar |
references/accessibility.md |
WCAG 2.1 AA, prefers-reduced-motion, ARIA | Her Zaman — tartışmaya açık olmayan |
references/examples.md |
5 tam gerçek dünya uygulaması | Kullanıcı tam sayfalı siteye ihtiyaç duyduğunda |
Bağlamda fark ettiğinizde, sorulmadan bu sorunları yüzeye çıkarın:
| Ne istediğinde... | Ne alırsınız... |
|---|---|
| "Hero bölümü inşa et" | İçine gömülü CSS/JS, 6 derinlik katmanı, varlık denetimi, teknik listesi olan tek HTML dosyası |
| "Sinematik hisset" | Ovalaşta zaman çizelgesi + parallax + metin animasyon kombinosu GSAP kurulumu ile |
| "Görüntülerimi incele" | Arka plan durumu, derinlik atamaları, yeniden boyutlandırma önerileri ile varlık denetim raporu |
| "Apple tarzı kaydırma etkisi" | Kelime-kelime aydınlatma + sabitlenen bölüm + perspektif yakınlaşma uygulaması |
| "Performans sorunlarını düzelt" | GPU optimizasyon kontrol listesi ve will-change denetimi ile doğrulama raporu |
Tüm çıktılar yapılandırılmış iletişim standardını izler:
0a. ✅ ALWAYS kod yazmadan önce varlık incelemesi çalıştır — her görüntünün biçimini, arka planını ve boyutunu kontrol et. Oluşturmadan önce derinlik atamalarını kullanıcıya söyle. 0b. ✅ ALWAYS arka planın kaldırılması gerekip gerekmediğine KARAR VER — her görüntünün kaldırılması gerekmez. Her varlığın durumunu bilgilendir ve herhangi bir arka planı sorun olarak ele almadan önce kullanıcıdan onay al. Asla otomatik kaldırma, asla sessizce yoksay.
prefers-reduced-motion geri dönüş içerirtransform, opacity, filter, clip-patharia-hidden="true" alırpointer: coarse algılaması aracılığıyla azaltılmış etkiler alırwill-change animasyonlar tamamlandıktan sonra kaldırıldıHer zaman teslim et:
https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.jsİnşa ettikten sonra, kaliteyi kontrol etmek için doğrulama komut dosyasını çalıştır:
node scripts/validate-layers.js path/to/index.html
Kontroller: derinlik öznitelikleri, aria-hidden, azaltılmış hareket, alt metin, performans sınırları.
Herhangi bir yaratıcı çalışmaya başlamadan önce bunu mutlaka kullanın - feature oluştururken, component inşa ederken, functionality eklerken veya davranış değiştirirken. Kullanıcı niyetini, gereksinimleri ve tasarımı implementation öncesinde araştırır.
Uygulama tamamlandığında, tüm testler geçtiğinde ve çalışmanızı nasıl entegre edeceğinize karar vermeniz gerektiğinde kullanın - merge, PR veya cleanup seçeneklerini sunarak geliştirme sürecinin tamamlanmasını rehberlik eder.
Kod incelemesi geri bildirimi alırken, önerileri uygulamadan önce kullanın; özellikle geri bildirim belirsiz veya teknik olarak şüpheli görünüyorsa - performatif anlaşmadan veya körü körüne uygulamadan ziyade teknik titizlik ve doğrulama gerekir.
Görevleri tamamlarken, büyük özellikleri hayata geçirirken veya merge etmeden önce çalışmanın gereksinimleri karşıladığını doğrulamak için kullanın.
Yeni bir feature üzerinde çalışmaya başlarken veya implementasyon planını yürütmeden önce kullanın - native araçlar veya git worktree fallback aracılığıyla izole edilmiş bir workspace sağlar.
Herhangi bir konuşma başlatırken kullanın - skill'lerin nasıl bulunacağını ve kullanılacağını belirler, clarification soruları da dahil olmak üzere HERHANGİ bir yanıt vermeden önce skill invocation gerektirir.