跳到正文
cccskills
免费在 GitHub 公开

frame-light-leak-cinema

Create a film-style opening frame or chapter card as a single HTML file. Combine warm light leaks, grain texture, large serif titles, and optional scratches or film perforations for documentaries and personal short films.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

查看安装方法

适用场景

  • Design an opening frame for a documentary
  • Create a title frame for a personal short film
  • Build chapter cards for a video
  • Add dates and locations to a film-style frame

包含的文件(3)

  • SKILL.md2.9 KB
  • example.html3.7 KB
  • example.md224 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Format long articles for blogs and newsletters with a magazine-style layout inspired by Substack and Medium. A centered text column, contrasting headings, styled quotations, and labeled code blocks give readers clear visual cues throughout the page.

中文简介正在准备中。当前显示英语简介。

  • Formatting a long blog article
  • Preparing an essay or newsletter for publication
  • Laying out articles with quotations and code examples
nexu-io/html-anything92062026年10月13日 更新

Turn a concept’s origins into a magazine-style visual story. Six distinct layouts combine diagrams, annotations, and typography to trace a concrete problem through failed attempts and a turning point, revealing the concept’s name at the end.

中文简介正在准备中。当前显示英语简介。

  • Illustrating how a concept emerged
  • Creating visual learning materials about failed attempts
  • Presenting a concept’s history as a magazine feature
nexu-io/html-anything92062026年10月13日 更新

blog-post

免费

Create magazine-style pages for long blog posts, essays, and case studies. The layout combines readable single-column text with a prominent title, captioned figures, highlighted quotations, author details, and related article cards.

中文简介正在准备中。当前显示英语简介。

  • Designing a long-form blog page
  • Presenting an essay with magazine-style typography
  • Laying out a case study with figures and quotations
nexu-io/html-anything92062026年10月13日 更新

Create a landscape card for an X post, featuring a short quote, insight, or data point. The layout combines prominent text with attribution, a handle, a category label, and a brand watermark.

中文简介正在准备中。当前显示英语简介。

  • Sharing a quote with author attribution on X
  • Highlighting a data point in a social post
  • Creating branded cards for short insights
nexu-io/html-anything92062026年10月13日 更新

Create a series of Xiaohongshu-style knowledge cards with a cover, focused content cards, and a closing summary. Soft colors, large text, and spacious layouts make the cards suitable for mobile reading and screenshots for social posts.

中文简介正在准备中。当前显示英语简介。

  • Turn practical tips into a series of social media cards
  • Explain one key idea per card for mobile readers
  • Prepare card layouts for social post screenshots
nexu-io/html-anything92062026年10月13日 更新

Turn supplied competitor research into a product strategy report. Compare positioning, features, pricing, and user feedback, then identify opportunities and propose actions for the next 30, 90, and 180 days, while marking missing evidence.

中文简介正在准备中。当前显示英语简介。

  • Comparing competitors to guide product decisions
  • Reviewing pricing and plan differences
  • Turning research notes into a strategy report
nexu-io/html-anything92062026年10月13日 更新

查看 nexu-io 的全部技能

报告此技能的问题