frame-light-leak-cinema

Original：🇨🇳 Chinese

Translated

Film light leak + grain noise + 16:9 letterbox + large serif font, cinematic opening / chapter card

6installs

Sourcenexu-io/open-design

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/open-design frame-light-leak-cinema

SKILL.md Content (Chinese)

View Translation Comparison →

【Template: Film Light Leak Movie Frame】【Purpose】Opening single frame for documentaries / personal short films / video chapter cards — warm orange light leak + 35mm grain + large serif font, classic film texture. Inspired by hyperframes light-leak.

【Canvas】

2.39:1 letterbox (Recommended): 1920×800, 140px top and bottom black bars (
```
#000
```
).
Or 16:9: 1920×1080, no letterbox.

【Background】

Base layer: Deep warm tones (dark reddish brown
```
#1a0d08
```
/ dark green
```
#0a1410
```
/ blue-purple
```
#0d0e1a
```
) or scene depiction (CSS gradient to simulate sky / indoor / outdoor).

Film Light Leak: 2-3 large

radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%)

+ 1 bottom

linear-gradient(to top, #d97757 0%, transparent 30%)

; use warm orange / peach / rose red / dark yellow, no cool blue.

35mm Grain: Full-screen overlay of SVG turbulence noise layer, opacity 14%,
```
mix-blend-mode: overlay
```
; alternatively use
```
background-image: url("data:image/svg+xml,...feTurbulence...")
```
.
Optional: 1
```
feDisplacementMap
```
to simulate film jitter (use cautiously).

【Text】

Center or bottom-left: Large serif font (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; color warm white
```
#f5e9d6
```
or cream.
Subtitle (24-28px) in one line, opacity 0.7, also serif font.
Corner caption (uppercase letterspace 0.18em, 10-11px, mono, opacity 0.5): "REEL 03 · CH I · 1985".
Bottom timecode + shooting location + date (mono, opacity 0.4).

【Optional Add-ons】

"Film scratches": Several 1-2px vertical white lines, opacity 0.2, irregular spacing (use
```
box-shadow
```
multiple inset or multiple
```
<div>
```
).
"Film perforations": Equally spaced small white squares within letterbox black bars (CSS repeating-linear-gradient).
Entrance animation: Whole frame transitions from underexposed (brightness 0.3) → normal, within 800ms; light leak position drifts slowly with a 12s cycle.

【Design Details】

No more than 4 color hues (dark background + 2 warm light leak colors + cream text).
Prohibited: Blue-purple light leak (violates film texture), emoji, neon colors, geometric dashboard decorations.
Chinese:
```
Noto Serif SC
```
italic does not exist → use
```
Noto Serif SC
```
regular + increased letter spacing.
Must use the title provided by the user; automatically estimate reasonable metadata like "year / chapter / location" (but sourced from user content).
Single-file HTML, use
```
prefers-reduced-motion
```
to disable animations.

frame-light-leak-cinema

NPX Install

Tags

SKILL.md Content (Chinese)