Files
kolaytercih/video/src/bilesenler/Gren.tsx
bilalgursen d2359d3f3a 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>
2026-10-04 14:00:33 +03:00

61 lines
2.1 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { AbsoluteFill, useCurrentFrame } from "remotion";
import { H, W } from "../marka";
/**
* Film greni: her karede tohumu değişen fraktal gürültü (deterministik —
* aynı kare her render'da aynı greni verir). Tüm videonun üstünde durur;
* `guc` koyu sahnelerde artırılır.
*/
export const Gren: React.FC<{ guc: number; koyu?: boolean }> = ({
guc,
koyu = false,
}) => {
const frame = useCurrentFrame();
if (guc <= 0) return null;
const id = `gren-${frame}`;
return (
<AbsoluteFill
style={{
pointerEvents: "none",
mixBlendMode: koyu ? "screen" : "multiply",
opacity: guc,
}}
>
<svg width={W} height={H} viewBox={`0 0 ${W / 1.5} ${H / 1.5}`}>
<filter id={id} x="0" y="0" width="100%" height="100%">
<feTurbulence
type="fractalNoise"
baseFrequency="0.78"
numOctaves={2}
seed={frame % 997}
stitchTiles="stitch"
/>
{/* Tek kanallı gren: renkli gürültü değil */}
<feColorMatrix
type="matrix"
values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1"
/>
{/* Açık sahnede yalnız koyu zerreler (multiply), koyuda yalnız açık
zerreler (screen) kalsın diye ortalama kaydırılıp kontrast verilir */}
<feComponentTransfer>
<feFuncR type="linear" slope={2.6} intercept={koyu ? -1.25 : -0.35} />
<feFuncG type="linear" slope={2.6} intercept={koyu ? -1.25 : -0.35} />
<feFuncB type="linear" slope={2.6} intercept={koyu ? -1.25 : -0.35} />
</feComponentTransfer>
</filter>
<rect width="100%" height="100%" filter={`url(#${id})`} />
</svg>
</AbsoluteFill>
);
};
/** Koyu sahnelerde kenar kararması */
export const Vinyet: React.FC<{ guc?: number }> = ({ guc = 0.55 }) => (
<AbsoluteFill
style={{
pointerEvents: "none",
background: `radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0) 45%, rgba(2,6,23,${guc}) 100%)`,
}}
/>
);