frame-light-leak-cinema

nexu-io/open-design

Film light leaks, grain, and letterbox framing for cinematic video openings and chapter cards.

What is frame-light-leak-cinema?

A video frame template that applies warm film light leaks, 35mm grain texture, 16:9 or 2.39:1 letterbox framing, and large serif typography to create cinematic opening sequences or chapter cards. Use it for documentary intros, personal short films, or video chapter breaks that need a classic film aesthetic.

Applies warm-toned radial and linear gradients to simulate film light leaks (orange, peach, magenta tones)
Overlays SVG turbulence noise at 14% opacity to create authentic 35mm grain texture
Renders 2.39:1 letterbox (1920×800) or 16:9 (1920×1080) aspect ratios with black bars and optional film perforations
Positions large serif typography (5–8vw, italic) in cream or warm white for titles and subtitles
Includes optional film scratches, timecode captions, and subtle entrance animations (brightness fade, light-leak drift)

How to install frame-light-leak-cinema

npx skills add https://github.com/nexu-io/open-design --skill frame-light-leak-cinema

Claude Code

Cursor

Windsurf

Cline

How to use frame-light-leak-cinema

1.Install the skill using the provided npm command
2.Provide your title text, subtitle, and optional metadata (reel number, chapter, location, date)
3.Choose your aspect ratio: 2.39:1 letterbox (1920×800) or 16:9 (1920×1080)
4.Select a warm background color (deep red-brown, dark green, or blue-purple) or provide a gradient description
5.The template will generate an HTML file with light leaks, grain overlay, serif typography, and optional film details (scratches, perforations, timecode)
6.Preview in the editor; animations respect prefers-reduced-motion system setting

Use cases

Good for

Create cinematic opening frames for documentary or personal short films with warm light-leak effects
Design chapter card frames for video series with film grain and letterbox framing
Build video intros with classic film aesthetics using serif type and light-leak overlays
Generate single-frame video stills with metadata (reel number, date, location) in monospace captions
Produce nostalgic or vintage-looking video chapter breaks with authentic 35mm grain texture

Who it's for

Video editors and filmmakers creating cinematic intros or chapter cards
Documentary producers seeking classic film aesthetics
Content creators building personal short films or video series
Designers working on vintage or nostalgic video branding

frame-light-leak-cinema FAQ

Can I use cool colors (blue, purple) for the light leaks?

No. The template is designed for warm film light leaks only (orange, peach, magenta, dark yellow). Cool blues violate the authentic film aesthetic.

Does the template support custom background images?

The template uses CSS gradients to simulate backgrounds (sky, interior, outdoor scenes). You can describe the scene, but it generates gradients rather than accepting uploaded images.

What happens if I use Chinese text?

The template uses Noto Serif SC in regular weight (italic is not available for CJK) with increased letter spacing to maintain the serif aesthetic.

Can I disable the animations?

Yes. The template respects the CSS prefers-reduced-motion media query, so animations will be disabled if the user's system has reduced motion enabled.

What metadata can I include in the captions?

You can add reel number, chapter identifier, location, date, and timecode in monospace captions at the bottom or corners with reduced opacity (0.4–0.5).

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.

name: frame-light-leak-cinema zh_name: "胶片漏光电影帧" en_name: "Light-Leak Cinematic Frame" emoji: "🎞️" description: "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards." zh_description: "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡" en_description: "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards." category: video scenario: video aspect_hint: "2.39:1 letterbox (1920×800) 或 16:9 (1920×1080)" featured: 36 tags: ["cinema", "film", "light-leak", "grain", "letterbox", "frame"] example_id: sample-frame-light-leak-cinema example_name: "胶片漏光 · REEL 03" example_format: markdown example_tagline: "暖橙漏光 + 35mm 颗粒" example_desc: "2.39:1 letterbox + 衬线斜体大字 + 胶片齿孔" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · light-leak" od: mode: video surface: video scenario: video upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"

【模板: 胶片漏光电影帧】【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 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 一个周期。

【设计细节】