Cinematic credits (film grain effect)

--- name: frame-light-leak-cinema zhname : "胶片漏光电影帧" enname : "Light-Leak Cinematic Frame" emoji: "🎞️" description: "Film light leak + grain + 16:9 letterbox + large serif text, cinematic opening / chapter card" category: video scenario: video aspecthint s: "2.39:1 letterbox (1920×800) or 16:9 (1920×1080)" featured: 36 tags: ["cinema", "film", "light-leak", "grain", "letterbox", "frame"] exampleid : sample-frame-light-leak-cinema examplename : "Film Light Leak · REEL 03" exampleformat : markdown exampletagline : "Warm orange light leak + 35mm grain" exampledesc : "2.39:1 letterbox + serif italic large text + film perforations" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · light-leak" od: mode: video surface: video scenario: video upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'Film Light Leak Movie Frame' template to turn my content into a 'film light leak + grain + 16:9 letterbox + large serif text' cinematic opening / chapter card.” Maintain the template’s visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- [Template: Film Light Leak Movie Frame] 【Intent】Opening single frame for documentaries / personal short films / video chapter cards : warm orange light leak + 35mm grain + large serif text, classic film texture. Inspired by hyperframes light-leak. 【Canvas】 - 2.39:1 letterbox (recommended): 1920×800, 140px black borders top and bottom (#000 ). - Or 16:9: 1920×1080, no letterbox. 【Background】 - Base layer: Deep warm colors (dark reddish-brown#1a0d08 / dark green#0a1410 / blue-purple#0d0e1a ) or scene depictions (CSS gradients simulating sky / indoor / outdoor). - Film Light Leak: 2:3 largeradial-gradient(ellipse at top right, #ffb547 0%, transparent 50%) + 1 at the bottomlinear-gradient(to top, #d97757 0%, transparent 30%) ; use warm colors like orange, peach, magenta, or dark yellow:avoid cool blues. - 35mm Grain: Full-screen SVG turbulence noise layer, opacity 14%,mix-blend-mode: overlay ; you can also usebackground-image: url("data:image/svg+xml,...feTurbulence...") . - Optional: 1 layer offeDisplacementMap to simulate film shake (use with caution). 【Text】 - Center or bottom left: Large serif font (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; Warm white color#f5e9d6 , or cream. - Subtitle (24:28px), single line, opacity 0.7, same serif font. - Corner caption (uppercase letterspace 0.18em, 10:11px, monochrome, opacity 0.5): "REEL 03 · CH I · 1985". - Bottom: timecode + filming location + date (mono, opacity 0.4). 【Optional Additions】 - "Film scratches": several 1-2px vertical white lines, opacity 0.2, irregular spacing (using multiple `box-shadow insets or multiple <div> ). - "Film Perforations": Small white squares spaced evenly within the letterbox black borders (CSS repeating-linear-gradient). - Entry animation: The entire screen transitions from underexposed (brightness 0.3) to normal within 800 ms; light leaks slowly drift in a 12-second cycle. [Design Details] - Use no more than 4 hues (dark background + 2 warm light leak colors + cream text). - Strictly prohibited: blue-purple light leaks (contradicts film texture), emojis, neon colors, and 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 must be user-provided content). - Single HTML file; use “prefers-reduced-motion` ” to disable animations.