HTML + CSSInputs
Buscador con placeholder animado
El texto de ejemplo se escribe letra a letra, se borra y vuelve a empezar con otra búsqueda.
Ajustes
16px
1x
Código
<label class="uv-in2t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg><input></label>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 Inputs
Dónde usarlo
Un buscador vacío no dice qué se puede buscar; este lo cuenta escribiendo ejemplos. Encaja en la portada de un marketplace, una biblioteca de iconos o plantillas, o un centro de ayuda: «Buscar iconos…», «Buscar paletas…» y así. Un placeholder animado en un input de búsqueda, con un pequeño script que teclea por ti.
El texto en movimiento es una pista, no una etiqueta, así que mantén un título visible o un nombre accesible. Usa búsquedas reales de tus visitantes y que sean cortas, de tres o cuatro palabras como mucho.