Agent skill · Design & Presentation

frame-light-leak-cinema

胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡

nexu95,528★ · +2,037/wk · 5 repos on radarProfile →
claude-codeApache-2.0
Install
npx skills add nexu-io/html-anything --skill frame-light-leak-cinema --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 3
SKILL.md size: 2 KB
Bundled scripts: none
Path: next/src/lib/templates/skills/frame-light-leak-cinema/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 8,084 · +96 this week
Language: HTML
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

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

What's inside
Ships with 2 files
  • example.html
  • example.md
More from html-anything
All skills →
About this skill
What does the frame-light-leak-cinema skill do?

胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡

How do I install it?

Run `npx skills add nexu-io/html-anything --skill frame-light-leak-cinema --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From nexu-io/html-anything, a repository with 8,084 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going