vfx-text-cursor

【Modelo: Cursor de Texto VFX】 【Intenção】Abertura de vídeo / Frame principal — Um cursor "digita" na tela, o texto aparece letra por letra, seguido por um rastro de aberração cromática e um vazamento de luz direcional. Inspirado em hyperframes vfx-text-cursor.

【Tela】1920×1080, fundo #06070a preto fosco ou #0a0d12 (com um leve tom azulado); com um vinheta sutil.

【Conteúdo】

• Uma citação inspiradora (em chinês ou inglês), centralizada, tamanho da fonte 6-8vw, peso 700, fonte Inter Tight / Source Sans 3 / Noto Sans SC.
• Revelação letra por letra, com 80ms de intervalo entre cada caractere; um cursor ▍ (ou uma barra vertical fina) segue o caractere atual.
• Texto revelado padrão branco #f5f5f7, opacidade 1; na posição a ser revelada, adicione um fantasma cromático: uma cópia text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff no momento da revelação, que converge para o normal em 200ms.
• O cursor em si: retângulo de 16px de largura, cor = acento (escolha 1: rosa choque #ff3b6f / ciano #00d4ff / âmbar #ffb547), piscando @keyframes com um ciclo de 1.0s; seguido por um rastro de motion blur de 60-120px (gradiente radial para transparência).

【Vazamentos de Luz / Raios】

• Gere aleatoriamente 3-5 vazamentos de luz direcionais perto da posição de digitação: use um retângulo fino linear-gradient(45deg, transparent, accent20, transparent) + mix-blend-mode: screen, em ângulos irregulares.
• Quando o texto terminar de ser digitado, adicione um brilho de 0.5s em toda a seção (uma faixa de luz varrendo).

【Campos】

• Legenda superior (letras maiúsculas com espaçamento de 0.18em, 11px, opacidade 0.5): "FRAME 01 · OPENING".
• Subtítulo abaixo do texto (24-28px, opacidade 0.6): Fonte / Capítulo.
• Código de tempo no canto inferior direito (00:03:21 mono).

【Detalhes de Design】

• Nunca: arco-íris cromático multicolorido (use apenas aberração cromática binária como rosa choque + ciano, não use todas as cores R/G/B).
• Fontes: Inter Tight Bold para caracteres latinos; Noto Sans SC Bold para caracteres chineses; fontes com serifa são estritamente proibidas.
• Animação usando @keyframes + temporizador JS (setTimeout letra por letra), pode ser desativado por prefers-reduced-motion (exibindo todas as letras diretamente).
• Use a citação inspiradora fornecida pelo usuário; não invente.
• Arquivo HTML único, não use recursos externos além das fontes.