{"id":"frame-light-leak-cinema","name":"frame-light-leak-cinema","summary":"フィルム漏れ+グレインノイズ+16:9レターボックス+セリフ体、シネマティックオープニング/チャプターカード","body":"【模板: 胶片漏光电影帧】\n【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。\n\n【画布】\n- **2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px (`#000`)。\n- 或 16:9: 1920×1080, 无 letterbox。\n\n【背景】\n- 底层: 深暖色 (深红棕 `#1a0d08` / 墨绿 `#0a1410` / 蓝紫 `#0d0e1a`) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。\n- **胶片漏光 (Light Leak)**: 2-3 个大 `radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%)` + 1 个底部 `linear-gradient(to top, #d97757 0%, transparent 30%)`; 颜色取暖橙 / 桃 / 玫红 / 暗黄, **不要冷蓝**。\n- **35mm Grain**: 全屏覆盖 SVG turbulence noise 图层, opacity 14%, `mix-blend-mode: overlay`; 也可用 `background-image: url(\"data:image/svg+xml,...feTurbulence...\")`。\n- 可选: 1 道 `feDisplacementMap` 模拟胶片摆动 (慎用)。\n\n【文字】\n- 中央或左下: 大字衬线 (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; 颜色暖白 `#f5e9d6` 或 cream。\n- 副标 (24-28px) 一行, opacity 0.7, 同样衬线。\n- 角落 caption (uppercase letterspace 0.18em, 10-11px, mono, opacity 0.5): \"REEL 03 · CH I · 1985\"。\n- 底部 timecode + 拍摄地 + 日期 (mono, opacity 0.4)。\n\n【可选附加】\n- \"胶片划痕\": 几条 1-2px 竖向白线, opacity 0.2, 不规则间距 (用 `box-shadow` 多重 inset 或多个 `<div>`)。\n- \"胶片齿孔\": letterbox 黑边内, 等距小白方块 (CSS repeating-linear-gradient)。\n- 入场动效: 整画面从 underexposed (brightness 0.3) → normal, 800ms 内; 漏光位置缓慢漂移 12s 一个周期。\n\n【设计细节】\n- 颜色绝不超过 4 个色相 (深背景 + 2 个暖漏光色 + 文字 cream)。\n- 严禁: 蓝紫漏光 (违反胶片质感)、emoji、霓虹色、几何 dashboard 装饰。\n- 中文: `Noto Serif SC` italic 不存在 → 用 `Noto Serif SC` regular + 字距加大。\n- 必须用用户提供的标题; 自动估算合理\"年份 / 章节 / 地点\" 元数据 (但来源用户内容)。\n- 单文件 HTML, 用 `prefers-reduced-motion` 关动效。","author":"@nexu-io","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/frame-light-leak-cinema","license":"Apache-2.0","category":"video","lang":"multi","tokens":763,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"example.html","size":3803,"sha256":"e00ecf47b8e135e9bac3e168b19293632327691de38687e0209710e67206efc8"},{"path":"example.md","size":224,"sha256":"eeacf21385eb845551a4ae5eb7e7194945af3b9d2be17d688571d0b4c1384d2a"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["cdn.tailwindcss.com"]}}