useTypingEffect · @codigosinsiesta/theme

Demos

Single — escribe una vez

✏ escribiendo

Loop — escribe, pausa, borra, repite

En loop, mantén aria-live="off" para no spammear screen readers.

Uso

hero.svelte

<script>
  import { useTypingEffect } from '@codigosinsiesta/theme';
  const typing = useTypingEffect({
    text: 'Technical Leader Specialist',
    speed: 80
  });
</script>

<h1 aria-live="polite">
  <span>{typing.displayText}</span>
  <span class="csi-typing-cursor" aria-hidden="true"></span>
</h1>

El cursor parpadeante (.csi-typing-cursor) viene en chrome.css — solo CSS, sin componente. Toma currentColor del contenedor.

Accesibilidad

Single (default): envuelve el contenedor en aria-live="polite". Cuando termine de escribirse, los screen readers anunciarán el texto final.
Loop: usa aria-live="off" (o no pongas nada). Si lo dejas en polite, anunciará cada ciclo y satura.
prefers-reduced-motion: reduce: el composable salta a text instantáneamente y el cursor deja de parpadear (animación CSS pausada por chrome.css).

API

Option	Tipo	Default	Descripción
`text`	`string`	—	Texto a escribir.
`speed`	`number`	`80`	ms por carácter.
`startDelay`	`number`	`0`	ms antes de empezar a escribir.
`loop`	`boolean`	`false`	Si `true`, borra y reescribe en bucle.
`loopPause`	`number`	`2000`	ms de pausa entre fases (solo en loop).

Devuelve:

Field	Tipo	Descripción
`displayText`	`string` (reactivo)	Texto visible actual.
`isComplete`	`boolean` (reactivo)	`true` cuando termina de escribir (en loop, transitorio).
`reset()`	fn	Reinicia desde cero respetando `startDelay`.

Casos de uso

Decks: portadas (SlideHero) con título escribiéndose.
Portfolio: hero dinámico con rol profesional.
Landings de talleres: títulos del workshop con efecto introductorio.