Lansman videosu (Remotion) projesi eklendi
video/ ayrı bir Remotion projesi; Docker imajı, ESLint ve tsc kapsamı dışında. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
55
video/src/bilesenler/PikselZemin.tsx
Normal file
55
video/src/bilesenler/PikselZemin.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user