feat(ui): Arc bileşenleri, landing bölümleri ve bildirim yığını

Sonner/vaul yerine kendi bildirim yığını ve alt sayfa; çip grubu, kart
destesi, kaydırma eylemi, yazı dönüşümü, bölme tutamacı; landing'e program
duvarı, süzülen haplar ve veri akışı; yaylar tek dosyada (lib/hareket.ts).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-10-07 17:12:53 +03:00
parent bc920f6111
commit 3c995402c6
38 changed files with 5474 additions and 697 deletions

48
src/lib/hareket.ts Normal file
View File

@@ -0,0 +1,48 @@
// Arc UI'dan (uiarc.dev) taşınan bileşenlerin ortak hareket sabitleri.
// Arc'ın `motionTokens`'ının DESIGN.md §6'ya göre ayarlı hâli: yaylar
// sekmesizdir; sekme yalnız kullanıcı bir şeyi bıraktığında/fırlattığında
// (`birakma`) vardır. Yeni bir Arc bileşeni taşınırken yay buradan alınır.
export const YAY = {
/** §6 varsayılanı: vurgu kayması, sayı rulosu, panel geçişi. */
varsayilan: { type: "spring", bounce: 0, duration: 0.35 },
/** Panel, yükseklik, yığın yerleşimi. Arc "smooth". */
akici: { type: "spring", visualDuration: 0.4, bounce: 0 },
/** Genişlik/biçim dönüşümü (çip, yazı). Arc "morph", sekmesi alınmış. */
donusum: { type: "spring", visualDuration: 0.42, bounce: 0 },
/** Parmak bıraktıktan sonraki yerine oturma. Arc "snappy": tek yerde hafif sekme. */
birakma: { type: "spring", visualDuration: 0.26, bounce: 0.12 },
} as const;
type Egri = [number, number, number, number];
export const EGRI: { giris: Egri; standart: Egri } = {
/** Ekrana giren öğe: hızlı başlar, yumuşak durur. */
giris: [0.16, 1, 0.3, 1],
/** Ekrandayken değişen renk/opaklık. */
standart: [0.22, 1, 0.36, 1],
};
export const SURE = { anlik: 0.12, hizli: 0.16, cikis: 0.18, standart: 0.24 } as const;
/**
* Sınırın ötesine çekilen öğenin direnci (iOS lastik bandı): parmağı izler
* ama her piksel bir öncekinden pahalıdır, `olcu`ya yaklaşır ve geçmez.
*/
export function lastik(tasma: number, olcu: number): number {
return (1 - 1 / ((tasma * 0.55) / olcu + 1)) * olcu;
}
/** `lastik`in tersi: ekrandaki esnemeden parmağın gerçek yolunu geri verir. */
export function lastikTersi(esneme: number, olcu: number): number {
return ((1 / (1 - Math.min(esneme, olcu - 1) / olcu) - 1) * olcu) / 0.55;
}
/** Son ~80 ms'lik örneklerden bırakma hızı (px/sn); bırakmadan önce duran parmak 0 verir. */
export function birakmaHizi(ornekler: { t: number; v: number }[], simdi: number): number {
const yakin = ornekler.filter((o) => simdi - o.t <= 80);
const ilk = yakin[0];
const son = yakin[yakin.length - 1];
if (!ilk || !son || ilk === son || simdi - son.t > 60) return 0;
return (son.v - ilk.v) / ((son.t - ilk.t) / 1000);
}