frame-light-leak-cinema

[Template: Film Light-Leak Cinematic Frame] [Intent] A single opening frame for documentaries / personal short films / video chapter cards — warm orange light leak + 35mm grain + large serif type, classic film texture. Inspired by hyperframes light-leak.

[Canvas]

• 2.39:1 letterbox (recommended): 1920×800, with 140px black bars top and bottom (#000)。
• or 16:9: 1920×1080, no letterbox.

[Background]

• Base layer: deep warm color (deep red-brown #1a0d08 / dark green #0a1410 / blue-purple #0d0e1a) or a scene depiction (CSS gradient simulating sky / indoor / outdoor).
• Film light leak (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%); colors use warm orange / peach / rose red / dark yellow, no cool blue。
• 35mm Grain: full-screen overlay of an SVG turbulence noise layer, opacity 14%, mix-blend-mode: overlay; you can also use background-image: url("data:image/svg+xml,...feTurbulence...")。
• Optional: 1 feDisplacementMap to simulate film weave (use with caution).

[Text]

• Center or lower left: large serif type (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; color warm white #f5e9d6 or cream.
• Subtitle (24-28px) one line, opacity 0.7, also serif.
• 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 Additions]

• "Film scratches": a few 1-2px vertical white lines, opacity 0.2, irregular spacing (use box-shadow multiple inset or multiple <div>)。
• "Film sprocket holes": inside the letterbox black bars, evenly spaced small white squares (CSS repeating-linear-gradient).
• Entrance animation: the whole frame goes from underexposed (brightness 0.3) → normal, within 800ms; the light leak position drifts slowly with a 12s cycle.

[Design Details]

• Never use more than 4 hues (deep background + 2 warm light-leak colors + cream text).
• Strictly forbidden: 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 "year / chapter / location" metadata (but source it from user content).
• Single-file HTML, use prefers-reduced-motion to disable animations.