Amanecer en el puerto
Café de las ocho
Ruta en bici por la costa
Nuevo mural en el barrio
Pan recién hecho
Último baño del año
Lluvia en la ventana
Concierto en el parque
Visor de historias a pantalla completa
Tocas un avatar y su historia crece hasta llenar la pantalla, con barras de progreso, toques a los lados y pausa al mantener.
Ajustes
Código
<div class="uvq13-sty"><div class="tray"><button type="button" class="av" style="--a:#f97316" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">L</b></span><small>Lucía</small></button><button type="button" class="av" style="--a:#0ea5e9" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">M</b></span><small>Marco</small></button><button type="button" class="av" style="--a:#a855f7" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">I</b></span><small>Inés</small></button><button type="button" class="av" style="--a:#22c55e" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">T</b></span><small>Teo</small></button></div><div class="fd" aria-hidden="true"><i class="ph"></i><i></i><i class="s"></i></div><div class="vw" role="dialog" aria-modal="true" aria-label="Historias"><div class="cd"><div class="sc" data-s="sun" style="--g1:#fb923c;--g2:#6d28d9"><p>Amanecer en el puerto</p></div><div class="sc" data-s="cup" style="--g1:#7c2d12;--g2:#f59e0b"><p>Café de las ocho</p></div><div class="sc" data-s="hill" style="--g1:#0ea5e9;--g2:#16a34a"><p>Ruta en bici por la costa</p></div><div class="sc" data-s="dots" style="--g1:#db2777;--g2:#facc15"><p>Nuevo mural en el barrio</p></div><div class="sc" data-s="sun" style="--g1:#92400e;--g2:#fde68a"><p>Pan recién hecho</p></div><div class="sc" data-s="wave" style="--g1:#0e7490;--g2:#67e8f9"><p>Último baño del año</p></div><div class="sc" data-s="rain" style="--g1:#1e293b;--g2:#64748b"><p>Lluvia en la ventana</p></div><div class="sc" data-s="dots" style="--g1:#4c1d95;--g2:#f472b6"><p>Concierto en el parque</p></div><div class="bars" aria-hidden="true"><i><b></b></i><i><b></b></i></div><div class="hd"><span class="ua" aria-hidden="true"></span><b class="un"></b><small>2 h</small><button type="button" class="pz" aria-label="Pausar" aria-pressed="false"><svg class="i1" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="i2" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14M16 5v14" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg></button><button type="button" class="x" aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><button type="button" class="nv pv" aria-label="Historia anterior"></button><button type="button" class="nv nx" aria-label="Historia siguiente"></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
Las historias ya son un patrón propio, y este overlay reconstruye el visor entero. La tarjeta crece desde el avatar pulsado, las barras segmentadas se llenan con el tiempo, un toque a la derecha o a la izquierda avanza o retrocede, mantener pausa y esconde la interfaz y deslizar hacia abajo cierra. Cada escena está pintada con degradados CSS. Encaja en apps sociales, novedades de producto y resúmenes de eventos.
Los dos colores pintan el anillo de las historias sin ver. Cambia las escenas por imágenes o vídeo, deja dos historias por persona o añade más barras, y usa las flechas, el botón de pausa y Escape desde el teclado.