bg · surface · ink · accent
Servis
Grafik Tasarım
Logo, kurumsal kimlik ve marka sistemleri — terminal/code-editor estetiği.
Teklif Al →
REFERENCES klasöründeki Awwwards kazanan projelerden ve ~/.claude/skills/
kütüphanesinden derlenen yetenek kataloğu. Her component canlı çalışır — beğendiğin
variant'ı seç, siteye entegre ederim.
5 alternatif siyah dark theme — mevcut deep navy DNA okunaklı değilse aşağıdaki paletlerden birini seç, siteye uygularım. Bu sayfada sadece önizleme — DNA dokunulmaz.
Logo, kurumsal kimlik ve marka sistemleri — terminal/code-editor estetiği.
Teklif Al →Logo, kurumsal kimlik ve marka sistemleri — mat indigo + sıcak coral.
Teklif Al →Logo, kurumsal kimlik ve marka sistemleri — high-key monokrom editorial.
Teklif Al →Logo, kurumsal kimlik ve marka sistemleri — lüks editorial + altın varak.
Teklif Al →Logo, kurumsal kimlik ve marka sistemleri — cool tech + parlak cyan.
Teklif Al →9 variant — DNA .btn-slab + 8 alternatif (magnetik, çizim, blob, neon, fark, shimmer, ripple, 3D)
7 variant — DNA .ls-card + glow border, mask reveal, magnetik tilt, stacked deck, spotlight, WebGL 3D
Conic gradient ile dönen ışıklı border. Featured sponsor / üyelik kartı.
Mouse pozisyonuna göre 3D perspektifte dönüş.
Mouse pozisyonuna göre 300px radial gradient takip eder.
Projelerim bölümü için 5 alternatif animasyon —
hepsi --i / --total CSS custom property pattern'i ile
3-4-5-6 karta otomatik adapt.
Beğendiğin variant'ı söyle, anasayfaya entegre ederim.
Asimetrik 1.45fr/1.1fr/0.95fr grid + tabandan stagger + slight rotate. Container hover → düzleşir. Şu an anasayfada bu kullanılıyor.
3D perspective + centered rotateY yelpazesi. Kenar kartlar dışa açılı, orta düz. Container hover → kartlar düzleşip dim olur, hover'lanan öne çıkar. Zentry BentoTilt esini.
Sade yan-yana grid. Container hover → tüm kartlar karartılır (brightness 42%), hover'lanan tam parlaklıkta. Editorial dergi/sinema hissi. Pure CSS, sıfır JS.
Default: kartlar üst üste sıkışık (negatif margin). Container hover → mouse pozisyonuna göre kartlar dağılır — fareyi hareket ettir, kartlar fareden kaçar. 15 satır JS + CSS variable.
Kartlar sürekli sağdan sola akar. Container hover → durur. Her karta hafif farklı tilt (-1°/0°/+1° döngüsel). Çok kart varsa (5-6+) sınırsız scroll hissi. CSS @keyframes, sıfır JS.
Her kart hafif farklı açıda yatık (±1.4° saat yelkovanı). Cascade'in alternatif yorumu: tabandan stagger yok, sadece tilt + 3D depth. Container hover → düzleşir. Minimal motion, scale-friendly.
→ Seçim:
Beğendiğin variant'ın numarasını söyle (örn. "VAR 2'yi uygula"),
anasayfa Projelerim bölümüne entegre ederim.
Yeni proje ekleyince --total otomatik güncellenir,
kartlar 3'ten 4-5-6'ya scale eder.
Anasayfa "Hangisini görelim?"
bölümü için 4 alternatif animasyon — her biri
N kategoriye scale-ready
(12, 14, 20+ admin'den eklenebilir).
Her variant .ls-card aynı kalır, sadece parent class değişir.
2-col grid, scroll'da kartlar sırayla fade-in (data-reveal-stagger). Hover'da kart yukarı kalkar + glow border. Sade, working.
Hover'da kart 3D perspektifte öne çıkar, tek/çift kartlar zıt yöne tilt (asimetrik). Diğer kartlar dim olur + geriye düşer. Zentry BentoTilt esini, pure CSS.
Hover yapılan kart büyür ve parlar, container'daki tüm diğer kartlar küçülür + kararır. Editorial focus oyunu, çok kart varsa bile temiz. Pure CSS, :has() ile.
Container hover → tüm kartlar %35 opacity + blur(1.5px). Hover edilen kart parlak ve net + lime glow halo. Sinematik dergi hissi. 20+ karta scale eder.
Her 7 karttan biri 2x büyük (4-col × 2-row). 6-col CSS grid + nth-child(7n+1) span. Editorial ritm, kategoriler arasında "öncelik" hissi. 14 kart → 2 hero kart + 12 normal.
→ Seçim:
Beğendiğin grid variant'ını söyle (örn. "VAR G·2 uygula"),
anasayfa Portföy bölümüne entegre ederim. 14 kategoriye eklenirse otomatik dizilir.
Not: Bu varyantlar HOVER davranışları. Aşağıda (02d) SCROLL ile viewport'a girerken giriş animasyonları var.
Kartlar viewport'a girerken nasıl cinematic reveal olur — 5 alternatif.
Hepsi data-reveal-stagger ile GSAP ScrollTrigger kullanır, 80ms kart-stagger.
Aşağı kaydır, her variant'ı viewport'a aldığında animasyon tetiklenir.
Tekrar görmek için F5 → yeniden scroll.
Tek index'ler alttan + soldan, çift index'ler üstten + sağdan gelir. Editorial dalga hareketi, kart sayısı arttıkça ritmik. 80ms stagger.
Kartlar -65° X-aksisinde yatık başlar, scroll'da öne döner (kitabın sayfası açılır gibi). Cinematic 3D perspective. 1000ms duration + 80ms stagger.
Kartlar blur(22px) + 1.06x scale'den başlar — sinema lensinin odaklanması gibi. Premium dergisel his. 1050ms duration, en cinematic.
Kartlar clip-path inset(48% 0)'den başlar — yatay perde gibi ortadan iki yana açılır. Editorial dergi reveal. 1100ms duration + 80ms stagger.
Kartlar 90px aşağıdan + 0.9x scale'den gelir — daha agresif, dikkat çekici giriş. Tek tek odakta — story-telling. 850ms + 80ms stagger.
→ Seçim:
Beğendiğin scroll variant'ını söyle (örn. "VAR S·3 + G·1 uygula").
Scroll + hover varyantlarını kombinasyon halinde anasayfa Portföy bölümüne uygularım.
Örnek kombinasyonlar:
S·3 (Blur) + G·1 (Tilt) — sinematik giriş + premium 3D hover.
S·5 (Cascade) + G·3 (Spotlight) — dramatik giriş + focus oyunu.
7 variant — karakter reveal, marquee, glitch, variable weight, typewriter, scramble, magnetik harfler
5 variant — animated mesh, particle field, aurora wave, SVG noise, perspective grid
4 variant — neon ring, bouncing dots, shimmer skeleton, gradient progress
1 variant — mouse hareketine göre scroll hızı değişir (Lenis-style)
4 variant — linear neon, radial pulse, vertical equalizer, segmented LED
3 variant — trail, magnify lens, mask reveal · sadece masaüstü (pointer:fine)
4 sahne — Three.js r160, IntersectionObserver lazy-load, mobil fallback. DPR cap 2, pagehide dispose.
Bu lab her bir variant'ın CSS class adını içerir.
Örn. .btn-neon + .text-glitch + .bg-aurora
kombinasyonunu landing page hero'sunda görmek istiyorum dersen, doğrudan üretirim.