video/ ayrı bir Remotion projesi; Docker imajı, ESLint ve tsc kapsamı dışında. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
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%)`,
|
||
}}
|
||
/>
|
||
);
|