frame-light-leak-cinema

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

【模板: 胶片漏光电影帧】【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。

【画布】

2.39:1 letterbox (推荐): 1920×800, 上下黑边各 140px (
```
#000
```
)。
或 16:9: 1920×1080, 无 letterbox。

【背景】

底层: 深暖色 (深红棕
```
#1a0d08
```
/ 墨绿
```
#0a1410
```
/ 蓝紫
```
#0d0e1a
```
) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。

胶片漏光 (Light Leak): 2-3 个大

radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%)

+ 1 个底部

linear-gradient(to top, #d97757 0%, transparent 30%)

; 颜色取暖橙 / 桃 / 玫红 / 暗黄, 不要冷蓝。

35mm Grain: 全屏覆盖 SVG turbulence noise 图层, opacity 14%,

mix-blend-mode: overlay

; 也可用

background-image: url("data:image/svg+xml,...feTurbulence...")

。

可选: 1 道
```
feDisplacementMap
```
模拟胶片摆动 (慎用)。

【文字】

中央或左下: 大字衬线 (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; 颜色暖白
```
#f5e9d6
```
或 cream。
副标 (24-28px) 一行, opacity 0.7, 同样衬线。
角落 caption (uppercase letterspace 0.18em, 10-11px, mono, opacity 0.5): "REEL 03 · CH I · 1985"。
底部 timecode + 拍摄地 + 日期 (mono, opacity 0.4)。

【可选附加】

"胶片划痕": 几条 1-2px 竖向白线, opacity 0.2, 不规则间距 (用
```
box-shadow
```
多重 inset 或多个
```
<div>
```
)。
"胶片齿孔": letterbox 黑边内, 等距小白方块 (CSS repeating-linear-gradient)。
入场动效: 整画面从 underexposed (brightness 0.3) → normal, 800ms 内; 漏光位置缓慢漂移 12s 一个周期。

【设计细节】

颜色绝不超过 4 个色相 (深背景 + 2 个暖漏光色 + 文字 cream)。
严禁: 蓝紫漏光 (违反胶片质感)、emoji、霓虹色、几何 dashboard 装饰。
中文:
```
Noto Serif SC
```
italic 不存在 → 用
```
Noto Serif SC
```
regular + 字距加大。
必须用用户提供的标题; 自动估算合理"年份 / 章节 / 地点" 元数据 (但来源用户内容)。
单文件 HTML, 用
```
prefers-reduced-motion
```
关动效。

【Template: Film Light Leak Movie Frame】【Purpose】Opening single frame for documentaries / personal short films / video chapter cards — warm orange light leak + 35mm grain + large serif font, classic film texture. Inspired by hyperframes light-leak.

【Canvas】

2.39:1 letterbox (Recommended): 1920×800, 140px top and bottom black bars (
```
#000
```
).
Or 16:9: 1920×1080, no letterbox.

【Background】

Base layer: Deep warm tones (dark reddish brown
```
#1a0d08
```
/ dark green
```
#0a1410
```
/ blue-purple
```
#0d0e1a
```
) or scene depiction (CSS gradient to simulate sky / indoor / outdoor).

Film Light Leak: 2-3 large

radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%)

+ 1 bottom

linear-gradient(to top, #d97757 0%, transparent 30%)

; use warm orange / peach / rose red / dark yellow, no cool blue.

35mm Grain: Full-screen overlay of SVG turbulence noise layer, opacity 14%,
```
mix-blend-mode: overlay
```
; alternatively use
```
background-image: url("data:image/svg+xml,...feTurbulence...")
```
.
Optional: 1
```
feDisplacementMap
```
to simulate film jitter (use cautiously).

【Text】

Center or bottom-left: Large serif font (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; color warm white
```
#f5e9d6
```
or cream.
Subtitle (24-28px) in one line, opacity 0.7, also serif font.
Corner caption (uppercase letterspace 0.18em, 10-11px, mono, opacity 0.5): "REEL 03 · CH I · 1985".
Bottom timecode + shooting location + date (mono, opacity 0.4).

【Optional Add-ons】

"Film scratches": Several 1-2px vertical white lines, opacity 0.2, irregular spacing (use
```
box-shadow
```
multiple inset or multiple
```
<div>
```
).
"Film perforations": Equally spaced small white squares within letterbox black bars (CSS repeating-linear-gradient).
Entrance animation: Whole frame transitions from underexposed (brightness 0.3) → normal, within 800ms; light leak position drifts slowly with a 12s cycle.

【Design Details】

No more than 4 color hues (dark background + 2 warm light leak colors + cream text).
Prohibited: Blue-purple light leak (violates film texture), emoji, neon colors, geometric dashboard decorations.
Chinese:
```
Noto Serif SC
```
italic does not exist → use
```
Noto Serif SC
```
regular + increased letter spacing.
Must use the title provided by the user; automatically estimate reasonable metadata like "year / chapter / location" (but sourced from user content).
Single-file HTML, use
```
prefers-reduced-motion
```
to disable animations.