bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tema): sayfa geçişi kısa ve hafif (600 ms), logo dönüşümü geçiş bitince oynar; DESIGN §4.22 logo morph

Browse Source 
- Sıra: önce sayfa geçişi biter, kısa nefes (80 ms), sonra logo güneşe/aya
  dönüşür; üst üste binmez. Geçiş iptal olsa da logo doğru biçime dönüşür.
- View Transitions olmayan tarayıcıda da logo dönüşür.
- DESIGN.md §4.22: logo biçim dönüşümü tasarım diline eklendi (biçim tablosu,
  koreografi, kurallar); §6 hareket ve §7 Yap/Yapma satırları.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-10-09 00:48:41 +03:00
parent 49d88cd72f
commit 1b51903e71
4 changed files with 73 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/animasyonlu-mark.tsx
View File

@@ -103,7 +103,7 @@ function merkezde(cx: number, cy: number, boyut: number): string {
return `${((cx - boyut / 2) / boyut) * 100}% ${((cy - boyut / 2) / boyut) * 100}%`;
}
// Tema geçişi biçimi (DESIGN.md §2.3): geçiş logodan yayılırken kareler
// Tema geçişi biçimi (DESIGN.md §2.3): sayfa geçişi bitince kareler
// neye geçildiğini gösterir, kısa bir an durur ve yeniden logoya toplanır.
// - Koyuya: şeftali kare hilale, mavi kare hilalin kucağındaki yıldıza;
// turuncu söner.
@@ -404,7 +404,7 @@ export function AnimasyonluMark({
const cik = () => kontrolRef.current?.ayarla(null, true);
hoverHedefi.addEventListener("mouseenter", gir);
hoverHedefi.addEventListener("mouseleave", cik);
// Tema geçişi başlarken (lib/tema-gecisi.ts) kareler yeni temanın
// Tema geçişi bitince (lib/tema-gecisi.ts) kareler yeni temanın
// biçimine dönüşür: koyuya geçişte ay ve yıldızlar, açığa geçişte güneş.
// Olay anında <html> yeni temanın sınıfını taşır.
const temaGecti = () =>