HTML + CSSTexto y scroll
Titular de peso variable con el cursor
Las letras cercanas al puntero engordan, suben un poco y toman el color de acento, como un imán tipográfico.
Ajustes
16px
1x
140px
Código
<h3 class="uv-twc" aria-label="Diseño con intención"><span class="ws" translate="no" aria-hidden="true">Diseño con intención</span></h3>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Un titular grande en peso fino reacciona al puntero letra a letra. Cada carácter mide su distancia al cursor y pasa de 300 a 900 de grosor, se eleva un poco y se tiñe del color de acento, así que una ola suave de letra negrita sigue a la mano por las palabras.
Los lectores de pantalla reciben la frase entera con aria-label mientras las letras sueltas quedan ocultas. Un deslizador ajusta el alcance del efecto en píxeles y el texto se reconstruye solo al cambiarlo, así que sirve para cualquier titular.