Generador de texto ondulado animado

Configurador de texto ondulado

1. 01

   Copia el HTML generado

   Ajusta los controles hasta que la vista previa te convenza, pulsa Copiar HTML y pega el bloque <div class="text-path"> donde quieras que aparezca la onda.

2. 02

   Incluye el script del componente

   Descarga text-path.js a tu proyecto y cárgalo antes de cerrar </body> con <script src="/js/text-path.js" defer></script>. El script detecta cada elemento [data-text-path] y lo anima solo. Añade también este CSS mínimo:

   .text-path {
     position: relative;
     width: 100%;
     height: 240px;
     overflow: hidden;
   }
   .text-path svg {
     display: block;
     width: 100%;
     height: 100%;
   }

3. 03

   Personaliza con data-atributos

   Cambia texto, color, onda o velocidad editando los atributos data-* del bloque, sin volver al generador. También acepta data-font-family, data-font-weight y data-font-style para usar tu propia tipografía.