Recherche au placeholder animé
Le texte d’exemple s’écrit lettre par lettre, s’efface puis recommence avec une autre recherche.
Réglages
Code
<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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Où l’utiliser
Un champ de recherche vide ne dit pas ce que l’on peut chercher ; celui-ci le montre en tapant des exemples. Il convient à l’accueil d’une marketplace, d’une bibliothèque d’icônes ou de modèles, ou d’un centre d’aide : « Rechercher des icônes… », « Rechercher des palettes… ». Un placeholder animé dans un champ de recherche, avec un petit script qui tape à votre place.
Le texte animé est un indice, pas un libellé : gardez un titre visible ou un nom accessible pour le champ. Reprenez de vraies recherches de vos visiteurs, courtes, trois ou quatre mots au maximum.