Frame Light Leak Cinema
- 1.6k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
frame-light-leak-cinema is an agent skill that film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
About
frame-light-leak-cinema is an agent skill from nexu-io/open-design that film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards. 【模板: 胶片漏光电影帧】 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 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 Developers invoke frame-light-leak-cinema during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.
- 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。
- 2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px (`#000`)。
- 或 16:9: 1920×1080, 无 letterbox。
- 底层: 深暖色 (深红棕 `#1a0d08` / 墨绿 `#0a1410` / 蓝紫 `#0d0e1a`) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。
- 35mm Grain**: 全屏覆盖 SVG turbulence noise 图层, opacity 14%, `mix-blend-mode: overlay`; 也可用 `background-image: url("data:ima
Frame Light Leak Cinema by the numbers
- 1,629 all-time installs (skills.sh)
- +124 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #236 of 1,041 Cloud & Infrastructure skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
frame-light-leak-cinema capabilities & compatibility
- Capabilities
- 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + · 2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px ( · 或 16:9: 1920×1080, 无 letterbox。 · 底层: 深暖色 (深红棕 `#1a0d08` / 墨绿 `#0a1410` / 蓝紫 `#0d0 · 35mm grain**: 全屏覆盖 svg turbulence noise 图层, opac
- Use cases
- orchestration
What frame-light-leak-cinema says it does
【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。
- **2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px (`#000`)。
- 底层: 深暖色 (深红棕 `#1a0d08` / 墨绿 `#0a1410` / 蓝紫 `#0d0e1a`) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。
npx skills add https://github.com/nexu-io/open-design --skill frame-light-leak-cinemaAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.6k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
Who is it for?
Developers working on cloud & infrastructure during operate tasks.
Skip if: Tasks outside Cloud & Infrastructure scope described in SKILL.md.
When should I use this skill?
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
What you get
Completed cloud & infrastructure workflow aligned with SKILL.md steps.
- Cinematic letterbox video frame
- Light-leak and grain title card
By the numbers
- Supports 2.39:1 (1920×800) and 16:9 (1920×1080) outputs
- Featured at rank 36 in the open-design catalog
Files
【模板: 胶片漏光电影帧】 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 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 SCitalic 不存在 → 用Noto Serif SCregular + 字距加大。 - 必须用用户提供的标题; 自动估算合理"年份 / 章节 / 地点" 元数据 (但来源用户内容)。
- 单文件 HTML, 用
prefers-reduced-motion关动效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Light Leak Cinema · REEL 03</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+Pro:ital,wght@0,400;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500&display=swap" rel="stylesheet" />
<style>
body { font-family:'Source Serif Pro','Noto Serif SC',Georgia,serif; background:#000; margin:0; min-height:100vh; }
.frame {
position:relative; width:100%; max-width:1600px; aspect-ratio: 2.39 / 1; margin:0 auto;
background:#1a0d08;
overflow:hidden;
}
.scene {
position:absolute; inset:0;
background:
radial-gradient(ellipse at 78% 18%, #ffb547 0%, transparent 38%),
radial-gradient(ellipse at 90% 30%, #ff7e3f 0%, transparent 30%),
linear-gradient(180deg, transparent 60%, #d97757 110%),
radial-gradient(ellipse at 30% 60%, #2a1410 0%, transparent 60%),
linear-gradient(135deg, #1a0d08 0%, #28140c 50%, #0a0502 100%);
}
.grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* scratches */
.scratch { position:absolute; top:0; bottom:0; width:1px; background:#f5e9d6; opacity:0.18; }
.vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%); }
.perfs {
position:absolute; left:0; right:0; height:6px;
background-image: repeating-linear-gradient(90deg, #f5e9d6 0 8px, transparent 8px 24px);
opacity:0.5;
}
.cream { color:#f5e9d6; }
.mono { font-family:'IBM Plex Mono',monospace; }
.display { font-family:'EB Garamond','Noto Serif SC',serif; }
.chip { font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-6" style="background:#000">
<div class="frame">
<div class="scene"></div>
<!-- scratches -->
<div class="scratch" style="left:14%;height:38%"></div>
<div class="scratch" style="left:42%;height:60%;top:20%;opacity:0.12"></div>
<div class="scratch" style="left:71%;height:30%;top:55%"></div>
<!-- letterbox bars - actually built into aspect ratio container; perfs on top -->
<!-- top caption -->
<header class="absolute top-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-70 z-10">
<span>REEL 03 · CH I · MMXXVI</span>
<span>A Quiet Year in Berlin</span>
<span>00:03:21</span>
</header>
<!-- main text -->
<main class="absolute z-10 cream" style="left:8%; bottom:18%; max-width:60%">
<div class="chip mono opacity-70">Reel III · Title</div>
<h1 class="display mt-3 leading-[1.05] italic font-medium" style="font-size:clamp(40px,5.5vw,84px); color:#f5e9d6">
A Quiet Year<br/>
<span style="font-style:italic">in</span> Berlin.
</h1>
<p class="display mt-4 italic opacity-80 text-[22px]">
A short film about typesetting, in fourteen reels.
</p>
</main>
<!-- bottom right meta -->
<footer class="absolute bottom-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-50 z-10">
<span>52.5200° N · 13.4050° E</span>
<span>FILMED ON 35MM · PROXY 1080P</span>
<span>FRAME · LIGHT-LEAK-CINEMA</span>
</footer>
<div class="grain"></div>
<div class="vignette"></div>
</div>
</body>
</html>
胶片漏光帧 · REEL 03
2.39:1 letterbox, 暖橙漏光 + 35mm 颗粒
标题
A Quiet Year in Berlin
副标
A short film about typesetting, in fourteen reels.
Metadata
REEL 03 · CH I · MMXXVI · 00:03:21
Related skills
Azure AiIntegrates Azure AI Content Safety, Document Intelligence, Speech, and Search services into Java-based agents and applications.479k1.3kAzure PrepareGenerate the exact Azure infrastructure files, Dockerfiles, and azure.yaml configuration needed before deploying any new or modernized application.479k1.3kAzure StorageConnect agents and applications to Azure Blob Storage, File Shares, Queues, Tables, and Data Lake without leaving the coding environment.478k1.3kAppinsights InstrumentationAutomatically instrument web applications running on Azure App Service with Application Insights for observability without manual configuration.478k1.3kAzure Resource LookupInstantly list, query, and discover any Azure resources across subscriptions without leaving the agent chat.478k1.3kAzure AigatewayConfigure Azure API Management as a secure, governed gateway for routing traffic to LLMs, MCP servers, and agent tools.478k1.3kForks & variants (1)
Frame Light Leak Cinema has 1 known copy in the catalog totaling 1 installs. They canonicalize to this original listing.
- nexu-io - 1 installs
How it compares
Pick frame-light-leak-cinema for film-style title cards; use frame-flowchart-sticky or frame-data-chart-nyt for diagram or data storytelling frames.
FAQ
What does frame-light-leak-cinema do?
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
When should I use frame-light-leak-cinema?
During operate infra work for cloud & infrastructure.
Is frame-light-leak-cinema safe to install?
Review the Security Audits panel on this listing before production use.