Curseur de texte vfx

--- name: vfx-text-cursor zhname : "VFX Text Cursor" enname : "VFX TextCursor " emoji: "✨" description: "Cursor trail + colored scattered rays + directional light spot, ideal for revealing inspirational quotes word by word in video intros" category: video scenario: video- aspecthint : "1920×1080 (16:9)" featured: 38 recommended: 7 tags: ["vfx", "text", "cursor", "chromatic", "reveal", "frame"] exampleid : sample-vfx-text-cursor examplename : "VFX Cursor · Opening Quote" exampleformat : markdown exampletagline : "Word-by-Word Reveal + Chromatic Light Trail" exampledesc : "Hot Pink + Cyan Cursor Typing with Light Scatter, for Video Openings" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · vfx-text-cursor" od: mode: video surface: video scenario: video featured: 0.15 upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'VFX Text Cursor' template to turn my content into a sequence featuring 'cursor trails + colored light rays + directional light spots,' suitable for a video intro that reveals a quote word by word. Maintain the template's visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- [Template: VFX Text Cursor (Text-Cursor )] 【Intent】Video opening (/Hero -frame sequence) : the cursor “types” on the canvas, with text appearing word by word, trailing colored image scatter trails and directional light spots. Inspired by hyperframes vfx-text-cursor. 【Canvas】1920×1080, background#06070a (matte black) or#0a0d12 (warm with a blue tint); add a subtle vignette. 【Content】 - A quote (Chinese or English), centered, font size 6:8vw, weight 700, fontInter Tight /Source Sans 3 /Noto Sans SC . - Revealed character by character, with an 80 ms interval between each character; the current character is followed by a cursor▍ (or a thin vertical bar). - Revealed text is white by default#f5f5f7 , opacity 1; the area where text is about to be revealed has a chromatic ghost effect: atext-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff that appears at the moment of reveal and fades back to normal within 200 ms. - The cursor itself: a 16px-wide rectangle, color = accent (choose from: hot pink#ff3b6f / cyan#00d4ff / amber#ffb547 ), flashing at@keyframes with a 1.0s period; trailing a 60:120px motion blur trail (radially fading to transparent). 【Light Spots / Rays】 - Randomly generate 3:5 directional light spots (light leaks) near the typing position: use a narrow rectangle withlinear-gradient(45deg, transparent, accent20, transparent) andmix-blend-mode: screen at irregular angles. - When the text is finished, add a 0.5s shimmer sweep to the entire text. 【Text Elements】 - Top caption (uppercase, letter spacing 0.18em, 11px, opacity 0.5): "FRAME 01 · OPENING". - Subtitle below the text (24:28px, opacity 0.6): Source / Chapter. - Timecode in the lower-right corner (mono00:03:21 ). 【Design Details】 - Never: multicolored rainbow effects (use only a single binary color combination like hot pink + cyan; do not use the full R/G/B spectrum). - Fonts: Western textInter Tight Bold; Chinese textNoto Sans SC Bold; serif fonts are strictly prohibited. - Animations must use@keyframes + JS timers (setTimeout , word-by-word); must be able to be disabled viaprefers-reduced-motion (display all text immediately). - Must use quotes provided by the user; do not fabricate them. - Single HTML file; do not link to any resources other than fonts.