d2359d3f3a
video/ ayrı bir Remotion projesi; Docker imajı, ESLint ve tsc kapsamı dışında. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { useCurrentFrame } from "remotion";
|
||
import { H, PIKSEL, R, W, opaklikFor } from "../marka";
|
||
import { clamp01, hash, karis } from "../yardimci";
|
||
import { isi, type IsiOrnek } from "./Imlec";
|
||
|
||
/**
|
||
* Sahne kenarlarında hero dokusu (PikselZemin'in video hâli): ortası boş,
|
||
* kenara yaklaştıkça sıklaşan noktalar. İmleç izi verilirse pikseller
|
||
* turuncuya ısınır. Yavaş kayma (parallax) derinlik verir.
|
||
*/
|
||
export const PikselZemin: React.FC<{
|
||
hucre?: number;
|
||
tohum?: number;
|
||
renk?: string;
|
||
/** Kenar bandı: kısa kenarın oranı */
|
||
kenar?: number;
|
||
izler?: IsiOrnek[];
|
||
kayma?: number;
|
||
guc?: number;
|
||
}> = ({ hucre = 40, tohum = 7, renk = R.primary, kenar = 0.26, izler = [], kayma = 0.25, guc = 1 }) => {
|
||
const f = useCurrentFrame();
|
||
const bant = Math.min(W, H) * kenar;
|
||
const dy = -f * kayma;
|
||
const sutun = Math.ceil(W / hucre);
|
||
const satir = Math.ceil(H / hucre) + 2;
|
||
const rects: React.ReactNode[] = [];
|
||
for (let j = 0; j < satir; j++) {
|
||
for (let i = 0; i < sutun; i++) {
|
||
const cx = i * hucre + hucre / 2;
|
||
const cy = j * hucre + hucre / 2 + (dy % hucre);
|
||
const kenarUz = Math.min(cx, W - cx, cy, H - cy);
|
||
const yogunluk = clamp01(1 - kenarUz / bant) ** 1.6;
|
||
if (hash(i, j, tohum) > yogunluk * 0.9) continue;
|
||
const h = izler.length ? isi(cx, cy, izler, 110) : 0;
|
||
const boy = hucre * PIKSEL.nokta;
|
||
rects.push(
|
||
<rect
|
||
key={`${i}-${j}`}
|
||
x={cx - boy / 2}
|
||
y={cy - boy / 2}
|
||
width={boy}
|
||
height={boy}
|
||
rx={boy * PIKSEL.rx}
|
||
fill={karis(renk, R.turuncu, h)}
|
||
fillOpacity={(opaklikFor(i, j) * 0.9 + h * 0.6) * guc}
|
||
/>,
|
||
);
|
||
}
|
||
}
|
||
return (
|
||
<svg width={W} height={H} style={{ position: "absolute", inset: 0 }}>
|
||
{rects}
|
||
</svg>
|
||
);
|
||
};
|