Claude MarketplacesSubmit
nexu-io avatar

Frame Light Leak Cinema

nexu-io/open-design

Single-frame HTML generator for cinematic chapter cards with authentic film aesthetics. You get 2.39:1 letterbox framing, warm orange light leaks (never cold blue), 35mm grain via SVG turbulence, and large serif typography in cream tones. Good for documentary openings, personal film projects, or video chapter breaks when you want that analog feel without After Effects. The template enforces classic film color theory (warm leaks only, max four hues) and includes optional film perforations and scratches. Ships as a single HTML file with motion respecting prefers-reduced-motion. Inspired by hyperframes' light leak work.

skills.sh installs
2.7K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill frame-light-leak-cinema --agent claude-code

Installs into .claude/skills of the current project.

Files

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

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Category
Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Design & UI/UX
1nexu-io avatarframe-glitch-titlenexu-io/open-designDigital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.2.7Kskills.sh installs
2nexu-io avatarframe-logo-outronexu-io/open-designSegmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.2.7Kskills.sh installs
3nexu-io avatarframe-macos-notificationnexu-io/open-designRealistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.2.7Kskills.sh installs
4nexu-io avatarsocial-x-post-cardnexu-io/open-designRealistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.2.7Kskills.sh installs
5nexu-io avatarsocial-spotify-cardnexu-io/open-designSpotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.2.7Kskills.sh installs
6dylantarre avatarmobile-touchdylantarre/animation-principlesUse when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.2.4Kskills.sh installs