Organiza tus ideas
Crea tableros y arrastra tarjetas entre columnas.
Accueil guidé en étapes
Une fenêtre d'accueil en trois étapes, avec une illustration qui change de couleur et de forme, des points et des boutons.
Réglages
Code
<div class="uv-oob"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Voir l’accueil</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Bienvenue"><div class="il" aria-hidden="true"><i class="a"></i><i class="b"></i><i class="c"></i></div><div class="sl"><div class="st on" aria-hidden="false"><p class="ti">Organise tes idées</p><p class="ds">Crée des tableaux et glisse des cartes entre les colonnes.</p></div><div class="st" aria-hidden="true"><p class="ti">Travaille en équipe</p><p class="ds">Invite ton équipe et commentez en temps réel.</p></div><div class="st" aria-hidden="true"><p class="ti">Sois à l’heure</p><p class="ds">Échéances, rappels et alertes sur ton mobile.</p></div></div><div class="ft"><span class="dt"><i class="on"></i><i></i><i></i></span><button type="button" class="bk">Retour</button><button type="button" class="nx"><span class="n">Suivant</span><span class="e">Commencer</span></button></div></div></div>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 Overlays
Voir tout : OverlaysOù l’utiliser
Le premier lancement donne le ton d'un produit, et une courte visite guidée vaut mieux qu'un mur de texte. Cette fenêtre parcourt trois étapes ; à chacune, l'illustration déplace ses formes et son dégradé, le titre et la description glissent depuis le côté, les points s'étirent et le bouton principal passe de Suivant à l'appel final.
Les flèches changent d'étape, un bouton Retour apparaît dès la deuxième et Échap ferme la visite. Modifie les étapes dans les données en haut du code.