Organiza tus ideas
Crea tableros y arrastra tarjetas entre columnas.
Bienvenida en pasos
Un modal de bienvenida con tres pasos, una ilustración que cambia de color y forma, puntos y botones de avanzar.
Ajustes
Código
<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">Ver bienvenida</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Bienvenida"><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">Organiza tus ideas</p><p class="ds">Crea tableros y arrastra tarjetas entre columnas.</p></div><div class="st" aria-hidden="true"><p class="ti">Trabaja en equipo</p><p class="ds">Invita a tu gente y comentad en tiempo real.</p></div><div class="st" aria-hidden="true"><p class="ti">Llega a tiempo</p><p class="ds">Fechas, recordatorios y avisos en el móvil.</p></div></div><div class="ft"><span class="dt"><i class="on"></i><i></i><i></i></span><button type="button" class="bk">Atrás</button><button type="button" class="nx"><span class="n">Siguiente</span><span class="e">Empezar</span></button></div></div></div>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 Overlays
Ver todos: OverlaysDónde usarlo
El primer uso marca el tono de un producto y un recorrido corto gana a un muro de texto. Este modal recorre tres pasos; en cada uno la ilustración mueve sus formas y su degradado, el título y la descripción entran desde un lado, los puntos de progreso se estiran y el botón principal pasa de Siguiente a la llamada final.
Las flechas del teclado cambian de paso, el botón Atrás aparece a partir del segundo y Escape cierra el recorrido. Edita los pasos en los datos del principio del código y deja cada descripción en una frase.