Frame Light Leak Cinema

Name: Frame Light Leak Cinema
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

This is a copy of frame-light-leak-cinema by nexu-io - installs and ranking accrue to the original listing.

Helps with ai & agent building tasks.

About

frame-light-leak-cinema is a Claude Code skill for ai & agent building. It helps developers move faster with AI-assisted coding.

frame-light-leak-cinema
AI & Agent Building
AI-coding skill

Frame Light Leak Cinema by the numbers

1 all-time installs (skills.sh)
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --skill frame-light-leak-cinema

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/html-video/frame-light-leak-cinema.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-light-leak-cinema)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

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

{
  "name": "@html-video/template-frame-light-leak-cinema",
  "version": "0.1.0",
  "description": "html-video template: frame-light-leak-cinema (cherry-picked from nexu-io/open-design)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Light Leak Cinema · REEL 03</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+Pro:ital,wght@0,400;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Source Serif Pro','Noto Serif SC',Georgia,serif; background:#000; margin:0; min-height:100vh; }
  .frame {
    position:relative; width:100%; max-width:1600px; aspect-ratio: 2.39 / 1; margin:0 auto;
    background:#1a0d08;
    overflow:hidden;
  }
  .scene {
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 78% 18%, #ffb547 0%, transparent 38%),
      radial-gradient(ellipse at 90% 30%, #ff7e3f 0%, transparent 30%),
      linear-gradient(180deg, transparent 60%, #d97757 110%),
      radial-gradient(ellipse at 30% 60%, #2a1410 0%, transparent 60%),
      linear-gradient(135deg, #1a0d08 0%, #28140c 50%, #0a0502 100%);
  }
  .grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
  /* scratches */
  .scratch { position:absolute; top:0; bottom:0; width:1px; background:#f5e9d6; opacity:0.18; }
  .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%); }
  .perfs {
    position:absolute; left:0; right:0; height:6px;
    background-image: repeating-linear-gradient(90deg, #f5e9d6 0 8px, transparent 8px 24px);
    opacity:0.5;
  }
  .cream { color:#f5e9d6; }
  .mono { font-family:'IBM Plex Mono',monospace; }
  .display { font-family:'EB Garamond','Noto Serif SC',serif; }
  .chip { font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-6" style="background:#000">
  <div class="frame">
    <div class="scene"></div>

    <!-- scratches -->
    <div class="scratch" style="left:14%;height:38%"></div>
    <div class="scratch" style="left:42%;height:60%;top:20%;opacity:0.12"></div>
    <div class="scratch" style="left:71%;height:30%;top:55%"></div>

    <!-- letterbox bars - actually built into aspect ratio container; perfs on top -->

    <!-- top caption -->
    <header class="absolute top-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-70 z-10">
      <span>REEL 03 · CH I · MMXXVI</span>
      <span>A Quiet Year in Berlin</span>
      <span>00:03:21</span>
    </header>

    <!-- main text -->
    <main class="absolute z-10 cream" style="left:8%; bottom:18%; max-width:60%">
      <div class="chip mono opacity-70">Reel III · Title</div>
      <h1 class="display mt-3 leading-[1.05] italic font-medium" style="font-size:clamp(40px,5.5vw,84px); color:#f5e9d6">
        A Quiet Year<br/>
        <span style="font-style:italic">in</span> Berlin.
      </h1>
      <p class="display mt-4 italic opacity-80 text-[22px]">
        A short film about typesetting, in fourteen reels.
      </p>
    </main>

    <!-- bottom right meta -->
    <footer class="absolute bottom-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-50 z-10">
      <span>52.5200° N · 13.4050° E</span>
      <span>FILMED ON 35MM · PROXY 1080P</span>
      <span>FRAME · LIGHT-LEAK-CINEMA</span>
    </footer>

    <div class="grain"></div>
    <div class="vignette"></div>
  </div>
</body>
</html>

spec_version: 1
id: frame-light-leak-cinema
name: Light Leak Cinema
description: >
  Cinematic light leak frame — film grain, lens flare, and editorial 35mm warmth over a hero shot.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: ambient
subcategory: cinematic
tags: [cinema, light-leak, film, 35mm, grain, lens-flare]

best_for:
  - "Cinematic intro"
  - "Documentary cold open"
  - "Mood / b-roll"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "9:16", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 4
    max_sec: 10
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [title]
    properties:
      title:
        type: "string"
        maxLength: 120
        description: "Cinematic headline / quote"
      subtitle:
        type: "string"
        maxLength: 120
        description: "Director / location / date"
      duration_sec:
        type: "number"
        minimum: 4
        maximum: 10
        default: 6
  examples:
    - {"title": "The first frame is everything", "subtitle": "— directed by html-video, 2026", "duration_sec": 6}

license:
  spdx: Apache-2.0
  attribution_required: false
  redistribution_allowed: true
  commercial_use: true

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-05-27
    notes: Cherry-picked from open-design/repo/skills/frame-light-leak-cinema/example.html

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 6
    render_wall_clock_sec: 11
    machine: "M2 MacBook Air"