dc5c87b6aa
64 saniyelik, kesintisiz döngü lansman filmi; 9:16 ve 16:9. - remocn.dev bileşenleri (sheen-slide-in, tracking-in, gradient-scale-cut-text, outline-fill-track-text, perspective-marquee, path-ride, zoom-blur, lens-zoom) KolayTercih piksel diline uyarlandı (src/kinetik.tsx) - Sahne içi imleç + imleci takip eden kamera, piksel iz ve tık patlaması - Sessizlik → BAM kurgusu (lensZoom), punch zoom ve hareket bulanıklığı - Müzik ve efektler numpy ile sentezlendi (ses/uret.py), zaman.json tek kaynak - Örnek taban sıralamaları gerçek YÖK Atlas 2026 kayıtları Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
743 lines
33 KiB
TypeScript
743 lines
33 KiB
TypeScript
import type { ReactNode } from "react";
|
||
import { AbsoluteFill, Easing, useCurrentFrame } from "remotion";
|
||
import { YagmurHaritasi } from "./harita";
|
||
import { Ikon, type IkonAdi } from "./ikonlar";
|
||
import { LogoMark } from "./logo";
|
||
import { BaslikBlogu, Kutu, RiskEtiketi, Sahne, TuruncuCta, useDuzen } from "./ortak";
|
||
import { Eyebrow, PixelCorner, Wordmark } from "./piksel";
|
||
import { Kamera, MaskeSatir, OdakDisiPikseller, degerAl, type Anahtar } from "./sinema";
|
||
import { Telefon } from "./telefon";
|
||
import { FONT, R, ara, trSayi, yay, zipla } from "./tema";
|
||
import { VURUSLAR } from "./vurus";
|
||
|
||
const vurguStil = {
|
||
fontFamily: FONT.vurgu,
|
||
fontStyle: "italic" as const,
|
||
fontWeight: 800,
|
||
letterSpacing: "-0.04em",
|
||
color: R.primary,
|
||
};
|
||
|
||
/* ------------------------------------------------------------------ */
|
||
/* Adım 1 — 3B telefonda sihirbaz: sıralama, çipler, CTA */
|
||
/* ------------------------------------------------------------------ */
|
||
const CIPLER = ["Mühendislik", "Bilgisayar", "İstanbul", "Ankara", "İzmir", "Devlet"];
|
||
// Seçim kareleri imleç tıklarıyla aynı (zaman.json)
|
||
const SECIM: Record<number, number> = { 0: 58, 1: 66, 2: 74, 3: 82, 5: 92 };
|
||
|
||
function SihirbazEkrani() {
|
||
const frame = useCurrentFrame();
|
||
const metin = "45.320";
|
||
const yazilan = metin.slice(0, Math.max(0, Math.floor((frame - 22) / 4)));
|
||
const odak = frame >= 20;
|
||
const imlecGorunur = Math.floor(frame / 8) % 2 === 0 || yazilan.length < metin.length;
|
||
const cta = zipla(frame, 96);
|
||
const bas = ara(frame, [122, 125], [0, 1]) * (1 - ara(frame, [129, 134], [0, 1]));
|
||
const sayfa = yay(frame, 128, 22);
|
||
return (
|
||
<div style={{ padding: "0 20px", fontFamily: FONT.govde, color: R.slate900 }}>
|
||
{/* Site üst çubuğu */}
|
||
<div style={{ height: 56, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||
<span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
|
||
<LogoMark boy={28} varyant="duruk" girisYok />
|
||
<Wordmark boy={21} />
|
||
</span>
|
||
<span style={{ width: 40, height: 40, borderRadius: 999, border: `1px solid ${R.slate200}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||
<Ikon ad="kullanici" boy={16} renk={R.slate600} />
|
||
</span>
|
||
</div>
|
||
<div style={{ marginTop: 18 }}>
|
||
<Eyebrow olcek={1}>Adım 1 / 3</Eyebrow>
|
||
<div style={{ marginTop: 14, fontFamily: FONT.baslik, fontWeight: 700, fontSize: 30, lineHeight: 1.1 }}>Sıralamanı gir</div>
|
||
<div style={{ marginTop: 8, fontSize: 16, lineHeight: 1.5, color: R.slate600 }}>Sana uyan programları bununla bulacağız.</div>
|
||
<div style={{ marginTop: 22, fontSize: 14, fontWeight: 600, color: R.slate700 }}>Başarı sıralaman</div>
|
||
<div
|
||
data-iz="a1-girdi"
|
||
style={{
|
||
marginTop: 8,
|
||
height: 48,
|
||
borderRadius: 999,
|
||
border: `1px solid ${odak ? R.primary : R.slate200}`,
|
||
boxShadow: odak ? "0 0 0 3px rgba(59,130,246,0.25)" : undefined,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 12,
|
||
padding: "0 20px",
|
||
fontSize: 16,
|
||
}}
|
||
>
|
||
<Ikon ad="kupa" boy={16} renk={R.slate400} />
|
||
<span style={{ fontWeight: 600 }}>
|
||
{yazilan}
|
||
{odak && imlecGorunur ? <span style={{ color: R.primary, fontWeight: 400 }}>|</span> : null}
|
||
{!yazilan && !odak ? <span style={{ color: R.slate400, fontWeight: 400 }}>Örn. 45.320</span> : null}
|
||
</span>
|
||
</div>
|
||
<div style={{ marginTop: 20, fontSize: 14, fontWeight: 600, color: R.slate700 }}>Neyi seviyorsun, nerede okumak istersin?</div>
|
||
<div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", gap: 8 }}>
|
||
{CIPLER.map((c, i) => {
|
||
const an = SECIM[i];
|
||
const secili = an != null && frame >= an;
|
||
const tik = an != null ? ara(frame, [an, an + 2], [0, 1]) * (1 - ara(frame, [an + 3, an + 7], [0, 1])) : 0;
|
||
return (
|
||
<span
|
||
key={c}
|
||
data-iz={`a1-cip-${i}`}
|
||
style={{
|
||
display: "inline-flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
height: 40,
|
||
padding: "0 14px",
|
||
borderRadius: 999,
|
||
border: `1px solid ${secili ? R.primary : R.slate200}`,
|
||
background: secili ? R.primary : R.beyaz,
|
||
color: secili ? R.beyaz : R.slate700,
|
||
fontSize: 14,
|
||
fontWeight: 600,
|
||
transform: `scale(${1 - 0.04 * tik})`,
|
||
}}
|
||
>
|
||
{i >= 2 && i <= 4 ? <Ikon ad="konum" boy={14} /> : i === 5 ? <Ikon ad="devlet" boy={14} /> : null}
|
||
{c}
|
||
</span>
|
||
);
|
||
})}
|
||
</div>
|
||
<div style={{ marginTop: 26, opacity: Math.min(1, Math.max(0, cta)), transform: `scale(${0.85 + 0.15 * cta})` }}>
|
||
<span data-iz="a1-cta" style={{ display: "block" }}>
|
||
<TuruncuCta metin="Listemi oluştur" boy={16 / 40} basili={bas} style={{ width: "100%", height: 48 }} />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{/* CTA'dan sonra: liste hazırlanıyor paneli (3. adıma köprü) */}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
left: 12,
|
||
right: 12,
|
||
bottom: 16,
|
||
padding: 18,
|
||
borderRadius: 24,
|
||
background: R.beyaz,
|
||
border: `1px solid ${R.slate200}`,
|
||
boxShadow: "0 -10px 30px rgba(15,23,42,0.10)",
|
||
transform: `translateY(${(1 - sayfa) * 260}px)`,
|
||
}}
|
||
>
|
||
<div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: 20 }}>Listen hazırlanıyor</div>
|
||
<div style={{ marginTop: 4, fontSize: 14, color: R.slate500 }}>6 yılın verisi taranıyor…</div>
|
||
<div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 5 }}>
|
||
{Array.from({ length: 24 }, (_, i) => {
|
||
const on = frame >= 134 + i * 1.2;
|
||
const renk = i < 5 ? R.riskli : i < 18 ? R.azRiskli : R.guvenli;
|
||
return <span key={i} style={{ aspectRatio: "1", borderRadius: 5, background: on ? renk : R.slate100 }} />;
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function Adim1() {
|
||
const frame = useCurrentFrame();
|
||
const { dikey, w, h } = useDuzen();
|
||
const telGen = dikey ? 640 : 470;
|
||
const telDon = [
|
||
{ f: 0, s: -28, x: 12, r: -3 },
|
||
{ f: 34, s: -10, x: 5, r: -1 },
|
||
{ f: 70, s: 0, x: 0, r: 0 },
|
||
{ f: 185, s: 9, x: 4, r: 1 },
|
||
].map((a) => ({ f: a.f, s: a.s, x: a.x, r: a.r }));
|
||
const donY = degerAl(telDon as Anahtar[], frame, "s", 0);
|
||
const donX = degerAl(telDon as Anahtar[], frame, "x", 0);
|
||
const donZ = degerAl(telDon as Anahtar[], frame, "r", 0);
|
||
const kamera: Anahtar[] = dikey
|
||
? [
|
||
{ f: 0, s: 0.95, x: 0, y: 60 },
|
||
{ f: 24, s: 1.4, x: 0, y: -40 },
|
||
{ f: 50, s: 1.4, x: 0, y: -40 },
|
||
{ f: 64, s: 1.3, x: 0, y: 140 },
|
||
{ f: 100, s: 1.3, x: 0, y: 150 },
|
||
{ f: 118, s: 1.42, x: 0, y: 290 },
|
||
{ f: 140, s: 1.3, x: 0, y: 420 },
|
||
{ f: 185, s: 1, x: 0, y: 60 },
|
||
]
|
||
: [
|
||
{ f: 0, s: 1, x: 0, y: 0 },
|
||
{ f: 24, s: 1.6, x: 384, y: -140 },
|
||
{ f: 50, s: 1.6, x: 384, y: -140 },
|
||
{ f: 64, s: 1.55, x: 384, y: -10 },
|
||
{ f: 100, s: 1.55, x: 384, y: 0 },
|
||
{ f: 118, s: 1.7, x: 384, y: 90 },
|
||
{ f: 140, s: 1.5, x: 384, y: 250 },
|
||
{ f: 185, s: 1, x: 0, y: 0 },
|
||
];
|
||
return (
|
||
<Sahne>
|
||
<OdakDisiPikseller seed={11} adet={8} />
|
||
<Kamera anahtarlar={kamera} vuruslar={VURUSLAR.adim1}>
|
||
<AbsoluteFill>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
...(dikey
|
||
? { left: 70, right: 70, top: 130, textAlign: "center" as const, alignItems: "center" }
|
||
: { left: 140, width: 760, top: 0, bottom: 0, justifyContent: "center", alignItems: "flex-start" }),
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 28,
|
||
// Kamera telefona dalınca kenarda yarım yazı kalmasın
|
||
opacity: dikey ? 1 : 1 - ara(frame, [14, 26], [0, 1]) + ara(frame, [150, 172], [0, 1]),
|
||
}}
|
||
>
|
||
{!dikey ? (
|
||
<MaskeSatir gecikme={4}>
|
||
<Eyebrow olcek={2.3}>Adım 1</Eyebrow>
|
||
</MaskeSatir>
|
||
) : null}
|
||
<div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 84 : 96, lineHeight: 1.05 }}>
|
||
<MaskeSatir gecikme={6}>Form doldurmaktan</MaskeSatir>
|
||
<MaskeSatir gecikme={12}>
|
||
<span style={vurguStil}>kısa</span> sürer.
|
||
</MaskeSatir>
|
||
</div>
|
||
{!dikey ? (
|
||
<MaskeSatir gecikme={20}>
|
||
<span style={{ display: "block", fontSize: 36, lineHeight: 1.45, color: R.slate600 }}>
|
||
Sıralamanı yaz, sevdiğin alanları ve şehirleri seç. Gerisini bir butona bırak.
|
||
</span>
|
||
</MaskeSatir>
|
||
) : null}
|
||
</div>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
left: (dikey ? w / 2 : w * 0.7) - telGen / 2,
|
||
top: (dikey ? h * 0.585 : h / 2) - (telGen * 2.05) / 2,
|
||
}}
|
||
>
|
||
<Telefon genislik={telGen} donX={donX} donY={donY} donZ={donZ}>
|
||
<SihirbazEkrani />
|
||
</Telefon>
|
||
</div>
|
||
</AbsoluteFill>
|
||
</Kamera>
|
||
</Sahne>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------------------------------------------ */
|
||
/* Adım 2 — hero haritası dökülür, imleç ısı fırçasıyla tarar */
|
||
/* ------------------------------------------------------------------ */
|
||
const ISTATISTIK = [
|
||
{ deger: "21.000+", etiket: "Taranan program" },
|
||
{ deger: "6 yıl", etiket: "Taban sıralaması trendi" },
|
||
{ deger: "%100", etiket: "Resmî YÖK Atlas kaynağı" },
|
||
];
|
||
|
||
export function Adim2() {
|
||
const frame = useCurrentFrame();
|
||
const { dikey } = useDuzen();
|
||
const kilit = yay(frame, 150, 20);
|
||
const haritaY = dikey ? -70 : -40;
|
||
const kamera: Anahtar[] = [
|
||
{ f: 0, s: 1.42, x: 0, y: haritaY },
|
||
{ f: 58, s: 1.3, x: 0, y: haritaY },
|
||
{ f: 118, s: 1.22, x: 0, y: haritaY },
|
||
{ f: 138, s: 1, x: 0, y: 0 },
|
||
{ f: 200, s: 1.04, x: 0, y: 0 },
|
||
];
|
||
return (
|
||
<Sahne zemin={R.beyaz}>
|
||
<OdakDisiPikseller seed={21} adet={6} guc={0.7} />
|
||
<Kamera anahtarlar={kamera} vuruslar={VURUSLAR.adim2}>
|
||
<AbsoluteFill style={{ alignItems: "center", justifyContent: "center", gap: dikey ? 64 : 30 }}>
|
||
<BaslikBlogu
|
||
rozet="Adım 2"
|
||
baslik="6 yılın verisi, tek taramada"
|
||
aciklama={dikey ? "Taban sıralaması, kontenjan, doluluk. Hepsi resmî YÖK Atlas'tan." : undefined}
|
||
genis
|
||
/>
|
||
<YagmurHaritasi genislik={dikey ? 1000 : 860} baslangic={4} dokulme={42} fircaBas={56} fircaSure={64} iz="a2-firca" />
|
||
<div style={{ display: "flex", gap: dikey ? 18 : 28 }}>
|
||
{ISTATISTIK.map((s, i) => {
|
||
const g = yay(frame, 124 + i * 8, 20);
|
||
return (
|
||
<Kutu
|
||
key={s.etiket}
|
||
style={{ width: dikey ? 300 : 380, padding: dikey ? "30px 18px" : "22px 24px", textAlign: "center", opacity: g, transform: `translateY(${(1 - g) * 40}px)` }}
|
||
>
|
||
<div data-iz={`a2-stat-${i}`} style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 74 : 64, lineHeight: 1, color: R.primary }}>
|
||
{s.deger}
|
||
</div>
|
||
<div style={{ marginTop: 14, fontSize: 26, fontWeight: 600, color: R.slate500, lineHeight: 1.3 }}>{s.etiket}</div>
|
||
</Kutu>
|
||
);
|
||
})}
|
||
</div>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 22, opacity: kilit, transform: `translateY(${(1 - kilit) * 20}px)`, maxWidth: dikey ? 920 : 1400 }}>
|
||
<div style={{ width: 84, height: 84, borderRadius: 24, background: R.primary, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
|
||
<Ikon ad="kalkan" boy={44} renk={R.beyaz} />
|
||
</div>
|
||
<div style={{ fontSize: 36, fontWeight: 600, color: R.slate800, lineHeight: 1.3 }}>
|
||
Yapay zekâ bu havuzun dışına çıkamaz. <span style={{ color: R.primary }}>Uydurmak yok.</span>
|
||
</div>
|
||
</div>
|
||
</AbsoluteFill>
|
||
</Kamera>
|
||
</Sahne>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------------------------------------------ */
|
||
/* Adım 3 — 24 kare dolar, imleç her yeni kareyi takip eder */
|
||
/* ------------------------------------------------------------------ */
|
||
const DILIMLER = [
|
||
{ ad: "Hayal", adet: 5, renk: R.riskli },
|
||
{ ad: "Dengeli", adet: 13, renk: R.azRiskli },
|
||
{ ad: "Güvenli", adet: 6, renk: R.guvenli },
|
||
] as const;
|
||
const KARELER = DILIMLER.flatMap((d) => Array.from({ length: d.adet }, () => d));
|
||
|
||
// Gerçek YÖK Atlas 2026 taban sıralamaları (data/yokatlas.db, SAYISAL);
|
||
// örnek aday 45.320. — risk riskHesapla() eşikleriyle birebir.
|
||
const SATIRLAR = [
|
||
{ sira: 3, ad: "Elektrik-Elektronik Mühendisliği", uni: "Dokuz Eylül Üniversitesi", il: "İzmir", taban: 38626, risk: "riskli" as const },
|
||
{ sira: 11, ad: "Bilgisayar Mühendisliği", uni: "Ankara Yıldırım Beyazıt Üniversitesi", il: "Ankara", taban: 55158, risk: "az-riskli" as const },
|
||
{ sira: 20, ad: "Bilgisayar Mühendisliği", uni: "Kocaeli Üniversitesi", il: "Kocaeli", taban: 70832, risk: "guvenli" as const },
|
||
];
|
||
|
||
export function Adim3() {
|
||
const frame = useCurrentFrame();
|
||
const { dikey } = useDuzen();
|
||
const kare = dikey ? 112 : 92;
|
||
const arali = dikey ? 16 : 12;
|
||
const sut = dikey ? 6 : 8;
|
||
const BAS = 24;
|
||
// İmlecin takip ettiği nokta: dolmakta olan kare
|
||
const t = Math.min(23, Math.max(0, (frame - BAS) / 2));
|
||
const kareMerkez = (i: number) => [(i % sut) * (kare + arali) + kare / 2, Math.floor(i / sut) * (kare + arali) + kare / 2];
|
||
const a = kareMerkez(Math.floor(t));
|
||
const b = kareMerkez(Math.min(23, Math.floor(t) + 1));
|
||
const f = t - Math.floor(t);
|
||
const takip = [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f];
|
||
const kamera: Anahtar[] = dikey
|
||
? [
|
||
{ f: 0, s: 1.16, x: 0, y: -190 },
|
||
{ f: 80, s: 1.1, x: 0, y: -160 },
|
||
{ f: 112, s: 1.15, x: 0, y: 500 },
|
||
{ f: 150, s: 1.1, x: 0, y: 520 },
|
||
{ f: 185, s: 1, x: 0, y: 0 },
|
||
]
|
||
: [
|
||
{ f: 0, s: 1.45, x: -435, y: 90 },
|
||
{ f: 80, s: 1.3, x: -420, y: 110 },
|
||
{ f: 112, s: 1.45, x: 455, y: 120 },
|
||
{ f: 150, s: 1.35, x: 455, y: 130 },
|
||
{ f: 185, s: 1, x: 0, y: 0 },
|
||
];
|
||
|
||
const izgara = (
|
||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 36 }}>
|
||
<div style={{ position: "relative", display: "grid", gridTemplateColumns: `repeat(${sut}, ${kare}px)`, gap: arali }}>
|
||
{KARELER.map((d, i) => {
|
||
const s = zipla(frame, BAS + i * 2);
|
||
return (
|
||
<div
|
||
key={i}
|
||
style={{
|
||
width: kare,
|
||
height: kare,
|
||
borderRadius: kare * 0.26,
|
||
background: d.renk,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
fontFamily: FONT.baslik,
|
||
fontWeight: 700,
|
||
fontSize: kare * 0.38,
|
||
color: R.beyaz,
|
||
transform: `scale(${Math.max(0, s)})`,
|
||
}}
|
||
>
|
||
{i + 1}
|
||
</div>
|
||
);
|
||
})}
|
||
<div data-iz="a3-takip" style={{ position: "absolute", left: takip[0], top: takip[1], width: 2, height: 2 }} />
|
||
</div>
|
||
<div style={{ display: "flex", gap: 22 }}>
|
||
{DILIMLER.map((d, i) => {
|
||
const g = yay(frame, 78 + i * 6, 16);
|
||
return (
|
||
<span
|
||
key={d.ad}
|
||
style={{
|
||
display: "inline-flex",
|
||
alignItems: "center",
|
||
gap: 14,
|
||
height: 76,
|
||
padding: "0 28px",
|
||
borderRadius: 999,
|
||
border: `3px solid ${R.slate200}`,
|
||
background: R.beyaz,
|
||
fontSize: 32,
|
||
fontWeight: 600,
|
||
color: R.slate800,
|
||
opacity: g,
|
||
transform: `translateY(${(1 - g) * 16}px)`,
|
||
}}
|
||
>
|
||
<span style={{ width: 20, height: 20, borderRadius: 6, background: d.renk }} />
|
||
{d.ad}
|
||
<span style={{ fontFamily: FONT.baslik, fontWeight: 700, color: R.slate900 }}>{d.adet}</span>
|
||
</span>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const satirlar = (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 18, width: dikey ? 940 : 780 }}>
|
||
{SATIRLAR.map((s, i) => {
|
||
const g = yay(frame, 96 + i * 9, 20);
|
||
const hover = (i === 1 && frame >= 100 && frame < 132) || (i === 2 && frame >= 130 && frame < 158);
|
||
return (
|
||
<Kutu
|
||
key={s.uni}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 26,
|
||
padding: "26px 30px",
|
||
opacity: g,
|
||
transform: `translateX(${(1 - g) * 60}px) scale(${hover ? 1.02 : 1})`,
|
||
borderColor: hover ? R.turuncu : R.slate200,
|
||
background: hover ? "#fff7ed" : R.beyaz,
|
||
}}
|
||
>
|
||
<div style={{ width: 70, fontFamily: FONT.baslik, fontWeight: 700, fontSize: 44, color: hover ? R.turuncu : R.slate400, textAlign: "center", flexShrink: 0 }}>
|
||
{s.sira}
|
||
</div>
|
||
<div data-iz={`a3-satir-${i}`} style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontSize: 34, fontWeight: 600, lineHeight: 1.2, color: R.slate900 }}>{s.ad}</div>
|
||
<div style={{ marginTop: 6, fontSize: 26, color: R.slate500, lineHeight: 1.3 }}>
|
||
{s.uni} · {s.il}
|
||
</div>
|
||
<div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 20 }}>
|
||
<RiskEtiketi risk={s.risk} olcek={2.3} />
|
||
<span style={{ fontSize: 26, color: R.slate500 }}>
|
||
Taban <b style={{ color: R.slate900, fontWeight: 600 }}>{trSayi(s.taban)}</b>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Kutu>
|
||
);
|
||
})}
|
||
<div style={{ fontSize: 22, color: R.slate400, textAlign: dikey ? "center" : "left", opacity: yay(frame, 128, 16) }}>
|
||
Örnek: sayısal, 45.320. sıra · YÖK Atlas 2026 taban sıralamaları
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<Sahne>
|
||
<OdakDisiPikseller seed={31} adet={6} guc={0.7} />
|
||
<Kamera anahtarlar={kamera} vuruslar={VURUSLAR.adim3}>
|
||
<AbsoluteFill style={{ alignItems: "center", justifyContent: "center", gap: dikey ? 60 : 56, padding: dikey ? "0 60px" : "0 100px" }}>
|
||
<BaslikBlogu rozet="Adım 3" baslik="Dengeli 24'lük listen hazır" genis />
|
||
<div style={{ display: "flex", flexDirection: dikey ? "column" : "row", alignItems: "center", gap: dikey ? 56 : 90 }}>
|
||
{izgara}
|
||
{satirlar}
|
||
</div>
|
||
</AbsoluteFill>
|
||
</Kamera>
|
||
</Sahne>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------------------------------------------ */
|
||
/* Paket içinde — trend, PDF, revizyon (satır imleçle sürüklenir) */
|
||
/* ------------------------------------------------------------------ */
|
||
// Ankara Yıldırım Beyazıt Ü. Bilgisayar Müh. taban sırası, 2021–2026
|
||
const TREND = [37831, 27534, 21602, 30797, 42108, 55158];
|
||
const REVIZYON = [
|
||
{ ad: "Bilgisayar Müh. · Ege", renk: R.riskli },
|
||
{ ad: "Bilgisayar Müh. · Dokuz Eylül", renk: R.azRiskli },
|
||
{ ad: "Bilgisayar Müh. · Katip Çelebi", renk: R.guvenli },
|
||
];
|
||
|
||
function OzellikKarti({
|
||
ikon,
|
||
baslik,
|
||
aciklama,
|
||
gecikme,
|
||
children,
|
||
dikey,
|
||
}: {
|
||
ikon: IkonAdi;
|
||
baslik: string;
|
||
aciklama: string;
|
||
gecikme: number;
|
||
children: ReactNode;
|
||
dikey: boolean;
|
||
}) {
|
||
const frame = useCurrentFrame();
|
||
const g = yay(frame, gecikme, 22);
|
||
return (
|
||
<Kutu
|
||
style={{
|
||
position: "relative",
|
||
overflow: "visible",
|
||
width: dikey ? 940 : 520,
|
||
height: dikey ? 390 : 600,
|
||
padding: dikey ? "36px 40px" : "44px 40px",
|
||
display: "flex",
|
||
flexDirection: dikey ? "row" : "column",
|
||
gap: dikey ? 36 : 0,
|
||
opacity: g,
|
||
transform: `translateY(${(1 - g) * 80}px)`,
|
||
borderColor: "rgba(226,232,240,0.7)",
|
||
}}
|
||
>
|
||
<div style={{ position: "absolute", right: 30, top: 30 }}>
|
||
<PixelCorner boy={60} />
|
||
</div>
|
||
<div style={{ flex: dikey ? 1 : undefined }}>
|
||
<div style={{ width: 96, height: 96, borderRadius: 26, background: "rgba(59,130,246,0.1)", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||
<Ikon ad={ikon} boy={46} renk={R.primary} />
|
||
</div>
|
||
<div style={{ marginTop: 26, fontFamily: FONT.baslik, fontWeight: 700, fontSize: 48, lineHeight: 1.1 }}>{baslik}</div>
|
||
<div style={{ marginTop: 12, fontSize: 30, lineHeight: 1.4, color: R.slate600 }}>{aciklama}</div>
|
||
</div>
|
||
<div style={{ flex: 1, display: "flex", alignItems: dikey ? "center" : "flex-end", justifyContent: "center", marginTop: dikey ? 0 : 24 }}>
|
||
{children}
|
||
</div>
|
||
</Kutu>
|
||
);
|
||
}
|
||
|
||
export function Ozellikler() {
|
||
const frame = useCurrentFrame();
|
||
const { dikey } = useDuzen();
|
||
const gW = dikey ? 380 : 420;
|
||
const gH = dikey ? 200 : 170;
|
||
const min = 15000;
|
||
const max = 60000;
|
||
const noktalar = TREND.map((v, i) => [(i / (TREND.length - 1)) * gW, ((v - min) / (max - min)) * gH]);
|
||
const cizgi = ara(frame, [26, 58], [0, 1]);
|
||
const yol = noktalar.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join(" ");
|
||
// Sürükle-bırak: imleç 58'de ilk satırı tutar, 92'de en alta bırakır
|
||
const tut = ara(frame, [58, 92], [0, 1], Easing.inOut(Easing.cubic));
|
||
const tutuldu = frame >= 58 && frame < 94;
|
||
const SATIR = 74;
|
||
|
||
return (
|
||
<Sahne>
|
||
<OdakDisiPikseller seed={41} adet={7} guc={0.8} />
|
||
<Kamera anahtarlar={[{ f: 0, s: 1.18, x: 0, y: 60 }, { f: 50, s: 1.04, x: 0, y: 0 }, { f: 140, s: 1.0, x: 0, y: 0 }]} vuruslar={VURUSLAR.ozellikler}>
|
||
<AbsoluteFill style={{ alignItems: "center", justifyContent: "center", gap: dikey ? 60 : 64 }}>
|
||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 36, textAlign: "center" }}>
|
||
<MaskeSatir gecikme={2}>
|
||
<Eyebrow olcek={dikey ? 2.6 : 2.3}>Paket içinde</Eyebrow>
|
||
</MaskeSatir>
|
||
<div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 88 : 88, lineHeight: 1.08, maxWidth: dikey ? 940 : 1600 }}>
|
||
<MaskeSatir gecikme={6}>
|
||
Her tercihin bir <span style={vurguStil}>“neden”i</span> var.
|
||
</MaskeSatir>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: "flex", flexDirection: dikey ? "column" : "row", gap: dikey ? 28 : 36 }}>
|
||
<OzellikKarti dikey={dikey} ikon="trend" baslik="6 yıllık trend" aciklama="Her tercihin taban seyri tek bakışta." gecikme={8}>
|
||
<svg data-iz="oz-trend" width={gW + 20} height={gH + 20} viewBox={`-10 -10 ${gW + 20} ${gH + 20}`}>
|
||
<path d={yol} fill="none" stroke={R.primary} strokeWidth={6} strokeLinecap="round" strokeLinejoin="round" pathLength={1} strokeDasharray={1} strokeDashoffset={1 - cizgi} />
|
||
{noktalar.map((p, i) => (
|
||
<rect key={i} x={p[0] - 9} y={p[1] - 9} width={18} height={18} rx={5} fill={i === TREND.length - 1 ? R.turuncu : R.primary} opacity={cizgi >= i / (TREND.length - 1) ? 1 : 0} />
|
||
))}
|
||
</svg>
|
||
</OzellikKarti>
|
||
<OzellikKarti dikey={dikey} ikon="belge" baslik="PDF rapor" aciklama="Aile toplantısına hazır." gecikme={14}>
|
||
<div style={{ position: "relative", width: 230, height: 230 }}>
|
||
{[2, 1, 0].map((k) => {
|
||
const s = yay(frame, 34 + (2 - k) * 6, 18);
|
||
return (
|
||
<div
|
||
key={k}
|
||
style={{
|
||
position: "absolute",
|
||
left: 40 + k * 18,
|
||
top: 10 + k * 14,
|
||
width: 150,
|
||
height: 196,
|
||
borderRadius: 20,
|
||
background: R.beyaz,
|
||
border: `3px solid ${R.slate200}`,
|
||
boxShadow: "0 10px 24px rgba(15,23,42,0.06)",
|
||
transform: `rotate(${(k - 1) * 6 * s}deg)`,
|
||
padding: 20,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 12,
|
||
}}
|
||
>
|
||
{k === 0 ? (
|
||
<>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
{[R.riskli, R.azRiskli, R.guvenli].map((c) => (
|
||
<span key={c} style={{ width: 18, height: 18, borderRadius: 5, background: c }} />
|
||
))}
|
||
</div>
|
||
{[1, 0.8, 0.9, 0.6, 0.75].map((wd, j) => (
|
||
<span key={j} style={{ height: 10, width: `${wd * 100}%`, borderRadius: 5, background: R.slate200 }} />
|
||
))}
|
||
</>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</OzellikKarti>
|
||
<OzellikKarti dikey={dikey} ikon="yenile" baslik="2 revizyon hakkı" aciklama="Fikrin değişir, listen de." gecikme={20}>
|
||
<div style={{ position: "relative", width: dikey ? 420 : 400, height: 3 * SATIR }}>
|
||
{REVIZYON.map((r, i) => {
|
||
// 0. satır sürüklenir; diğerleri yukarı kayarak yer açar
|
||
// Sürüklenen satır i'nin üstünden geçince o satır bir basamak yukarı kayar
|
||
const gecis = i === 1 ? (2 * tut - 0.5) / 0.8 : (2 * tut - 1.3) / 0.7;
|
||
const kay = Easing.inOut(Easing.cubic)(Math.min(1, Math.max(0, gecis)));
|
||
const y = i === 0 ? tut * 2 * SATIR : (i - kay) * SATIR;
|
||
const kalkis = i === 0 && tutuldu ? 1 : 0;
|
||
return (
|
||
<div
|
||
key={r.ad}
|
||
style={{
|
||
position: "absolute",
|
||
left: kalkis * 18,
|
||
top: y,
|
||
width: "100%",
|
||
height: 62,
|
||
borderRadius: 18,
|
||
border: `3px solid ${kalkis ? R.turuncu : R.slate200}`,
|
||
background: kalkis ? "#fff7ed" : R.beyaz,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 16,
|
||
padding: "0 20px",
|
||
fontSize: 24,
|
||
fontWeight: 600,
|
||
color: R.slate800,
|
||
boxShadow: kalkis ? "0 18px 36px rgba(15,23,42,0.16)" : undefined,
|
||
transform: `scale(${1 + kalkis * 0.04}) rotate(${kalkis * -1.5}deg)`,
|
||
zIndex: i === 0 ? 2 : 1,
|
||
}}
|
||
>
|
||
<span style={{ width: 14, height: 14, borderRadius: 4, background: r.renk, flexShrink: 0 }} />
|
||
<span style={{ flex: 1, whiteSpace: "nowrap", overflow: "hidden" }}>{r.ad}</span>
|
||
{i === 0 ? (
|
||
<span data-iz="oz-rev-tut" style={{ display: "grid", gridTemplateColumns: "repeat(2, 6px)", gap: 4 }}>
|
||
{Array.from({ length: 6 }, (_, k) => (
|
||
<span key={k} style={{ width: 6, height: 6, borderRadius: 2, background: R.slate400 }} />
|
||
))}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</OzellikKarti>
|
||
</div>
|
||
</AbsoluteFill>
|
||
</Kamera>
|
||
</Sahne>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------------------------------------------ */
|
||
/* Dürüstlük notu */
|
||
/* ------------------------------------------------------------------ */
|
||
export function Durustluk() {
|
||
const frame = useCurrentFrame();
|
||
const { dikey } = useDuzen();
|
||
const kalkan = zipla(frame, 0);
|
||
const alt = yay(frame, 64, 18);
|
||
return (
|
||
<Sahne zemin={R.beyaz}>
|
||
<OdakDisiPikseller seed={51} adet={6} guc={0.6} />
|
||
<Kamera anahtarlar={[{ f: 0, s: 1.02 }, { f: 140, s: 1.16 }]} vuruslar={VURUSLAR.durustluk}>
|
||
<AbsoluteFill style={{ alignItems: "center", justifyContent: "center", textAlign: "center", gap: 46, padding: "0 70px" }}>
|
||
<div style={{ width: 150, height: 150, borderRadius: 40, background: R.primary, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${Math.max(0, kalkan)})` }}>
|
||
<Ikon ad="kalkan" boy={80} renk={R.beyaz} />
|
||
</div>
|
||
<div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 104 : 112, lineHeight: 1.06, maxWidth: dikey ? 920 : 1600 }}>
|
||
<MaskeSatir gecikme={8}>Yerleşme garantisi</MaskeSatir>
|
||
<MaskeSatir gecikme={16}>vermiyoruz.</MaskeSatir>
|
||
</div>
|
||
<div style={{ ...vurguStil, fontSize: dikey ? 92 : 96, lineHeight: 1.1 }}>
|
||
<MaskeSatir gecikme={36}>Çünkü kimse veremez.</MaskeSatir>
|
||
</div>
|
||
<div style={{ opacity: alt, transform: `translateY(${(1 - alt) * 24}px)`, display: "flex", flexDirection: "column", alignItems: "center", gap: 26, marginTop: 16 }}>
|
||
<div style={{ fontSize: dikey ? 40 : 40, color: R.slate600, fontWeight: 600, maxWidth: dikey ? 900 : 1400, lineHeight: 1.4 }}>
|
||
Veren olursa, uzak dur. Biz riski satır satır gösteririz.
|
||
</div>
|
||
<div style={{ display: "flex", gap: 44 }}>
|
||
{(["guvenli", "az-riskli", "riskli"] as const).map((r, i) => (
|
||
<span key={r} data-iz={`du-risk-${i}`} style={{ transform: `scale(${Math.max(0, zipla(frame, 76 + i * 5))})` }}>
|
||
<RiskEtiketi risk={r} olcek={3.2} />
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</AbsoluteFill>
|
||
</Kamera>
|
||
</Sahne>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------------------------------------------ */
|
||
/* Kapanış — yalnız logo, tipografi, buton. Tıkla → her şey imlecin */
|
||
/* içine çöker → ilk kare: döngü */
|
||
/* ------------------------------------------------------------------ */
|
||
export function Kapanis() {
|
||
const frame = useCurrentFrame();
|
||
const { dikey } = useDuzen();
|
||
const buton = zipla(frame, 40);
|
||
const bas = ara(frame, [118, 121], [0, 1]) * (1 - ara(frame, [125, 130], [0, 1]));
|
||
// Çöküş: tıktan sonra içerik butonun olduğu noktaya büzülür
|
||
const cok = ara(frame, [124, 150], [0, 1], Easing.bezier(0.7, 0, 0.84, 0));
|
||
return (
|
||
<Sahne>
|
||
<Kamera anahtarlar={[{ f: 0, s: 1.12 }, { f: 100, s: 1.0 }]} vuruslar={VURUSLAR.kapanis}>
|
||
<AbsoluteFill
|
||
style={{
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
textAlign: "center",
|
||
gap: dikey ? 70 : 56,
|
||
transformOrigin: "50% 66%",
|
||
transform: `scale(${1 - cok})`,
|
||
opacity: 1 - ara(frame, [140, 150], [0, 1]),
|
||
filter: `blur(${cok * 10}px)`,
|
||
}}
|
||
>
|
||
<div style={{ display: "flex", flexDirection: dikey ? "column" : "row", alignItems: "center", gap: dikey ? 18 : 28 }}>
|
||
<LogoMark boy={dikey ? 220 : 180} giris={4} rotaBas={22} />
|
||
<div style={{ opacity: yay(frame, 12, 16) }}>
|
||
<Wordmark boy={dikey ? 120 : 120} />
|
||
</div>
|
||
</div>
|
||
<div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 100 : 108, lineHeight: 1.06, maxWidth: dikey ? 920 : 1600 }}>
|
||
<MaskeSatir gecikme={20}>Listeni kur,</MaskeSatir>
|
||
<MaskeSatir gecikme={28}>
|
||
<span style={vurguStil}>panikle</span> değil.
|
||
</MaskeSatir>
|
||
</div>
|
||
<div data-iz="ka-buton" style={{ transform: `scale(${Math.max(0, buton)})` }}>
|
||
<TuruncuCta metin="kolaytercih.com" boy={dikey ? 1.2 : 1.1} basili={bas} />
|
||
</div>
|
||
</AbsoluteFill>
|
||
</Kamera>
|
||
</Sahne>
|
||
);
|
||
}
|