`
)+'")',
animation:'grain 0.9s steps(4) infinite',
}}/>
);
}
// ─── PELİKÜL ŞERİDİ ───────────────────────────────────────────────────────
// Gerçek 35mm makara hissi: sabit aralık (her iki şeritte birebir aynı boyut),
// "kapıdan akan film" gibi sürekli dikey kayma. GPU transform — Android dostu.
// PITCH/HOLE iki şeritte de aynı sabit → eşit boyut garantili.
const PERF_PITCH = 10; // delik aralığı (px) — daha sık, daha pro
const PERF_HOLE_W = 4.5;
const PERF_HOLE_H = 6;
function PPerf({ leftPct, top, bottom, dir = 'up' }) {
// bir adımdan büyük şerit; iki PITCH kadar kayıp başa sarar (kesintisiz döngü)
const holes = Array.from({ length: 64 });
return (
);
}
// ─── TOUCH RIPPLES ────────────────────────────────────────────────────────
// Anywhere the user taps inside the phone, a soft pastel ring radiates.
function TouchRippleLayer() {
const [ripples, setRipples] = pAUseS([]);
const idRef = pAUseR(0);
const onDown = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const id = ++idRef.current;
const colors = [PA.ACCENT, '#A8BFD2', '#A8BC9F', '#EBC76F', '#C8A9C5'];
const c = colors[id % colors.length];
setRipples(rs => [...rs, { id, x, y, c }]);
setTimeout(() => {
setRipples(rs => rs.filter(r => r.id !== id));
}, 900);
};
return (
{/* This wrapper is pointer-events:none so it never blocks. We attach the
handler on a sibling overlay instead — see below. */}
);
}
// listener overlay (sits below ripple display, captures all pointerdown)
function TouchListener({ onDown }) {
return (
);
}
// ─── MAIN APP ──────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"speed": 22,
"grain": 0.06,
"directions": "up-down-up",
"ripples": true
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [paused, setPaused] = pAUseS(false);
const [detail, setDetail] = pAUseS(null);
// uzun-bas → tam ekran detay (kartlardan global çağrılır)
pAUseE(() => {
window.__sorraDetail = (p) => setDetail(p);
return () => { if (window.__sorraDetail) delete window.__sorraDetail; };
}, []);
// detay açıkken akış durur (Esc/kapat ile geri döner)
pAUseE(() => {
if (!detail) return;
const onKey = (e) => { if (e.key === 'Escape') setDetail(null); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [detail]);
const streamsPaused = paused || !!detail;
const onTogglePause = pAUseCb(() => setPaused(p => !p), []);
// sütun genişliğini ölç → kartlar sütunu doldursun, içerik okunur olsun
const colsRef = pAUseR(null);
const [colW, setColW] = pAUseS(0);
pAUseLE(() => {
const measure = () => {
if (colsRef.current) {
const w = Math.floor(colsRef.current.clientWidth / 3);
if (w > 0) setColW(w);
}
};
measure();
const ro = new ResizeObserver(measure);
if (colsRef.current) ro.observe(colsRef.current);
window.addEventListener('resize', measure);
return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
}, []);
const streams = pAUseM(() => buildPastelStreams(colW || 124), [colW]);
// ripple state lifted to App so the listener can be a sibling at top z-index
const [ripples, setRipples] = pAUseS([]);
const idRef = pAUseR(0);
const onAnyDown = (e) => {
if (!t.ripples) return;
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const id = ++idRef.current;
const colors = [PA.ACCENT, '#7E1410', '#E0564C', PA.GOLD2, '#A8160F'];
const c = colors[id % colors.length];
setRipples(rs => [...rs, { id, x, y, c }]);
setTimeout(() => setRipples(rs => rs.filter(r => r.id !== id)), 900);
};
const dirMap = {
'up-down-up': ['up', 'down', 'up'],
'down-up-down': ['down', 'up', 'down'],
'up-up-up': ['up', 'up', 'up'],
'split': ['down', 'up', 'down'],
};
const [dL, dM, dR] = dirMap[t.directions] || dirMap['up-down-up'];
const colsTop = IS_TOUCH ? 40 : 92;
const colsBottom = IS_TOUCH ? 30 : 60;
return (
{/* COMPACT MASTHEAD */}
{/* THREE COLUMNS */}
{streams.left}
{streams.mid}
{streams.right}
{/* Sütun sınırlarına hizalı pelikül şeritleri — her ikisi birebir aynı */}
{/* RIPPLES on top */}
setDetail(null)}/>
setTweak('speed', v)}/>
setTweak('directions', v)}/>
setTweak('grain', v)}/>
setTweak('ripples', v)}/>
);
}
// Sabit-proplu kabuk bileşenleri memoize: App her dokunuşta (ripple/detay state)
// yeniden render olduğunda bunlar yeniden çalışmasın → ana iş parçacığı boşalır,
// kaydırma yüksek Hz'de akıcı kalır.
PMasthead = React.memo(PMasthead);
PBottomHUD = React.memo(PBottomHUD);
PPerf = React.memo(PPerf);
PInstallPrompt = React.memo(PInstallPrompt);
window.App = App;