1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Tipografía typographyanimationtypewriter

Typewriter Effect

Efecto de máquina de escribir que redacta y borra frases dinámicamente con cursor intermitente.

Hello, World!

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { TypewriterEffect } from 'astro-component-kit';
---

<TypewriterText text="Sample text" speed="3s">Content</TypewriterText>
--- import { TypewriterEffect } from 'astro-component-kit'; --- <TypewriterText text="Sample text" speed="3s">Content</TypewriterText>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/TypewriterEffect.astro:

astro 
---
interface Props { text: string; speed?: string; }
const { text, speed = '3s' } = Astro.props;
---
<div class="tw-wrap">
  <span class="tw-text" style={`--len: ${text.length}; --speed: ${speed}`}>
    {text}
  </span>
</div>
<style>
  .tw-wrap { display: inline-block; }
  .tw-text { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typing var(--speed) steps(var(--len)) forwards, blink 0.75s step-end infinite; }
  @keyframes typing { from { width: 0 } to { width: 100% } }
  @keyframes blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } }
</style>
--- interface Props { text: string; speed?: string; } const { text, speed = '3s' } = Astro.props; --- <div class="tw-wrap"> <span class="tw-text" style={`--len: ${text.length}; --speed: ${speed}`}> {text} </span> </div> <style> .tw-wrap { display: inline-block; } .tw-text { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typing var(--speed) steps(var(--len)) forwards, blink 0.75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } } </style>

Información Rápida

Categoría
Tipografía
Nombre de archivo
TypewriterEffect.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
typographyanimationtypewriter