Title display issue

--- name: frame-glitch-title zhname e: "Glitch Art Title Frame" enname e: "Glitch Title Frame" emoji: "⚡" description: "Digital glitch / out-of-focus offset / data corruption title, suitable for video transitions / cyberpunk hero" category: video scenario: video aspecthint e: "1920×1080 (16:9)" featured: 37 recommended: 6 tags: ["glitch", "cyberpunk", "title", "transition", "vfx", "frame"] exampleid : sample-frame-glitch-title examplename : "SIGNALLOST " exampleformat : markdown exampletagline : "cyan / magenta blurring + CRT scan lines" exampledesc : "giant title + data corruption artifacts + ASCII noise chunks in the corners" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · glitch" od: mode: video surface: video scenario: video featured: 0.14 upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false example_prompt : "Use the 'Glitch Art Title Frame' template to turn my content into a 'digital glitch / speckle / data corruption title, suitable for video transitions / cyberpunk hero.' Maintain the template's visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- [Template: Glitch Art Title Frame (Glitch Title)] [Intent] Single-frame hero / video transition / cyberpunk-style title. Inspired by hyperframes glitch. 【Canvas】1920×1080, background#070708 (near-black or CRT dark gray)#0d0e10 ; add a 56px grid (5% opacity) + horizontal scanlines (8% opacity, 2px spacing). 【Main Title】 - Centered, 6:9vw, weight 800/900, fontSpace Grotesk Bold /Inter Tight Black /JetBrains Mono Bold . - Color: Main layer#f5f5f7 ; with 2 layers of artifacts behind it: - cyan#00f0ff translate(-3px ,1px ). - magenta#ff2bd6 translate(3px ,-1px ). - Apply a clip-path to the entire layer, sliced into 5:8 segments; each segment uses `@keyframes with a random translateX ranging from -10px to 10px, lasting 80:160 ms, played out of sync to create a "data corruption" blur effect. - Trigger a "major glitch" every 1.5 seconds:the entire title is horizontally smeared for 1 frame, using filter: url(#displacementFilter) or simple CSS translation. 【Additional Layers】 - A single line of caption at the top (uppercase mono, 11px, opacity 0.6):>> SIGNAL_LOST · CH-04 · 14:32:08 . - One line of subtitles below the title (24:28px, mono, opacity 0.7), occasionally replaced with " ̶▒̶ " characters (pseudo-garbled text). - Randomly scattered ASCII noise chunks (█▓▒░ ) in the corners. - Timecode at the bottom (monochrome, opacity 0.4). - A noise grain layer overlaid across the entire screenbackground-image: url("data:image/svg+xml,...turbulence...") , opacity 6%, mix-blend-mode: overlay. 【SVG Filters (Optional)】 - Define a "<filter id="rgbShift"> " usingfeColorMatrix +feOffset +feMerge to offset the R/G/B channels; apply the entire layerfilter: url(#rgbShift) at the moment of the glitch. 【Design Details】 - Use only the following colors: black / white / cyan / magenta / a touch of amber as a warning color; full rainbow colors are strictly prohibited. - Fonts: Western textSpace Grotesk orJetBrains Mono Bold; Chinese textNoto Sans Mono CJK SC orNoto Sans SC Bold. - “Lorem ipsum” is strictly prohibited; must use the user’s title + subtitle. - Animations use@keyframes , which can be disabled viaprefers-reduced-motion` (reverting to a static chromatic split). - Single HTML file.