跳到正文
cccskills
免费在 GitHub 公开

frame-light-leak-cinema

Create cinematic opening frames and chapter cards with warm light leaks, film grain, and large serif titles. The template produces a single HTML file with widescreen framing and optional subtle motion.

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

原文查看原文说明

Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.

查看安装方法

适用场景

  • Designing a documentary opening frame
  • Creating a title card for a personal short film
  • Making cinematic chapter cards
  • Adding a film-style title with location and date

包含的文件(5)

  • SKILL.md3.9 KB
  • example.md224 B
  • package.json327 B
  • source/index.html3.7 KB
  • template.html-video.yaml1.8 KB

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 的隐私权政策和服务条款。

同一仓库的技能

Create a moving poster for brand statements, vision messages, or presentation openings. Red rules, oversized tilted type, and a three-line headline appear in sequence, using a paper-white background and styling inspired by 1970s European editorial posters.

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

  • Opening a presentation like a magazine cover
  • Presenting a brand manifesto or vision
  • Introducing an editorial or cultural topic
nexu-io/html-video47352026年6月22日 更新

Create an animated HTML section divider with a large chapter number and navigation showing the section structure. An orange card slides across a dark gradient background, followed by a rising title that introduces the next topic.

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

  • Separating chapters or sections
  • Creating a launch announcement title card
  • Introducing a topic with section navigation
nexu-io/html-video47352026年6月22日 更新

Create a restrained animated HTML title scene around a brand or theme word. Thin letters appear in sequence, while generous whitespace, warm gold lines, corner marks, and softly pulsing indicators frame the message.

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

  • Introducing a brand word
  • Creating a restrained title card
  • Presenting a theme with generous whitespace
nexu-io/html-video47352026年6月22日 更新

Create animated brand or event titles with blue and dark panels sliding in from opposite sides. Staggered headlines, an outlined word, and a short handwritten phrase with a drawn underline give the opening a retro-modern feel.

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

  • Introducing a brand title with animated split panels
  • Creating an event opening title
  • Revealing an idea with handwritten accents
nexu-io/html-video47352026年6月22日 更新

Turn CSV, JSON, or a written conclusion into a newspaper-style chart for video clips or social posts. Produce a single HTML file with line, bar, or range-band charts, clear headlines, source notes, and staggered animation.

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

  • Showing data trends in a video clip
  • Creating a chart card for social media
  • Visualizing CSV or JSON data
nexu-io/html-video47352026年6月22日 更新

Create animated bar charts for weekly metrics or KPIs using real data. Bars grow from zero while their numbers count up in sync, with layouts that adapt to widescreen, vertical, and square video formats.

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

  • Presenting weekly metrics in a video
  • Animating KPI comparisons
  • Adding a data segment to an existing video
nexu-io/html-video47352026年6月22日 更新

查看 nexu-io 的全部技能

报告此技能的问题