gitframes-effects

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

gitframes-effects

gitframes-effects

Setup

设置

Import everything from the
gitframes
npm package. If the project doesn't have gitframes set up yet, follow the
gitframes
skill first (install, project scaffold, first render).
从
gitframes
npm package 导入所有内容。如果项目尚未配置 gitframes,请先按照
gitframes
skill 的说明操作(安装、项目脚手架、首次渲染)。

Overview

概览

gitframes
features a native WebGPU shader execution pipeline for 2D VFX, tonal grading, cinematic lens simulation, spatial relighting, and real-time neural vision conditioning.
Effects in gitframes are strongly typed
Effect
subclasses whose uniform properties can be driven by static values, time-varying keyframes, reactive
Signal
instances, or audio extraction pipelines.
See references/effects-catalog.md for the generated prop-level catalog, defaults, and type bounds.

gitframes
提供原生的 WebGPU shader 执行管线,支持 2D VFX、色调分级、电影镜头模拟、空间重新照明和实时神经网络视觉条件控制。
gitframes 中的效果是强类型
Effect
子类,其 uniform 属性可由静态值、随时间变化的关键帧、响应式
Signal
实例或音频提取管线驱动。
有关自动生成的属性级目录、默认值和类型边界,请参阅 references/effects-catalog.md。

Attaching Effects

附加效果

There are 4 main attachment modes in the engine:
引擎中主要有 4 种效果附加模式:

1. Layer-Level Effect Pipeline

1. 图层级效果管线

Attach one or more effects to an individual media, box, or text layer:
typescript
import { Layer, Curves, Vignette, Blur } from "gitframes";

const videoLayer = Layer.video("assets/footage.mp4", { fit: "cover" })
  .withEffect(new Curves({
    master: [{ x: 0, y: 0.05 }, { x: 0.5, y: 0.52 }, { x: 1, y: 0.95 }]
  }))
  .withEffect(new Vignette({ strength: 0.4, radius: 0.85, softness: 0.6 }))
  .withEffect(new Blur({ strength: 8, blurType: "Gaussian" }));
将一个或多个效果附加到单个媒体、方框或文本图层:
typescript
import { Layer, Curves, Vignette, Blur } from "gitframes";

const videoLayer = Layer.video("assets/footage.mp4", { fit: "cover" })
  .withEffect(new Curves({
    master: [{ x: 0, y: 0.05 }, { x: 0.5, y: 0.52 }, { x: 1, y: 0.95 }]
  }))
  .withEffect(new Vignette({ strength: 0.4, radius: 0.85, softness: 0.6 }))
  .withEffect(new Blur({ strength: 8, blurType: "Gaussian" }));

2. Whole-Composition Master Emulsion

2. 全合成主胶片效果

Apply an overarching post-processing grade or film emulsion across all rendered layers:
typescript
import { Composition, FilmGrain, ColorBalance } from "gitframes";

const comp = new Composition({ width: 1920, height: 1080, fps: 30 });

// Shared organic 35mm grain applied across titles, background video, and vector graphics
comp.apply(new FilmGrain({
  strength: 0.06,
  size: 1.5,
  monochrome: true,
  animated: true,
  speed: 1.0,
}));

comp.apply(new ColorBalance({
  shadows: { cyanRed: 4, yellowBlue: -6 },
  highlights: { cyanRed: 2, yellowBlue: -4 },
  preserveLuminosity: true,
}));
对所有已渲染图层应用统一的后期调色或胶片效果:
typescript
import { Composition, FilmGrain, ColorBalance } from "gitframes";

const comp = new Composition({ width: 1920, height: 1080, fps: 30 });

// Shared organic 35mm grain applied across titles, background video, and vector graphics
comp.apply(new FilmGrain({
  strength: 0.06,
  size: 1.5,
  monochrome: true,
  animated: true,
  speed: 1.0,
}));

comp.apply(new ColorBalance({
  shadows: { cyanRed: 4, yellowBlue: -6 },
  highlights: { cyanRed: 2, yellowBlue: -4 },
  preserveLuminosity: true,
}));

3. Spatial & Tracked Sections (
comp.section
/
Layer.section
)

3. 空间区域与跟踪区域(
comp.section
/
Layer.section
)

Isolate a sub-region of a plate or canvas to apply localized effects:
typescript
// Box blur on a tracked object or explicit bounding rectangle
const blurredPlate = comp.section({
  source: "assets/interview.mp4",
  x: 400,
  y: 200,
  width: 300,
  height: 300,
  borderRadius: 150,
  effects: [new Blur({ strength: 25, blurType: "Gaussian" })],
});
隔离底板或画布中的子区域,以应用局部效果:
typescript
// Box blur on a tracked object or explicit bounding rectangle
const blurredPlate = comp.section({
  source: "assets/interview.mp4",
  x: 400,
  y: 200,
  width: 300,
  height: 300,
  borderRadius: 150,
  effects: [new Blur({ strength: 25, blurType: "Gaussian" })],
});

4. Fluid Fluent Media Chains (
Media
)

4. 灵活的媒体处理链(
Media
)

Process clips outside a layout tree before mounting or exporting:
typescript
import { Media, ApplyLUT, Crop } from "gitframes";

const clip = Media.video("assets/raw_log.mp4")
  .apply(new ApplyLUT({ lutUrl: "assets/luts/cinematic.cube", intensity: 1.0 }))
  .apply(new Crop({ cropType: "rectangle", topPercentage: 10, heightPercentage: 80 }));

const pngBuffer = await clip.renderFrame({ atMs: 1500 });

在挂载或导出之前,在布局树之外处理片段:
typescript
import { Media, ApplyLUT, Crop } from "gitframes";

const clip = Media.video("assets/raw_log.mp4")
  .apply(new ApplyLUT({ lutUrl: "assets/luts/cinematic.cube", intensity: 1.0 }))
  .apply(new Crop({ cropType: "rectangle", topPercentage: 10, heightPercentage: 80 }));

const pngBuffer = await clip.renderFrame({ atMs: 1500 });

Effect Categories

效果类别

1. Color Grading & Tonal Dynamics

1. 调色与色调动态

  • Curves
    : Spline-interpolated tone curves for master, red, green, blue, plus hue/saturation curves (
    hueVsHue
    ,
    hueVsSat
    ,
    lumVsSat
    ,
    satVsSat
    ).
  • ColorBalance
    : Shadows, midtones, and highlights split color adjustments with
    preserveLuminosity
    .
  • Levels
    : Master and per-channel input/output black/white points and gamma.
  • SelectiveColor
    : CMYK-style photographic selective adjustments targeting reds, yellows, greens, cyans, blues, magentas, whites, neutrals, and blacks.
  • GradientMap
    : Multi-stop gradient remapping (
    stops: [{ position: 0, color: "#000" }, { position: 1, color: "#FFF" }]
    ).
  • ShadowsHighlights
    : Separate shadow lifting and highlight recovery with radius and tonal width controls.
  • ApplyLUT
    : 1D and 3D
    .cube
    color lookup table applicator.
  • Modulate
    : Real-time HSL/contrast controls:
    hue
    ,
    brightness
    ,
    contrast
    ,
    exposure
    ,
    saturation
    ,
    sepia
    .
  • Curves
    :用于主通道以及红、绿、蓝通道的样条插值色调曲线,并支持色相/饱和度曲线(
    hueVsHue
    、
    hueVsSat
    、
    lumVsSat
    、
    satVsSat
    )。
  • ColorBalance
    :分别调整阴影、中间调和高光,支持
    preserveLuminosity
    。
  • Levels
    :控制主通道及各通道输入/输出的黑白点和 gamma。
  • SelectiveColor
    :以 CMYK 风格进行摄影选择性调整,可针对红、黄、绿、青、蓝、洋红、白、中性和黑色。
  • GradientMap
    :多色标渐变重映射(
    stops: [{ position: 0, color: "#000" }, { position: 1, color: "#FFF" }]
    )。
  • ShadowsHighlights
    :分别提升阴影和恢复高光,并提供半径与色调宽度控制。
  • ApplyLUT
    :应用 1D 和 3D
    .cube
    色彩查找表。
  • Modulate
    :实时 HSL/对比度控制:
    hue
    、
    brightness
    、
    contrast
    、
    exposure
    、
    saturation
    、
    sepia
    。

2. Optical, Texture & Cinematic Emulsions

2. 光学、纹理与电影胶片效果

  • FilmGrain
    : GPU-synthesized film grain with grain sizing, shadow/highlight masking, and temporal animation speed.
  • Vignette
    : Elliptical or circular lens falloff with customizable center, roundness, and softness.
  • Blur
    : High-performance multi-mode blur:
    "Gaussian"
    ,
    "Box"
    ,
    "Median"
    ,
    "Motion"
    ,
    "Bilateral"
    ,
    "Edge-preserving"
    ,
    "Radial"
    ,
    "Zoom"
    . Supports partial blur regions and tracked object bounding boxes.
  • UnsharpMask
    : High-frequency edge sharpener with threshold suppression.
  • HighPass
    : Edge and frequency isolation with contrast boost.
  • HalftoneScreen
    : Procedural print screening with
    "Circle"
    ,
    "Diamond"
    ,
    "Line"
    , or
    "Square"
    dots in
    "Monochrome"
    or
    "CMYK"
    angles.
  • TileOffset
    : Seamless UV wrapping with
    "wrap"
    ,
    "clamp"
    ,
    "mirror"
    , or
    "transparent"
    boundaries.
  • MotionBlur
    : Directional shutter simulation with custom shutter angles and velocity clamps.
  • TemporalDeflicker
    : Multi-frame optical flow blending to eliminate flickering in generative AI clips or high-speed footage.
  • FilmGrain
    :由 GPU 生成的胶片颗粒,支持颗粒尺寸、阴影/高光遮罩以及时间动画速度。
  • Vignette
    :椭圆或圆形镜头衰减,可自定义中心、圆度和柔和度。
  • Blur
    :高性能多模式模糊:
    "Gaussian"
    、
    "Box"
    、
    "Median"
    、
    "Motion"
    、
    "Bilateral"
    、
    "Edge-preserving"
    、
    "Radial"
    、
    "Zoom"
    。支持局部模糊区域和跟踪对象边界框。
  • UnsharpMask
    :高频边缘锐化器,并支持阈值抑制。
  • HighPass
    :隔离边缘和频率,同时增强对比度。
  • HalftoneScreen
    :程序化印刷网点效果,可使用
    "Circle"
    、
    "Diamond"
    、
    "Line"
    或
    "Square"
    圆点,以及
    "Monochrome"
    或
    "CMYK"
    角度。
  • TileOffset
    :无缝 UV 环绕,支持
    "wrap"
    、
    "clamp"
    、
    "mirror"
    或
    "transparent"
    边界。
  • MotionBlur
    :快门方向模拟,支持自定义快门角度和速度限制。
  • TemporalDeflicker
    :通过多帧光流混合消除生成式 AI 片段或高速素材中的闪烁。

3. 3D Spatial Lighting & Materials

3. 3D 空间光照与材质

  • Relight3D
    : Screen-space normal map relighting with point, spot, and directional lights, specular highlights, roughness, and metallic uniforms.
  • SSAO
    : Screen-space ambient occlusion generating contact shadows from depth buffers.
  • PBRGlass
    : Physically-based transmission, index of refraction (IOR), optical dispersion, and Fresnel reflections.
  • DepthOfField
    : Camera lens simulation with aperture size, focal length, focus plane distance, and circle-of-confusion (CoC) blur.
  • Relight3D
    :屏幕空间法线贴图重新照明,支持点光源、聚光灯和平行光,以及高光、粗糙度和金属度 uniform。
  • SSAO
    :屏幕空间环境光遮蔽,可从深度缓冲生成接触阴影。
  • PBRGlass
    :基于物理的透射、折射率(IOR)、光学色散和 Fresnel 反射。
  • DepthOfField
    :相机镜头模拟,支持光圈大小、焦距、焦平面距离和弥散圆(CoC)模糊。

4. Matte, Keying & Edge Operations

4. 抠像、抠色与边缘处理

  • ColorKey
    : Studio greenscreen/bluescreen keyer with spill suppression and smoothness controls.
  • Crop
    : Rectangular, circular, or arbitrary polygon path cropping with corner rounding.

  • ColorKey
    :演播室绿幕/蓝幕抠色器,支持溢色抑制和平滑度控制。
  • Crop
    :使用矩形、圆形或任意多边形路径裁切,并可设置圆角。

On-Device Vision

设备端视觉

gitframes
runs vision models on the rendered frame and exposes the results as reactive signals. Models download lazily on first use and are cached in
$GITFRAMES_MODELS_DIR
(default
~/.cache/gitframes/models
).
OptionModelGives you
enableDetection
(default)
RTMDet-InsCOCO-80 boxes, tracked over time →
vision.objects
enableSegmentation
RTMDet-Ins (same pass)Soft per-instance masks →
vision.masks
,
vision.segmentation
enablePose
RTMO17 COCO keypoints per person →
vision.poseLandmarks
,
track.pose
enableMatte
Selfie SegmenterFast person alpha →
vision.segmentation.matte
variant: "t" | "s" | "m"
trades speed for accuracy (default
"s"
).
confidence
(default 0.3) and
classes: ["person", ...]
filter detections.
typescript
// Whole composition: returns the reactive bundle
const vision = comp.withVision({ enableSegmentation: true, enablePose: true });

// One layer: renders through a node mode
Layer.video("assets/dancer.mp4").withVision({ mode: "matte", enableSegmentation: true });
Node modes:
passthrough
,
mask
,
matte
,
crop
,
skeleton
,
boxes
,
tracking
. For
mask
/
matte
/
crop
,
matteSource: "instance"
(default; any COCO class, overlapping parts such as a dress merged into the subject) or
"selfie"
(people only, fastest).
gitframes
会在已渲染帧上运行视觉模型,并将结果公开为响应式信号。模型会在首次使用时延迟下载,并缓存在
$GITFRAMES_MODELS_DIR
中(默认路径为
~/.cache/gitframes/models
)。
选项模型提供内容
enableDetection
(默认)
RTMDet-InsCOCO-80 边界框,并随时间跟踪 →
vision.objects
enableSegmentation
RTMDet-Ins(同一推理过程)软性逐实例掩码 →
vision.masks
、
vision.segmentation
enablePose
RTMO每个人 17 个 COCO 关键点 →
vision.poseLandmarks
、
track.pose
enableMatte
Selfie Segmenter快速人物 alpha →
vision.segmentation.matte
variant: "t" | "s" | "m"
是在速度与准确率之间取舍(默认值为
"s"
)。
confidence
(默认 0.3)和
classes: ["person", ...]
可用于筛选检测结果。
typescript
// Whole composition: returns the reactive bundle
const vision = comp.withVision({ enableSegmentation: true, enablePose: true });

// One layer: renders through a node mode
Layer.video("assets/dancer.mp4").withVision({ mode: "matte", enableSegmentation: true });
节点模式包括:
passthrough
、
mask
、
matte
、
crop
、
skeleton
、
boxes
、
tracking
。对于
mask
/
matte
/
crop
,可使用
matteSource: "instance"
(默认值;适用于任意 COCO 类别,与主体重叠的部件(例如连衣裙)会并入主体)或
"selfie"
(仅限人物,速度最快)。

Choosing settings

设置选择

Measured per 1280–2048 px frame on CPU (
onnxruntime-node
):
Task
t
s
(default)
m
detect / segment (one shared pass)150–300 ms200–340 ms420–700 ms
pose~50 ms~120 ms~280 ms
matte (Selfie Segmenter)~20 ms~20 ms~20 ms
  • Start with
    "s"
    . Use
    "m"
    for hero shots with fast motion blur or busy backgrounds;
    "t"
    mainly saves time on pose.
  • Enabling both
    enableDetection
    and
    enableSegmentation
    costs one inference, not two.
  • Selfie matte only for close framing. It is tuned for a person filling much of the frame: it misses distant figures and can report a "person" on close-ups with nobody in them. Keep
    matteSource: "instance"
    for anything else.
  • Raise
    confidence
    (e.g.
    0.5
    ) on abstract or stylized footage — at the default
    0.3
    the model will put loose labels ("teddy bear", "donut") on smoke, eyes and planets.
  • Restrict
    classes
    when you only care about one thing; it also stops the subject from switching to another object when the person leaves frame.
以下数据是在 CPU(
onnxruntime-node
)上按 1280–2048 px 帧测得:
任务
t
s
(默认)
m
检测/分割(共享一次推理)150–300 ms200–340 ms420–700 ms
姿态~50 ms~120 ms~280 ms
抠像(Selfie Segmenter)~20 ms~20 ms~20 ms
  • 先使用
    "s"
    。对于包含快速运动、运动模糊或繁忙背景的重点镜头,使用
    "m"
    ;
    "t"
    主要用于缩短姿态处理时间。
  • 同时启用
    enableDetection
    和
    enableSegmentation
    只会执行一次推理,而不是两次。
  • 仅在近距离取景时使用 Selfie 抠像。 它针对占据画面大部分的人物进行了调校:会漏掉远处人物,也可能在无人出现的特写镜头中报告“person”。其他情况请保持
    matteSource: "instance"
    。
  • 对抽象或风格化素材提高
    confidence
    (例如
    0.5
    )——在默认
    0.3
    下,模型可能会给烟雾、眼睛和行星随意标注类别(“teddy bear”“donut”)。
  • 如果只关心一个目标,请限制
    classes
    ;这样也能防止人物离开画面后主体切换到其他对象。

How it behaves at render time

渲染时的行为

  • One-frame delay. Vision reads the layer's previous rendered frame, so the very first frame has no results (a cutout renders transparent) and masks trail the plate by one frame. This is invisible at normal playback speed.
  • Render vision frames in order.
    renderVideo
    does this for you. For stills, render at least two consecutive frames with the same renderer and keep the last one. Jumping straight to a later frame (or using a frame grid) cuts out pixels from whatever frame was rendered before it, which shows up as a ghosted double of the subject.
  • Subject choice.
    mask
    /
    matte
    /
    crop
    use the largest person; with no person, the most confident instance. Instances overlapping the subject and no more than twice its size are merged in (a dress, a held instrument) — large containers around it (a tunnel, a window frame) are not.
  • Each vision layer tracks objects independently; track ids from two layers are unrelated.
  • 延迟一帧。 视觉模型会读取图层上一个已渲染帧,因此第一帧没有结果(抠图会渲染为透明),掩码也会比底板晚一帧。在正常播放速度下,这一延迟不可见。
  • 按顺序渲染视觉帧。
    renderVideo
    会自动完成。对于静态图,应使用同一个 renderer 至少连续渲染两帧,并保留最后一帧。直接跳转到后续帧(或使用帧网格),会切掉此前渲染帧中的像素,从而表现为主体出现重影。
  • 主体选择。
    mask
    /
    matte
    /
    crop
    使用画面中最大的人物;如果没有人物,则使用置信度最高的实例。与主体重叠且尺寸不超过主体两倍的实例会被合并进来(例如连衣裙、手持乐器),但主体周围的大型容器(隧道、窗框)不会被合并。
  • 每个视觉图层都会独立跟踪对象;两个图层中的 track id 互不相关。

Troubleshooting

故障排除

SymptomFix
Part of a fast-moving garment drops out of the cutout
variant: "m"
, or
keyBackground: true
to grow the subject into connected foreground
Cutout is the wrong objectSet
classes: ["person"]
(or the class you want)
Faint halo around the cutout on dark backgroundsLower
featherRadius
, or raise
maskThreshold
(e.g.
0.6
)
Renders offline / in CIPre-download with
runner.preload([...])
into
$GITFRAMES_MODELS_DIR
, or point
GITFRAMES_MODELS_BASE_URL
at a mirror
Check the models themselves
await runner.preload([...])
on a fresh models directory; it downloads each model and verifies its SHA-256 (about 380 MB for all of them)
症状修复方案
快速移动的服装有一部分从抠图中丢失使用
variant: "m"
,或设置
keyBackground: true
,将主体扩展为连通的前景
抠出了错误对象设置
classes: ["person"]
(或所需类别)
深色背景上抠图周围有淡淡光晕降低
featherRadius
,或提高
maskThreshold
(例如
0.6
)
在离线环境或 CI 中渲染使用
runner.preload([...])
预下载到
$GITFRAMES_MODELS_DIR
,或将
GITFRAMES_MODELS_BASE_URL
指向镜像
检查模型本身在全新的模型目录中执行
await runner.preload([...])
;它会下载每个模型并验证其 SHA-256(全部模型约 380 MB)

1. Subject Sandwich ("Text Behind Subject")

1. 主体夹层(“文字置于主体后方”)

Cuts out the foreground subject from footage and sandwiches typography or graphics directly behind them:
typescript
comp.addSubjectSandwich({
  source: "assets/dancer.mp4",
  behind: [
    Layer.text("HEADLINE BEHIND", {
      fontSize: 120,
      fill: "#FF5A1F",
      fontWeight: 900
    })
  ],
  feather: 4,
  fit: "cover"
});
从素材中抠出前景主体,并将文字或图形直接置于其后方:
typescript
comp.addSubjectSandwich({
  source: "assets/dancer.mp4",
  behind: [
    Layer.text("HEADLINE BEHIND", {
      fontSize: 120,
      fill: "#FF5A1F",
      fontWeight: 900
    })
  ],
  feather: 4,
  fit: "cover"
});

2. Smart Re-Framing (16:9 to 9:16 Auto-Crop)

2. 智能重构图(16:9 转 9:16 自动裁剪)

Smoothly reframes landscape video into vertical shorts by following a tracked subject with virtual camera damping:
typescript
const vision = comp.withVision({ enableDetection: true });
comp.addSmartFraming({
  source: "assets/action.mp4",
  target: vision.objects.primary,
  targetAspect: 9 / 16,
  damping: 0.15,
  leadHeadroom: 0.1
});
通过虚拟摄像机阻尼跟随被跟踪主体,将横屏视频平滑重构图为竖屏短视频:
typescript
const vision = comp.withVision({ enableDetection: true });
comp.addSmartFraming({
  source: "assets/action.mp4",
  target: vision.objects.primary,
  targetAspect: 9 / 16,
  damping: 0.15,
  leadHeadroom: 0.1
});

3. Subject Outline Glow & Neon Pulse

3. 主体轮廓辉光与霓虹脉冲

Strokes the segmented subject boundary with an audio-reactive contour glow:
typescript
const vision = comp.withVision({ enableSegmentation: true });
comp.addSubjectOutline(vision.segmentation.subject, {
  source: "assets/character.mp4",
  color: "#FF5A1F",
  width: 6,
  blur: 12
});
使用音频响应式轮廓辉光描边分割后的主体边界:
typescript
const vision = comp.withVision({ enableSegmentation: true });
comp.addSubjectOutline(vision.segmentation.subject, {
  source: "assets/character.mp4",
  color: "#FF5A1F",
  width: 6,
  blur: 12
});

4. Tracked Region Blur

4. 跟踪区域模糊

Blurs faces, license plates, or any detected class by following a live track:
typescript
const vision = comp.withVision({ classes: ["person"] });
layer.blurRegion(vision.objects.byCategory("person"), { strength: 30 });
通过跟随实时跟踪结果,对人脸、车牌或任意检测类别进行模糊处理:
typescript
const vision = comp.withVision({ classes: ["person"] });
layer.blurRegion(vision.objects.byCategory("person"), { strength: 30 });

5. Analyze Before Authoring

5. 创作前分析

One-shot, ffmpeg-free report of what is in a clip (tracks, classes, mask coverage):
typescript
const report = await comp.analyzeVisionSequence("assets/street.mp4", {
  tasks: ["detect", "pose"],
  categories: ["person"]
});
report.tracks; // [{ trackId, category, frames: [start, end], centerPath, ... }]

无需 ffmpeg 的一次性报告,用于分析片段中的内容(跟踪、类别、掩码覆盖率):
typescript
const report = await comp.analyzeVisionSequence("assets/street.mp4", {
  tasks: ["detect", "pose"],
  categories: ["person"]
});
report.tracks; // [{ trackId, category, frames: [start, end], centerPath, ... }]

Reactive Signal Modulation

响应式 Signal 调制

Uniforms on any
Effect
accept reactive
Signal
instances instead of static values. When the signal changes, the GPU uniform buffer updates automatically without rebuilding the pipeline:
typescript
import { Layer, Blur, sineSignal, computed } from "gitframes";

// Oscillating breath blur
const blurSignal = sineSignal({
  frequencyHz: 0.5,
  min: 0,
  max: 20
});

const layer = Layer.image("assets/bg.jpg")
  .withEffect(new Blur({
    strength: blurSignal,
    blurType: "Gaussian"
  }));
任何
Effect
上的 uniform 都可以接受响应式
Signal
实例,而非静态值。信号发生变化时,GPU uniform buffer 会自动更新,无需重新构建管线:
typescript
import { Layer, Blur, sineSignal, computed } from "gitframes";

// Oscillating breath blur
const blurSignal = sineSignal({
  frequencyHz: 0.5,
  min: 0,
  max: 20
});

const layer = Layer.image("assets/bg.jpg")
  .withEffect(new Blur({
    strength: blurSignal,
    blurType: "Gaussian"
  }));

Best Practices:

最佳实践:

  1. Emulsion Restraint: Keep
    FilmGrain
    (
    0.04–0.08
    ) and
    Vignette
    (
    0.2–0.45
    ) subtle. Over-filtering looks amateurish.
  2. Order Matters: Place tonal grading (
    Curves
    ,
    ColorBalance
    ) before lens optics (
    Blur
    ,
    DepthOfField
    ), and apply grain (
    FilmGrain
    ) as the outermost layer.
  3. No Redundant Shaders: For static image exports, set
    animated: false
    on
    FilmGrain
    to preserve deterministic static renders.
  1. 胶片效果克制: 将
    FilmGrain
    (
    0.04–0.08
    )和
    Vignette
    (
    0.2–0.45
    )保持细微。过度滤镜化会显得业余。
  2. 顺序很重要: 将色调分级(
    Curves
    、
    ColorBalance
    )放在镜头光学效果(
    Blur
    、
    DepthOfField
    )之前,并将颗粒(
    FilmGrain
    )作为最外层应用。
  3. 不使用冗余 shader: 导出静态图像时,将
    FilmGrain
    的
    animated
    设为
    false
    ,以保留确定性的静态渲染结果。