Frame Light Leak Cinema
Turn titles or chapter copy into a cinematic letterbox frame with film light leaks, grain, and large serif typography for openings or section cards.
Overview
Light-Leak Cinematic Frame is an agent skill for the Build phase that turns your real copy into a film-style opening or chapter card with light leaks, grain, letterbox framing, and large serif type.
Install
npx skills add https://github.com/nexu-io/open-design --skill frame-light-leak-cinemaWhat is this skill?
- Warm film light-leak aesthetic with 35mm-style grain overlay
- Supports 2.39:1 letterbox (1920×800) or 16:9 (1920×1080) aspect hints
- Large serif type and optional film perforation cues for chapter cards
- Hyperframes-style template with debounced HTML preview reload
- Example prompt forbids lorem ipsum and placeholder images—real content only
- 2 aspect presets: 2.39:1 (1920×800) or 16:9 (1920×1080)
Adoption & trust: 671 installs on skills.sh; 61.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have section titles or opening copy but no fast way to make them feel like a cinematic reel without manual motion-design work.
Who is it for?
Indie creators and solo founders producing chapter cards, reel intros, or course segment headers with a fixed cinematic look.
Skip if: Teams needing full timeline editing, multi-scene storyboards, or data-driven dashboards without a generative frame template.
When should I use this skill?
You need a cinematic opening or chapter card with film light leaks, grain, letterbox, and large serif typography from real content.
What do I get? / Deliverables
You get a letterboxed, grain-textured frame ready for video surfaces or HTML preview, with your actual content instead of placeholders.
- HTML cinematic frame with letterbox and typography
- Preview-ready visual aligned to the template signature
Recommended Skills
Journey fit
Primary shelf is Build because the skill produces visual motion/HTML frame assets during product and content production, not distribution or analytics. Frontend fits best: output is a styled 16:9 or 2.39:1 visual surface (HTML preview) meant for presentation layers rather than API or infra work.
How it compares
Use as a structured visual template skill, not as a general video editor or MCP media server.
Common Questions / FAQ
Who is frame-light-leak-cinema for?
Solo builders and small teams who publish video-forward content and want consistent cinematic title frames from agent workflows.
When should I use frame-light-leak-cinema?
Use it during Build when drafting launch demos or course modules, or when refreshing Grow content with new chapter cards that must match the same film aesthetic.
Is frame-light-leak-cinema safe to install?
Review the Security Audits panel on this Prism page and inspect the skill bundle before granting browser or filesystem access in your agent.
SKILL.md
READMESKILL.md - Frame Light Leak Cinema
【模板: 胶片漏光电影帧】 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 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` 关动效。