Tipografía y efectos de texto

Animación de texto a máquina de escribir

Usa una animación por pasos con CSS para simular que el texto aparece carácter por carácter y que el cursor parpadea.

HTMLCSSAnimaciónTexto

Tras activar JavaScript, puedes editar, ejecutar y guardar este ejemplo. El código fuente fijado es el siguiente:

<!doctype html>
<html lang="es" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Animación de texto a máquina de escribir</title>
  <style>
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 22px; color: #342b26; font-family: Georgia, "STSong", serif; background: #d9cfbd; background-image: repeating-linear-gradient(0deg, rgba(77,59,43,.04) 0 1px, transparent 1px 5px); }
    .paper { position: relative; width: min(820px, 100%); min-height: 470px; padding: clamp(38px, 8vw, 82px); border: 1px solid #b8aa95; background: #f5eddf; box-shadow: 0 24px 60px rgba(57,43,31,.2); transform: rotate(-.4deg); }
    .paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(20px, 5vw, 48px); width: 1px; background: rgba(190,75,64,.25); }
    .date { color: #8b7362; font: 700 11px/1 "Courier New", monospace; letter-spacing: .18em; }
    h1 { margin: 40px 0 22px; font-size: clamp(31px, 6vw, 58px); line-height: 1.3; font-weight: 500; }
    .typed-line { display: inline-block; max-width: 100%; overflow: hidden; border-right: .08em solid #bd493c; white-space: nowrap; vertical-align: bottom; animation: typing 4s steps(16, end) .5s both, caret .75s step-end infinite; }
    p { max-width: 580px; margin: 0; color: #78685d; font-size: 16px; line-height: 1.9; }
    .signature { margin-top: 54px; color: #bd493c; font: italic 24px/1 "STKaiti", "KaiTi", serif; transform: rotate(-3deg); }
    .seal { position: absolute; right: clamp(24px, 6vw, 64px); bottom: 46px; display: grid; width: 62px; height: 62px; place-items: center; border: 3px double #bd493c; color: #bd493c; font: 700 18px/1 "STKaiti", "KaiTi", serif; opacity: .72; transform: rotate(7deg); }
    @keyframes typing { from { width: 0; } to { width: 16em; } }
    @keyframes caret { 50% { border-color: transparent; } }
    @media (max-width: 560px) { .typed-line { white-space: normal; animation: reveal 1.2s ease both; border: 0; } .paper { min-height: 520px; } }
    @keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
    @media (prefers-reduced-motion: reduce) { .typed-line { width: auto; animation: none; border: 0; } }
  </style>
</head>
<body>
  <main class="paper">
    <span class="date">A LETTER FROM SUMMER · 2026</span>
    <h1><span class="typed-line">Que cada partida tenga una nueva respuesta.</span></h1>
    <p>Hay paisajes que no están en el destino, sino en esos instantes en que cambias de rumbo. Deja un poco de espacio en el plan para que el verano escriba por sí mismo el resto de la historia.</p>
    <div class="signature">Para ti, que vas de camino</div>
    <div class="seal" aria-hidden="true">Ver<br>Montaña</div>
  </main>
</body>
</html>