frame-light-leak-cinema
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
- Installs
- 2.6K
- Last 24h
- +19
- Trending rank
- #6032
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/nexu-io/open-design --skill frame-light-leak-cinema- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads frame-light-leak-cinema automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
【模板: 胶片漏光电影帧】 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 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关动效。
FAQ
What does the frame-light-leak-cinema skill do?
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
How do I install frame-light-leak-cinema?
Run npx skills add https://github.com/nexu-io/open-design --skill frame-light-leak-cinema in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frame-light-leak-cinema/ (personal) or .claude/skills/frame-light-leak-cinema/ (project).
Which AI agents can use frame-light-leak-cinema?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is frame-light-leak-cinema safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains frame-light-leak-cinema?
It is published by nexu-io in nexu-io/open-design. It has 2,620 recorded installs.
More from nexu-io/open-design
ui-ux-pro-max
nexu-io/open-design
Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign.
frontend-design
nexu-io/open-design
Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
web-design-guidelines
nexu-io/open-design
Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
design-brief
nexu-io/open-design
Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".
creative-director
nexu-io/open-design
AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.
threejs
nexu-io/open-design
Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.
Popular other skills
hyperframes-cli
heygen-com/hyperframes
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
triage
mattpocock/skills
Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.
ask-matt
mattpocock/skills
Ask which skill or flow fits your situation. A router over the skills in this repo.
to-questionnaire
mattpocock/skills
Turn a decision you can't fully answer into a questionnaire for someone else to fill in.
loop-me
mattpocock/skills
Grill me about specs for the workflows I want to build, within this workspace.