frame-light-leak-cinema
Lets your agent add light leak and film grain effects to images. It's useful for giving a cinematic feel to video openings or chapter cards.
What it does
Creates images with an old film look, featuring light leak effects, film grain, and black cinema borders. It's ideal for video intros or chapter cards.
When to use it
- ✓For a documentary opening.
- ✓To create a video chapter card.
- ✓To give a vintage feel to a personal video.
Example of what to ask your AI
“Create a film opening image with orange light leaks, grain, and black borders, with the title 'The Great Adventure'.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI combines warm colors and gradients to simulate light leaks and uses a noise effect to mimic film grain. It also adds classic fonts and black borders for a cinematic look.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill frame-light-leak-cinemaOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/frame-light-leak-cinema/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
【模板: 胶片漏光电影帧】 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 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
Can I use colors other than warm ones?
No, the goal is to imitate the classic film texture, which uses warm colors. Cool or vibrant colors are not recommended.
What are 'letterboxes'?
These are the black bars at the top and bottom of the image, common in movies to give a more cinematic feel.
Can I add animations?
Yes, subtle motion effects like slowly moving light leaks can be added, but they can be turned off if you prefer less motion.
Details
Original description by the author
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #544
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
blender-motion-state-inspection
Allows inspection of details in 3D animations. It's useful for checking poses, movements, and character alignment in animations.
affaan-m/ECC
manim-video
Lets your agent create animated explainer videos. It uses Manim to generate clear graphs and diagrams for technical concepts.
affaan-m/ECC
remotion-video-creation
Guides your agent in creating videos using React with the Remotion library. It covers best practices for animations, audio, captions, and other visual elements.
affaan-m/ECC